html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟-阿里云开发者社区

html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟

2022-11-07 329

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用前端三件套实现一个实时跟新的时钟，其中包括电子时钟和刻度时钟

⏰题目要求

⏰html代码

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>简洁的圆形时钟js代码</title><linkrel="stylesheet"href="css/style.css"type="text/css"/></head><body><divclass="container"><divclass="clock"><divid="date"class="date box"></div><divclass="clock-face"><divclass="marker twelve"></div><divclass="marker three"></div><divclass="marker six"></div><divclass="marker nine"></div><divid="minute-hand"class="hand minute-hand"></div><divid="hour-hand"class="hand hour-hand"></div><divid="second-hand"class="hand second-hand"></div><divid="centre"class="centre"></div><divid="digital-time"class="digital-time box"></div></div></div></div><scriptsrc="js/script.js"></script></body></html>

⏰css代码

* {
transition: color.4s, background.4s, border.4s;
transition-timing-function: ease-in;
}
body {
background: #F9FBE7;
}
body.dark {
background: #223;
}
.container {
display: flex;
height: 100vh;
}
.clock {
position: relative;
margin: auto;
width: 220px;
height: 260px;
}
.box {
color: #7986CB;
background: #EDE7F6;
font-size: 20px;
text-align: center;
font-family: Lato, sans-serif;
border: 2pxsolid#D1C4E9;
border-radius: 4px;
}
.dark.box {
color: #90CAF9;
background: #4527A0;
border: 2pxsolid#673AB7;
}
.date {
width: 160px;
padding: 5px8px;
position: absolute;
top: -65px;
left: 15px;
}
.clock-face {
position: absolute;
height: 220px;
width: 220px;
background: #EDE7F6;
border-radius: 50%;
border: 4pxsolid#D1C4E9;
}
.dark.clock-face {
background: #4527A0;
border: 4pxsolid#673AB7;
}
.marker {
position: absolute;
width: 10px;
height: 10px;
background: #7986CB;
border-radius: 50%;
}
.dark.marker {
background: #90CAF9;
}
.twelve {
left: 105px;
top: 8px;
}
.three {
right: 8px;
top: 105px;
}
.six {
left: 105px;
bottom: 8px;
}
.nine {
left: 8px;
top: 105px;
}
.hand {
position: absolute;
left: 110px;
transform-origin: 0%;
border-radius: 050%50%0;
}
.hour-hand {
height: 8px;
width: 62px;
top: 107px;
background: #F06292;
}
.dark.hour-hand {
background: #E91E63;
}
.minute-hand {
height: 6px;
width: 88px;
top: 108px; 
background: #FF8A65;
}
.dark.minute-hand {
background: #FF9800;
}
.second-hand {
height: 3px;
width: 98px;
top: 109px; 
background: #777;
}
.dark.second-hand {
background: #eee}
.centre {
position: absolute;
width: 16px;
height: 16px;
background: #777;
border-radius: 50%;
top: 102px;
left: 102px;
}
.dark.centre {
background: #eee}
.digital-time {
width: 90px;
padding: 5px8px;
position: absolute;
top: 250px;
left: 55px;
}
.dark.digital-time {
color: #90CAF9;
background: #4527A0;
border: 2pxsolid#673AB7;
}
.switch-label {
color: #7986CB;
padding-right: 6px;
line-height: 1.6em;
font-family: Lato, sans-serif;
font-size: 0.9em;
}
.dark.switch-label {
color: #90CAF9;
}
/* The switch - the box around the slider */.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
/* Hide default HTML checkbox */.switchinput {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #aaa;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #fff;
transition: .4s;
}
input:checked + .slider {
background-color: #90CAF9;
}
input:focus + .slider {
box-shadow: 001px#2196F3;
}
input:checked + .slider:before {
transform: translateX(20px);
}
/* Rounded sliders */.slider.round {
border-radius: 8px;
}
.slider.round:before {
border-radius: 5px;
}

⏰js代码

//(1)声明一个7个长度的数组daysvardays=[];
days[0]='星期日';
days[1]='星期一';
days[2]='星期二';
days[3]='星期三';
days[4]='星期四';
days[5]='星期五';
//(2)往数组days后面添加一个元素，值为星期六;days[6]='星期六';
vardateDisplay=document.getElementById('date');
varhourHand=document.getElementById('hour-hand');
varminuteHand=document.getElementById('minute-hand');
varsecondHand=document.getElementById('second-hand');
vardigitalTime=document.getElementById('digital-time');
varclock=function() {  
//(3)获取当前时间vartimeNow=newDate(); 
varday=timeNow.getDay();
vardate=timeNow.getDate();
varmonth=timeNow.getMonth();
dateDisplay.innerHTML=days[day];
//(4)获取当前时间的秒varseconds=timeNow.getSeconds() ;
varsRot=seconds*6-90;
//(5)获取当前时间的分钟varminutes=timeNow.getMinutes();
varmRot= (minutes*6) + (seconds/10) -90;
//(6)获取当前时间的小时varhours=timeNow.getHours();
varhRot= (hours%12*30) + (minutes/2) -90;
hourHand.style.transform="rotate("+hRot+"deg)";
minuteHand.style.transform="rotate("+mRot+"deg)";
secondHand.style.transform="rotate("+sRot+"deg)";
//(7)给digitalTime的内容赋值digitalTime.innerHTML=format(hours)+":"+format(minutes)+":"+format(seconds);
}
functionformat(num) {
//(8)三元运算符，如果小于10则在num前面加个0，否则返回numreturnnum=num<10?'0'+num:num;
}
(functionrun() {
//(9)调用clock方法clock();
//(10)(11)(12)定义定时器1秒后执行调用自己setTimeout(function(){ run();}, 1000);
})();

⏰代码分析

本题的考核是js代码的补充，其中考核重点是日期对象。

首先js中的日期对象需要使用new Date()实例化对象才能使用

Date对象的常用get方法

时钟需要获取到小时、分钟、秒

所以需要用到getHours()、getMinutes()、getSeconds()来获取

❗PS:

虽然指针时钟不是本题的考核，但也是一个重点

指针的移动是通过transform属性来设置旋转角度

其次就是指针移动的算法

秒：var sRot = seconds * 6 - 90;

分：var mRot = (minutes * 6) + (seconds / 10) - 90;

时：var hRot = (hours % 12 * 30) + (minutes / 2) - 90;

最后计时器不能忘记设置和调用

1000毫秒=1秒

⏰实现效果