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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
JS array数组检测方式解析
May 19 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处理postfix邮件内容的方法
2015/06/16 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
详解python 发送邮件实例代码
2016/12/22 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
用python批量下载apk
2020/12/29 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
《雷雨》教学反思
2014/02/20 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
化学专业毕业生求职信
2014/07/28 职场文书