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 相关文章推荐
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
咖啡的化学
2021/03/03 咖啡文化
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
vue中使用cropperjs的方法
2018/03/01 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Python文件和目录操作详解
2015/02/08 Python
Python sys.argv用法实例
2015/05/28 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
大学同学聚会邀请函
2014/01/29 职场文书
化工操作工岗位职责
2014/04/29 职场文书
房屋产权证明书
2014/10/15 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电