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 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js实现无缝滚动特效
Dec 20 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
Servlet面试题库
2015/07/18 面试题
银行职业规划书范文
2013/12/28 职场文书
五一服装活动方案
2014/01/11 职场文书
金融事务专业求职信
2014/04/25 职场文书
安全承诺书格式
2014/05/21 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
安全学习心得体会范文
2016/01/18 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
mysql如何配置白名单访问
2021/06/30 MySQL