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 22 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
深入理解Python变量与常量
2016/06/02 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python实现动态数组的示例代码
2019/07/15 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python动态规划算法实例详解
2020/11/22 Python
东方电视购物:东方CJ
2016/10/12 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
关于工资低的辞职信
2014/01/14 职场文书
农民工创业典型事迹
2014/01/25 职场文书
运动会方阵解说词
2014/02/12 职场文书
服务宗旨标语
2014/07/01 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
教师节老师寄语
2015/05/28 职场文书
战马观后感
2015/06/08 职场文书
个人业务学习心得体会
2016/01/25 职场文书
高中语文教学反思范文
2016/02/16 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
关于vue中如何监听数组变化
2021/04/28 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript