我已经为自己的练习制作了小米时钟,但是有一个问题,我无法进行颜色扩展表盘。
我想在表盘中逐一分配白色,并且它与三 Angular 形和表盘不透明性一起减少。
这是我要达到的IMG:-
视频:-https://vimeo.com/262815342
Codepen
var clock = "";
for(var i = 0; i < 360; i++){
clock += "<div id='dials'><div id='cutline'></div></div>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";
document.getElementById('container').innerHTML = clock;
for (var i = 1; i <= 360; i++) {
document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}
/* Real Time Clock */
var hour, min, lol, lol1, lol2, second;
second = moment().second() * 6;
setInterval( function(){
//var min = moment().minutes()
//console.log("min:-"+min);
hour = moment().hours();
//console.log("hour:-"+hour);
//var time = moment();
//console.log(time);
min = moment().minutes() * 6;
//console.log(min);
hour = moment().hours() % 12 / 12 * 360 + (min / 12);
//console.log(hour);
lol = document.getElementById('mline').style.transform = "rotate("+ ( 180 + min ) + "deg)";
//console.log(lol);
lol1 = document.getElementById('hline').style.transform = "rotate("+ ( 180 + hour ) + "deg)";
//console.log(lol1);
}, 1000);
setInterval(function(){
second++;
lol2 = document.getElementById('tringleM').style.transform = "rotate("+ (180 + second ) + "deg)";
}, (60/360)*1000);
body{
background-color: white;
}
#container{
position: relative;
width: 420px;
height: 420px;
padding: 10px;
background-color: #4682B4;
transform: scale(1.44);
transform-origin: 0 0;
}
#dials{
position: absolute;
top: 40px;
left: 50%;
width: 1px;
height: 180px;
transform-origin: bottom center;
}
#cutline{
background-color: white;
width: 1px;
height: 20px;
opacity: 0.5;
}
#img{
position: absolute;
top: 15px;
left: 20px;
width: 600px;
}
#circle{
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
border: 1px solid white;
}
#dot{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
margin: -10px;
left: 50%;
top: 50%;
border: 5px solid white;
background: #4682B4;
z-index: 1001;
}
#mline, #hline{
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 1px);
width: 2px;
height: 140px;
background-color: white;
transform-origin: top center;
transform: rotate(180deg);
}
#hline{
height: 70px;
opacity: 0.6;
}
#tringle{
width: 0;
height: 0;
position: absolute;
top: 100%;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
}
/*.shadow{
height: 20px;
width: 50px;
position: absolute;
bottom: -40%;
left: calc(50% - 25px);
transform-origin: top center;
transform: rotate(180deg);
background: red;
}*/
#tringleM{
width: 20px;
height: 140px;
position: absolute;
top: 50%;
left: calc(50% - 10px);
transform-origin: top center;
transform: rotate(180deg);
transition: all 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<div id="container"></div>
<img id="img" src="https://i.stack.imgur.com/t7EkM.png">
最佳答案
这是通过添加/删除将增加不透明度的类的想法:
更新
编辑了代码以使用span
而不是div
,因此我可以轻松使用nth-of-type
而不会出现问题(因为nth-child
由于其他元素而无法正常工作)
var clock = "";
for(var i = 0; i < 360; i++){
clock += "<span id='dials'><div id='cutline'></div></span>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";
document.getElementById('container').innerHTML = clock;
for (var i = 1; i <= 360; i++) {
document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}
/* Real Time Clock */
var hour, min, lol, lol1, lol2, second;
second = moment().second() * 6;
setInterval( function(){
//var min = moment().minutes()
//console.log("min:-"+min);
hour = moment().hours();
//console.log("hour:-"+hour);
//var time = moment();
//console.log(time);
min = moment().minutes() * 6;
//console.log(min);
hour = moment().hours() % 12 / 12 * 360 + (min / 12);
//console.log(hour);
lol = document.getElementById('mline').style.transform = "rotate("+ ( 180 + min ) + "deg)";
//console.log(lol);
lol1 = document.getElementById('hline').style.transform = "rotate("+ ( 180 + hour ) + "deg)";
//console.log(lol1);
}, 1000);
setInterval(function(){
second++;
lol2 = document.getElementById('tringleM').style.transform = "rotate("+ (180 + second ) + "deg)";
document.querySelector('#container span:nth-of-type('+((second-5)%360 +1)+') #cutline').classList.add('one');
document.querySelector('#container span:nth-of-type('+((second -30 + 360)%360 +1)+') #cutline').classList.remove('one');
}, (60/360)*1000);
body{
background-color: white;
}
#container{
position: relative;
width: 420px;
height: 420px;
padding: 10px;
background-color: #4682B4;
transform: scale(1.44);
transform-origin: 0 0;
}
#dials{
position: absolute;
top: 40px;
left: 50%;
width: 1px;
height: 180px;
transform-origin: bottom center;
}
#cutline{
background-color: white;
width: 1px;
height: 20px;
opacity: 0.5;
transition:1s;
}
#cutline.one {
opacity:1;
transition:0s;
}
#img{
position: absolute;
top: 15px;
left: 20px;
width: 600px;
}
#circle{
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
border: 1px solid white;
}
#dot{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
margin: -10px;
left: 50%;
top: 50%;
border: 5px solid white;
background: #4682B4;
z-index: 1001;
}
#mline, #hline{
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 1px);
width: 2px;
height: 140px;
background-color: white;
transform-origin: top center;
transform: rotate(180deg);
}
#hline{
height: 70px;
opacity: 0.6;
}
#tringle{
width: 0;
height: 0;
position: absolute;
top: 100%;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
}
/*.shadow{
height: 20px;
width: 50px;
position: absolute;
bottom: -40%;
left: calc(50% - 25px);
transform-origin: top center;
transform: rotate(180deg);
background: red;
}*/
#tringleM{
width: 20px;
height: 140px;
position: absolute;
top: 50%;
left: calc(50% - 10px);
transform-origin: top center;
transform: rotate(180deg);
transition: all 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<div id="container"></div>
<img id="img" src="https://i.stack.imgur.com/t7EkM.png">