js网页时钟（附素材抠图）

效果图如下：
代码

<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>电子时钟</title><style>.a{position:absolute;-webkit-transform:rotate(0deg)}</style>
</head>
<body>
<div><div class="a"><img src="../imgs/A2/时钟带字.png" height="525" width="525"/></div><div id="sTime" class="a" ><img src="../imgs/A2/秒针.png" height="525" width="525"/></div><div id="mTime" class="a" ><img src="../imgs/A2/分针.png" height="525" width="525"/></div><div id="hTime" class="a" ><img src="../imgs/A2/时针.png" height="525" width="525"/></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><button onclick="start()">开始</button><button onclick="over()">停止</button>
</div></body>
<script>let isStart=falselet sTime = document.getElementById("sTime");let mTime = document.getElementById("mTime");let hTime = document.getElementById("hTime");let sTimes=0let mTimes=0function start() {if (isStart==false){s1=setInterval(sTimeRunner,1000)isStart=true}}function over() {if (isStart==true){clearInterval(s1)isStart=false}}function sTimeRunner(){sTime.style.webkitTransform += "rotate(6deg)";sTimes++mTimeRunner()if (sTimes==60){sTimes=0}}function mTimeRunner(){mTime.style.webkitTransform += "rotate(0.1deg)"; //1smTimes++if (mTimes%12==0){hTimeRunner()if (mTimes==3600){sTimes=0}}}function hTimeRunner(){hTime.style.webkitTransform += "rotate(0.1deg)";}function getBack() {sTime.style.webkitTransform= "rotate(0deg)";mTime.style.webkitTransform= "rotate(0deg)";hTime.style.webkitTransform= "rotate(0deg)";}
</script>
</html>

原理：
利用调整div webkitTransform属性，按每秒一次的频率，不断改变其倾斜角度，每当秒针倾斜到一定角度，分针也进行符合分秒进制的倾斜，时针同理

透明背景免抠素材如下：

js网页时钟（附素材抠图）相关推荐

HTML网页时钟设计（js实现）
一.简述: 如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载. 二.源码下载: https://download.csdn.net/download/m0_45329584/1 ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
js实现简单的网页时钟
<!DOCTYPE html> <html><head><meta charset="{CHARSET}"><title> ...
【精选】JavaScript网页时钟
文章目录前言一.效果展示一.使用的技术二.日期对象 1.指定时间 2.获取目前时间三.源代码总结前言今天带大家使用JavaScript定制一款网页时钟一.效果展示一.使用的技术主 ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
【博主推荐】HTML制作一个美观的个人简介网页（附源码）
文章目录 HTML制作一个美观的个人简介网页模块1(个人信息)示例图模块2(基本资料)示例图模块3(项目经验)示例图模块4(专业技能)示例图模块5(工作经历)示例图模块6(自我评价)示例图 ...
35款让你爱不释手的网页元素PSD素材
网页元素是构成一个网页的基本元素,包括按钮.表单.文本框.进度条等.这里收集了30款让你爱不释手的网页元素PSD素材. 1.国外个性网页模板UI设计PSD素材下载地址>>> 2.带 ...
【JavaScript】编写一个炫彩的网页时钟
利用了Canvas制作的,可以转呀. 示意图如下: <!DOCTYPE html> <html> <head><meta http-equiv = " ...
js网页文件资源加载器
功能:依次加载资源文件范围:适用于所有js网页 //资源加载var arr = ['img/pic_1.png', 'img/pic_2.png', 'img/pic_3.png'];functio ...

js网页时钟（附素材抠图）

js网页时钟（附素材抠图）相关推荐

最新文章

热门文章