利用jquery制作一个简单的电子时钟
星期栏
active表示今天的日期 ，假设今天是SUNDAY
<!--星期-->
<div class="weekdays">
<span class="active">SUN</span>
<span>MON</span>
<span>TUE</span>
<span>WED</span>
<span>THU</span>
<span>FRI</span>
<span>SAT</span>
</div>
引入css样式
#clock .weekdays{
font-size:12px;
position:absolute;
width:100%;
top:10px;
left:0;
text-align:center;
}
#clock .weekdays span{
opacity:0.2;
padding:0 10px;
}
#clock .weekdays span.active{
opacity:1;
}
效果如下图所示
时间栏
class=one表示当前时间的数字 假设当前时间为 12:34:56
<!--数字时间-->
<div class="digits">
<!--时间的第一位-->
<div class="one">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<!--第二位-->
<div class="two">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<!--时间分隔符 :-->
<div class="dots"></div>
<!--第三位-->
<div class="three">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<!--第四位-->
<div class="four">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<!--:-->
<div class="dots"></div>
<!--第五位-->
<div class="five">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<!--第六位-->
<div class="six">
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
</div>
引入css样式
#clock .digits div{
text-align:left;
position:relative;
width: 28px;
height:50px;
display:inline-block;
margin:0 4px;
}
#clock .digits div span{
opacity:0;
position:absolute;
-webkit-transition:0.25s;
-moz-transition:0.25s;
transition:0.25s;
}
#clock .digits div span:before,
#clock .digits div span:after{
content:'';
position:absolute;
width:0;
height:0;
border:5px solid transparent;
}
#clock .digits .d1{ height:5px;width:16px;top:0;left:6px;}
#clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d2{ height:5px;width:16px;top:24px;left:6px;}
#clock .digits .d2:before{ border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{ border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}
#clock .digits .d3{ height:5px;width:16px;top:48px;left:6px;}
#clock .digits .d3:before{ border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{ border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d4{ width:5px;height:14px;top:7px;left:0;}
#clock .digits .d4:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d5{ width:5px;height:14px;top:7px;right:0;}
#clock .digits .d5:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
#clock .digits .d6{ width:5px;height:14px;top:32px;left:0;}
#clock .digits .d6:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d7{ width:5px;height:14px;top:32px;right:0;}
#clock .digits .d7:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
/* 1 */
#clock .digits div.one .d5,
#clock .digits div.one .d7{
opacity:1;
}
/* 2 */
#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
opacity:1;
}
/* 3 */
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
opacity:1;
}
/* 4 */
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
opacity:1;
}
/* 5 */
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
opacity:1;
}
/* 6 */
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
opacity:1;
}
/* 7 */
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
opacity:1;
}
/* 8 */
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
opacity:1;
}
/* 9 */
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
opacity:1;
}
/* 0 */
#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
opacity:1;
}
/* The dots */
#clock .digits div.dots{
width:5px;
}
#clock .digits div.dots:before,
#clock .digits div.dots:after{
width:5px;
height:5px;
content:'';
position:absolute;
left:0;
top:14px;
}
#clock .digits div.dots:after{
top:34px;
}
效果如下
jquery部分
因为此时仅仅是静态时间，所以需要jquery让时间走起来,moment().format("HHmmssd")获取当前时间，利用S().attr给时间重置class
removeclass和addclass给日期添加class.
<script>
$(function () {
var time = 'zero one two three four five six seven eight nine'.split(' ');
(function updatetime() {
//获取时间
//HH:00到23 mm:00到59 ss:01到59 d: 0到6，0表示周日，6表示周六
var now = moment().format("HHmmssd");
//分别给时分秒重置class
$("#h1").attr("class",time[now[0]]);
$("#h2").attr("class",time[now[1]]);
$("#m1").attr("class",time[now[2]]);
$("#m2").attr("class",time[now[3]]);
$("#s1").attr("class",time[now[4]]);
$("#s2").attr("class",time[now[5]]);
//得到星期
var day = now[6];
//给星期重置class
$(".weekdays span").removeClass("active").eq(day).addClass("active");
//每一秒更新一次时间
setTimeout(updatetime, 1000);
})();
});
</script>
效果
