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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
JavaScript实现拖拽效果
Mar 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
smarty表格换行实例
2014/12/15 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
canvas时钟效果
2017/02/16 Javascript
js实现楼层导航功能
2017/02/23 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python3 求约数的实例
2019/12/05 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
艾滋病宣传活动总结
2014/05/08 职场文书
中国梦口号
2014/06/13 职场文书
售票员岗位职责
2015/02/15 职场文书
redis限流的实际应用
2021/04/24 Redis
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis