JS实现简易刻度时钟示例代码


Posted in Javascript onMarch 11, 2017

如图所示,利用JS实现简易的刻度时钟;

JS实现简易刻度时钟示例代码

原理如下:利用60等份的li进行布局,li两两之间的间隔为6deg,把基点定在圆心上,使得li圆形分布。然后另外设置三条针线的样式的位置,基点同样定在圆心上,然后秒针每秒动6deg,分针每秒动1/60deg,时针每秒动1/3600deg。

布局代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" id="sty">
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      #wrap{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 50%;
        margin: 20px auto;
        position: relative;
      }
      #wrap ul{
        position: relative;
      }
      #wrap ul li{
        width: 2px;
        height: 6px;
        background: #000;
        position: absolute;
        left: 99px;
        top: 0;
        -moz-transform-origin: center 100px;
      }
      #wrap ul li:nth-child(5n){
        height: 10px;
      }
      #con{
        width: 10px;
        height: 10px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        left: 95px;
        top: 95px;
      }
      #hour{
        width: 5px;
        height: 70px;
        background: red;
        border-radius: 50%;
        position: absolute;
        left: 98px;
        top: 35px;
        -moz-transform-origin: center 65px;
      }
      #min{
        width: 3px;
        height: 85px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        left: 98.5px;
        top: 20px;
        -moz-transform-origin: center 80px;
      }
      #sec{
        width: 2px;
        height: 100px;
        background: gray;
        border-radius: 50%;
        position: absolute;
        left: 98.5px;
        top: 20px;
        -moz-transform-origin: center 80px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <ul id="list">

      </ul>
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="con"></div>
    </div>
  </body>
</html>

布局代码里需要注意的是:每隔四个刻度就有一个刻度比较长,所以我们在设置样式的时候要特别注意加上:#wrap ul li:nth-child(5n){height: 10px;}。第5n个的长度变长。

JS代码中主要搞清楚三针之间的度数关系就好做了,代码如下:

<script type="text/javascript">
  window.onload=function(){
    var oWrap=document.getElementById('wrap');
    var oList=document.getElementById('list');
    var oSty=document.getElementById('sty');

    var tump='';

    for(var i=0;i<60;i++){
      var aLi=document.createElement('li');
      oList.appendChild(aLi);

      tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}';
      oSty.innerHTML+=tump;
    }

    var oSec=document.getElementById('sec');
    var oMin=document.getElementById('min');
    var oHour=document.getElementById('hour');
    function time(){
      var date=new Date();
      var s=date.getSeconds();
      var m=date.getMinutes()+(s/60);
      var h=date.getHours()+(m/60);

      oSec.style.transform='rotate('+s*6+'deg)';
      oMin.style.transform='rotate('+m*6+'deg)';
      oHour.style.transform='rotate('+h*30+'deg)';
    }
    time();

    setInterval(time,1000);
  }
</script>

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

Javascript 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
3种vue组件的书写形式
Nov 29 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
js鼠标跟随运动效果
Mar 11 #Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
基于Node.js的WebSocket通信实现
Mar 11 #Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php二维码生成
2015/10/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
详解axios在node.js中的post使用
2017/04/27 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
几个人围成一圈的问题
2013/09/26 面试题
社区十八大感言
2014/01/19 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技