JavaScript制作的时钟

分享一个自己制作的时钟。算是低级版的吧，秒钟分钟时钟都是可以获取到时间，根据时间来动的。是动态的。
效果图如下：

制作之前肯定要先把钟的各个部件画出来，然后加上样式，最后再写上代码。钟面加上背景图会更好看哦！
秒钟的js代码比较好写，就把360度分成60份，每秒动一个6度角即可。
分钟就变成分的时间加上秒的时间，再每分钟动6度角即可。
时钟就变成时的时间加上分的时间，再每小时动30度角即可。
话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时钟</title><style>#box{width: 200px;height: 400px;margin: 50px auto;text-align: center;position: relative;}.round{width: 200px;height: 200px;border: 1px solid #000;border-radius: 50%;background-image: url("image/3.jpg");background-size: 210px 210px;background-position: -5px -5px;}.min{width: 3px;height: 80px;background-color: rgb(223, 241, 56);position: absolute;left: 100px;top: 20px;border-radius: 50% 50% 10% 10%;transform-origin: bottom;z-index: 97;}.second{width: 4px;height: 60px;background-color: rgb(77, 228, 31);position: absolute;left: 100px;top: 40px;border-radius: 50% 50% 10% 10%;transform-origin: bottom;transform: rotateZ(0deg);z-index: 98;}.clock{width: 6px;height: 40px;background-color: rgb(250, 9, 238);position: absolute;left: 100px;top: 60px;border-radius: 50% 50% 10% 10%;transform-origin: bottom;z-index: 99;}.one{position: absolute;left: 135px;top: 25px;}.two{position: absolute;left: 165px;top: 50px;}.three{position: absolute;left: 180px;top: 90px;}.four{position: absolute;left: 165px;top: 130px;}.five{position: absolute;left: 135px;top: 160px;}.six{position: absolute;left: 96px;top: 170px;}.seven{position: absolute;left: 55px;top: 160px;}.eight{position: absolute;left: 30px;top: 130px;}.nine{position: absolute;left: 10px;top: 90px;}.ten{position: absolute;left: 25px;top: 50px;}.eleven{position: absolute;left: 50px;top: 20px;}.twelve{position: absolute;left: 90px;top: 10px;}#point{width: 200px;height: 50px;margin: 20px auto;background-color: rgba(175, 250, 246, 0.781);text-align: center;line-height: 50px;}</style>
</head>
<body><div id="box"><div class="round"></div><div class="min needle"></div><div class="second needle"></div><div class="clock needle"></div><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div><div class="five">5</div><div class="six">6</div><div class="seven">7</div><div class="eight">8</div><div class="nine">9</div><div class="ten">10</div><div class="eleven">11</div><div class="twelve">12</div><div id="point"></div></div><script>let point = document.getElementById("point"),needle =document.querySelectorAll("#box .needle"),time;//开启定时器let rotamin = window.setInterval(function(){clockcompute();},1000);//获取时间function clockcompute(){time = new Date();let p_m = time.getSeconds(),p_s = time.getMinutes(),p_c = time.getHours(),time_data = time.toLocaleDateString()  +" "+ p_c + "时"+p_s+ "分"+p_m +"秒";point.innerHTML = time_data;min_needle(p_m,p_s,p_c);}//针的移动function min_needle(x,y,z){needle[0].style.transform = "rotateZ("+  x*6 +"deg)";needle[1].style.transform = "rotateZ("+  (y+x/60) *6 +"deg)";needle[2].style.transform = " rotateZ("+  (((z+y/60)%12)*30) +"deg)";}</script>
</body>
</html>

JavaScript制作的时钟相关推荐

使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)
在线演示地址:https://haiyong.site/demo/clock1.html 文章目录步骤1:创建制作此时钟的基本结构步骤2:使用 CSS 代码设计背景步骤3:使用 CSS 代码设计 ...
JavaScript制作网页时钟
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动效果图-实现网页版时钟 <!DOCTYPE html> <html lang=&quo ...
JavaScript 制作12小时进制的时钟特效
今天分享一个javaScript制作12进制时钟特效的小题. 代码如下制作12进制的时钟特效 > <!DOCTYPE html> <html> <head lan ...
如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...

JavaScript制作的时钟

JavaScript制作的时钟

JavaScript制作的时钟相关推荐

最新文章

热门文章