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 打印内容方法小结
Nov 04 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
房屋公证委托书
2014/04/03 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
现实表现证明材料
2015/06/19 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript