<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
/* background-color:red; */
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
/* background-color:green; */
/* opacity:0.6; */
text-align:center;
}
/* 选择timediv下div，一个数组，后代选择器，父亲下儿子们这一代，不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 选择timediv下的div，第三个div和第六个div */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
/* background-color:blue; */
/* opacity:0.6; */
text-align:center;
}
.datediv>div{
display:inline-block;
transform:skewX(-10deg);
font-size:50px;
vertical-align:middle;
color:white;
}
.datenum{
width:39px;
height:73px;
background:url("./imgs/countdown8.png") -27px -2px no-repeat;
background-size:241% 118%;
}
</style>
<script src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// });
// 文档准备好以后的操作
$(function(){
});
// 一次修改两张图片
function change2img(timeVal,className,idx0,idx1){
var val0 = timeVal % 10;
var val1 = Math.floor(timeVal / 10);
// 设置个位的图片
$(className).eq(idx0).css({
"background-image":'url("./imgs/countdown'+val0+'.png")'
});
// 设置十位的图片
$(className).eq(idx1).css({
"background-image":'url("./imgs/countdown'+val1+'.png")'
});
}
// 每秒钟数据的变化
function change(){
// 拿到当前时间
var now = new Date();
// 秒、分、小时、月份、几号
change2img(now.getSeconds(),".timenum",5,4);
change2img(now.getMinutes(),".timenum",3,2);
change2img(now.getHours(),".timenum",1,0);
change2img(now.getMonth()+1,".datenum",5,4);
change2img(now.getDate(),".datenum",7,6);
// 星期
var day0 = now.getDay(); // 1-6 0=日
if(day0 == 0){
day0 = 7;
}
// 设置个位的图片
$(".datenum").eq(8).css({
"background-image":'url("./imgs/countdown'+day0+'.png")'
});
// 年份
var year = now.getFullYear();
var year0 = year % 10;
var year1 = Math.floor((year / 10) % 10); //2019/10=201.9 向下取整201 201%10=1
var year2 = Math.floor((year / 100) % 10);
var year3 = Math.floor(year / 1000);
// 设置个位的图片
$(".datenum").eq(3).css({
"background-image":'url("./imgs/countdown'+year0+'.png")'
});
$(".datenum").eq(2).css({
"background-image":'url("./imgs/countdown'+year1+'.png")'
});
$(".datenum").eq(1).css({
"background-image":'url("./imgs/countdown'+year2+'.png")'
});
$(".datenum").eq(0).css({
"background-image":'url("./imgs/countdown'+year3+'.png")'
});
// // 拿到秒
// var second = now.getSeconds();
// var sec0 = second % 10; // 123456 % 10 = 6
// var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整，取比较小的数字。
// // 设置秒的图片
// $(".timenum").eq(5).css({
// "background-image":'url("./imgs/countdown'+sec0+'.png")'
// });
// $(".timenum").eq(4).css({
// "background-image":'url("./imgs/countdown'+sec1+'.png")'
// });
// // 拿到分钟
// var minute = now.getMinutes();
// var min0 = minute % 10;
// var min1 = Math.floor(minute / 10);
// // 设置分钟的图片
// $(".timenum").eq(3).css({
// "background-image":'url("./imgs/countdown'+min0+'.png")'
// });
// $(".timenum").eq(2).css({
// "background-image":'url("./imgs/countdown'+min1+'.png")'
// });
// // 拿到时钟
// var hour = now.getHours();
// var hour0 = hour % 10;
// var hour1 = Math.floor(hour / 10);
// // 设置时钟的图片
// $(".timenum").eq(1).css({
// "background-image":'url("./imgs/countdown'+hour0+'.png")'
// });
// $(".timenum").eq(0).css({
// "background-image":'url("./imgs/countdown'+hour1+'.png")'
// });
}
setInterval("change()",1000);
</script>
</head>
<body>
<div class="ledback">
<!-- 占位DIV -->
<div class="top1"></div>
<!-- 时分秒布局 -->
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<!-- XXXX年XX月XX日星期X布局 -->
<div class="datediv">
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">年</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">月</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">日</div>
<div class="">星期</div>
<div class="datenum"></div>
</div>
</div>
</body>
</html>
