JS实现网页时钟特效


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了JS实现网页时钟特效的具体代码,供大家参考,具体内容如下

JS实现网页时钟特效

主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #box {
  width: 600px;
  height: 600px;
  /*border: 1px solid #000;*/
  background: url("img/bg.png") no-repeat;
  background-size: cover;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
 
 }
 #h{
  width:100%;
  height:100%;
  background: url("img/h.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #m{
  width:100%;
  height:100%;
  background: url("img/m.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #s{
  width:100%;
  height:100%;
  background: url("img/s.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="h"></div>
 <div id="m"></div>
 <div id="s"></div>
 </div>
 
 <script>
 window.onload = function(){
  // 1:找到三个元素标签
  var h = document.getElementById("h"); //时
  var m = document.getElementById("m"); //分
  var s = document.getElementById("s"); //秒
 
  setInterval(function(){
  var date = new Date();
  var HH = (date.getHours()%12);
  var MM = date.getMinutes();
  var SS = date.getSeconds();
  h.style.transform = "rotate("+(HH*30)+"deg)";
  m.style.transform = "rotate("+(MM*6)+"deg)";
  s.style.transform = "rotate("+(SS*6)+"deg)";
  },1000)
 }
 </script>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
js实现小时钟效果
Mar 25 #Javascript
vue页面更新patch的实现示例
Mar 25 #Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 #Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 #Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 #Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
You might like
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP类的特性实例分析
2016/09/28 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
用python与文件进行交互的方法
2018/03/01 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
教学个人的自我评价分享
2014/02/16 职场文书
《将心比心》教学反思
2014/04/08 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
党员个人公开承诺书
2014/08/29 职场文书
创新社会管理心得体会
2014/09/12 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
oracle索引总结
2021/09/25 Oracle
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python