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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
JS实现纸牌发牌动画
Jan 19 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
php中session退出登陆问题
2014/02/27 PHP
php实现上传图片文件代码
2015/07/19 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
Yii框架安装简明教程
2020/05/15 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
解析Python中的异常处理
2015/04/28 Python
MySQL最常见的操作语句小结
2015/05/07 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python 获取项目根路径的代码
2019/09/27 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python文字转语音实现过程解析
2019/11/12 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
大学生村官事迹材料
2014/01/21 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
爱心募捐通知范文
2015/04/27 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android