JavaScript实现时间表动态效果


Posted in Javascript onJuly 15, 2017

本文实例为大家分享了js实现时间表动态效果的具体代码,供大家参考,具体内容如下

这里用到的是Date时间类

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日期类 时间表</title>
 </head>
 <style>
  #box{
   background:url(img/1.jpg) no-repeat;
   width: 600px;
   height: 600px;
   margin: 0 auto;
   position: relative;
  }
  #m,#s,#h{position: absolute;top: 0px;left:50%;margin-left: -15px;}
  /*这里利用绝对定位的margin负值法来让时分秒的指针图片居中,left:设置为50% margin-left为(图片宽度的负数值)/2*/
  #h{background:url(img/2.png) no-repeat;width: 30px;height: 600px;position: absolute}
  #m{background: url(img/3.png) no-repeat;width: 30px;height: 600px;}
  #s{background: url(img/4.png) no-repeat;width: 30px;height: 600px;}
 </style>
 <script type="text/javascript">
  window.onload=function(){
   function go(){//封装函数
    var oh=document.getElementById("h");
    var om=document.getElementById("m");
    var os=document.getElementById("s");
    var time=new Date();//获取当前时间
    var s=time.getSeconds();//获取秒数
    var min=time.getMinutes();//获取分
    var hour=time.getHours();//获取小时
    os.style.transform="rotate("+s*6+"deg)";//运用transform方法可以让图片转动到指定位置 钟表上的每一个秒格的度数为360/60
    om.style.transform="rotate("+min*6+"deg)";//用获取到的时间乘以转动的度数 让图片变到指定位置
    oh.style.transform="rotate("+hour*30+"deg)";
   }
   go();
   setInterval(go,20);//设置定时器每20毫秒执行一次函数,就可以实现动态的钟表
  }
 </script>
 <body>
  <div id="box"><!--布局 box为钟表的背景图 可以在网上找一张 设置为相对定位-->
   <!--里面放三张图片 分别是时 分 秒的指针图 设置为绝对定位-->
   <div id="h"></div>
   <div id="m"></div>
   <div id="s"></div>
  </div>
 </body>
</html>

效果图

JavaScript实现时间表动态效果

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

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Vue.js快速入门教程
Sep 07 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
vue实现循环滚动列表
Jun 30 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 #Javascript
easyui简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 #Javascript
You might like
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php 获取本地IP代码
2013/06/23 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
srcElement表格样式
2006/09/03 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python多进程实现文件下载传输功能
2018/07/28 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
python数据抓取3种方法总结
2021/02/07 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
绘画专业自荐信
2014/07/04 职场文书
干部个人对照检查材料
2014/08/25 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2014年党总支工作总结
2014/12/18 职场文书
任命通知范文
2015/04/21 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers