JavaScript实现时间表动态效果

本文实例为大家分享了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>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于JS实现限时抢购倒计时间表代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>限时抢购倒计时间表</title> <style type="text/css"> *{margin:0;padding:0;} #cont

  • JavaScript实现时间表动态效果

    JavaScript实现时间表动态效果

    本文实例为大家分享了js实现时间表动态效果的具体代码,供大家参考,具体内容如下 这里用到的是Date时间类 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期类 时间表</title> </head> <style> #box{ background:url(img/1.jpg) no-repeat; width: 6

  • JavaScript实现向setTimeout执行代码传递参数的方法

    本文实例讲述了JavaScript实现向setTimeout执行代码传递参数的方法.分享给大家供大家参考.具体分析如下: setTimeout函数是javascript中实现动态效果最关键的函数.但昨天在写代码的时候发现当第一个参数是函数调用的时候,不能向被调函数传递参数.这真是个非常严重的问题,我排查了好久才发现问题,浪费了N多时间啊.. 后来上网查了查,这其实是IE的一个BUG.解决方法有很多,其中我觉得最牛的一种就是重写setTimeout函数...这个太麻烦了..这里推荐一种十分简单的方

  • jQuery使用手册之一

    jQuery使用手册之一

    翻译整理:Young.J官方网站:http://jquery.com jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)                       jQuery Downloads (http:

  • 优秀js开源框架-jQuery使用手册(1)

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:http://jquery.com 下载完成后先加载到文档中,然后我们来看个简单的例子!<script language="javascript" type="text/javascript">       $(document).ready(f

  • 翻译整理的jQuery使用查询手册

    翻译整理的jQuery使用查询手册

    翻译整理:Young.J官方网站:http://jquery.com jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)                       jQuery Downloads (http:

  • vue自定义组件(通过Vue.use()来使用)即install的用法说明

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue <template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; col

  • javascript实现遮罩层动态效果实例

    javascript实现遮罩层动态效果实例

    大家在网页上注册登录的时候,经常会看见弹出的遮罩层. 我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层. 这是鼠标滚动下滑到页面中间某部分时画面.虽然界面简单颜色随意,能看出效果才是最重要的哈哈哈哈. 以下是html界面: <body> <!-- 主界面 --> <div class="main"> <div onclick="show()&q

  • JavaScript实现生成动态表格和动态效果的方法详解

    JavaScript实现生成动态表格和动态效果的方法详解

    今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">

  • 微信小程序怎么加入JavaScript脚本，做出动态效果

    目录 一.数据绑定 二.全局数据 三.事件 四.动态提示 Toast 五.对话框 Modal 这篇文章主要介绍了教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动.学会了脚本,就能做出复杂的页面了. 一.数据绑定 前面的所有示例,小程序的页面都是写死的,也就是页面内容不会变.但是,页面数据其实可以通过脚本传入,通过脚本改变页面,实现动态效果. 小程序提供了一种特别的方法,让页面可以更方便地使用脚本数据,叫做"数据绑定"(data binding). 所谓&

  • javascript实现的颜色块滑动的动态效果

    页页装载效果 #color div { width:5px; height:5px; float:left; margin:0 2px; } var v=document.getElementsByTagName('div'); var i=v.length-1; function chg_col(){ q=(i=v.length-1)?1:i+1 setTimeout("chg_col()",200) } chg_col() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

随机推荐