原生js代码编写钟表

利用js中的定时器编写；
直接上代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表</title><style type="text/css">* {margin: 0;padding: 0;}div {width: 600px;height: 600px;}#clock {background: url(images/clock.jpg) no-repeat center center;position: absolute;z-index: 1;}#h {background: url(images/hour.png) no-repeat center center;position: absolute;z-index: 2}#m {background: url(images/minute.png) no-repeat center center;position: absolute;z-index: 3;}#s {background: url(images/second.png) no-repeat center center;position: absolute;z-index: 4;}</style>
</head><body><div id="clock"><div id="h"></div><div id="m"></div><div id="s"></div></div><script type="text/javascript">window.onload = function () {var oh = document.getElementById("h");var om = document.getElementById("m");var os = document.getElementById("s");function go() {var time = new Date();var H = time.getHours() + time.getMinutes() / 60;var Mi = time.getMinutes();var S = time.getSeconds() + time.getMilliseconds() / 1000;os.style.transform = 'rotate(' + S * 6 + 'deg)';om.style.transform = 'rotate(' + Mi * 6 + 'deg)';oh.style.transform = 'rotate(' + H * 30 + 'deg)';//document.write("当前时间:"+H+":"+Mi+":"+S);}go();setInterval(go, 1000);}</script>
</body></html>

效果图：

为了方便测试，我把图中的几个图片也上传，并且去除水印。
表盘背景图：

时针图片：

分针图片：

秒针图片：

谢谢查阅！

原生js代码编写钟表相关推荐

使用JS代码编写动画效果
使用JS代码编写动画效果下面展示一些 JS代码. 创建一个可以简单移动的动画函数//obj 要执行动画的对象// attr 想要变化的方向或大小如width top left//target 目标 ...
vue如何写原生js_纯技巧向：React, Vue, Rxjs 和原生 JS 代码大乱斗
前言这是一篇纯技巧向的文章,跟一年多之前的<揭秘Vue-3.0最具潜力的API>一样[0],更少的背景铺垫,更多的代码,更多的 demo,更快的节奏. 让我们直接进入主题. 背景前一阵 ...
html制作日历备忘录,原生JS代码制作带记事备忘功能的双月份显示效果的日历
原生JS写的日历月历 - demo by js.alixixi.com window.onload = function(){ function $(id){return typeof id === ...
ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
原生js代码实现图片放大境效果
hello 大家好! 这是我的第一篇博客文章,感谢大家前来阅读,希望我们都能在这个平台上相互交流.共同进步.查漏补缺. 今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实 ...
原生JS代码100例
1.原生JavaScript实现字符串长度截取function cutstr(str, len) {var temp;var icount = 0;var patrn = /[^\x00-\xff]/ ...
14条最佳JS代码编写技巧
1. 总是使用 var 在javascript中,变量不是全局范围的就是函数范围的,使用var关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量, ...
java代码鸟飞_180行原生js代码实现简易版飞行的小鸟游戏
/**原理简单,(简单碰撞判断,定时器运用)复制代码直接运行即可,如果没有声音文件,则去除几处调用游戏声效的代码即可**/ *{ margin: 0; padding: 0; list-style: ...
用原生js代码实现虚拟滚动条
效果图直接上代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

原生js代码编写钟表

原生js代码编写钟表

原生js代码编写钟表相关推荐

最新文章

热门文章