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 相关文章推荐
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 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实现基于文本的摩斯电码生成器
2016/01/11 PHP
两种php实现图片上传的方法
2016/01/22 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python字节单位转换实例
2019/12/05 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
公司管理建议书范文
2014/03/12 职场文书
初一学生期末评语
2014/04/24 职场文书
团日活动总结书格式
2014/05/08 职场文书
在职员工证明书
2014/09/19 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
餐馆开业致辞
2015/08/01 职场文书
运动会广播稿200字
2015/08/19 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android
python中filter,map,reduce的作用
2022/06/10 Python