javascript制作钟表

JAVAscript制作钟表

本文用js制作一款简单的钟表练习
代码如下
欢迎大家交流，欢迎各位大佬指正。
HTML部分

//创建钟表
<body>
<div class="box"><div class="clock" id="ck"><div id="hour"></div><div id="min"></div><div id="sec"></div></div>
</div>

CSS 代码如下

//样式我用的是雪碧图，图片在末尾。
主要就添加图片。设置样式。还有所选图片X,Y轴距离轴心的距离。<style>*{margin: 0;padding: 0;}.box{height: 500px;width: 500px;margin: 0 auto;position: relative;}//表盘.clock{width: 717px;height: 717px;background: url("./img/bgimage.png") no-repeat center ;background-position: -898px -800px;zoom: 69%;}//时针#hour{position: absolute;top: 510px;left: 520px;width: 244px;height: 17px;background: url("./img/bgimage.png")no-repeat center  ;border: 1px gray solid;background-position: -1848px -1031px;zoom: 69%;}//分针#min{position: absolute;top: 510px;left: 520px;width: 322px;height: 17px;background: url("./img/bgimage.png")no-repeat center  ;border: 1px gray solid;background-position: -1848px -1109px;zoom: 69%;}//秒针#sec{position: absolute;top: 516px;left: 520px;width: 336px;height: 6px;background: url("./img/bgimage.png")no-repeat center  ;border: 1px gray solid;background-position: -1848px -1191px;zoom: 69%;}//设置三个指针的旋转中心移动左边#hour,#min,#sec{transform-origin:left;}</style>

js代码如下

<script>
//先进行加载window.onload=function () {//获取指针元素var hour=document.getElementById("hour")var min=document.getElementById("min")var sec=document.getElementById("sec")//function run() {//获取时间对象var clocktime=new Date;//获取此时的时间var s = clocktime.getSeconds();var m = clocktime.getMinutes()+s/60;var h = clocktime.getHours()+m/60;//给指针元素赋值（计算指针旋转度数）sec.style.transform =  "rotate("+(s*6+270)+"deg)";min.style.transform = "rotate("+(m*6+270)+"deg)";hour.style.transform = "rotate("+(h*30+270)+"deg)";//设置定时器，每一秒自动一次var timer=window.setTimeout(run,1000);}//执行run();}
</script>

原图在此

javascript制作钟表相关推荐

CSS与JS结合制作钟表
CSS结合JS来制作钟表,算是比较好的熟悉CSS 与 JS 结合的艺术表达. 布局上定义一个大个div 里面套一个ul用来制作表盘的60个竖线再套四个div 分别对应时针分针秒针和中间圆点. ...
用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
JavaScript制作动画
JavaScript制作动画 <!DOCTYPE html> <html> <style> #container {width: 400px;height: 400 ...
怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
JavaScript制作的时钟
JavaScript制作的时钟分享一个自己制作的时钟.算是低级版的吧,秒钟分钟时钟都是可以获取到时间,根据时间来动的.是动态的. 效果图如下: 制作之前肯定要先把钟的各个部件画出来,然后加上样式,最 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

javascript制作钟表

javascript制作钟表相关推荐

最新文章

热门文章