原生JS实现的简单小钟表功能示例


Posted in Javascript onAugust 30, 2018

本文实例讲述了原生JS实现的简单小钟表功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

原生JS实现的简单小钟表功能示例

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com 钟表</title>
    <style type="text/css">
      body {
       background-color:#00A2D4;
      }
      .clock {
        width: 200px;
        height: 200px;
        background: -webkit-radial-gradient(#3b3b3b, #000);
        background: radial-gradient(#2E3F50, #0E1B29);
        box-shadow: inset 0px 0px 30px #131313, 0px 2px 18px rgba(0,0,0,0.5);
        border: 6px solid #172839;
        border-radius: 106px;
        margin: auto;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
      }
      .hour-hand {
        width: 4px;
        height: 55px;
        background: #fff;
        box-shadow: 0px 0px 7px #000;
        position: absolute;
        top: 45px;
        left: 98px;
      }
      .minute-hand {
        width: 4px;
        height: 80px;
        background: #fff;
        box-shadow: 0px 0px 4px #000;
        position: absolute;
        top: 20px;
        left: 98px;
      }
      .second-hand {
        width: 2px;
        height: 80px;
        background: #bbb;
        box-shadow: 0px 0px 7px #000;
        position: absolute;
        top: 20px;
        left: 99px;
      }
      .pin {
        width: 10px;
        height: 10px;
        background: #222;
        border-radius: 10px;
        margin: auto;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
      }
      .hour-hand,
      .minute-hand,
      .second-hand {
        -webkit-transform-origin: 50% 100%;
        -moz-transform-origin: 50% 100%;
        -o-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
      }
      .circle{
        width:20px;
        height:20px;
        line-height:20px;
        text-align:center;
        color:#fff;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="minute-hand"></div>
      <div class="hour-hand"></div>
      <div class="second-hand"></div>
      <div class="pin"></div>
      <div class="circle">6</div>
      <div class="circle">5</div>
      <div class="circle">4</div>
      <div class="circle">3</div>
      <div class="circle">2</div>
      <div class="circle">1</div>
      <div class="circle">12</div>
      <div class="circle">11</div>
      <div class="circle">10</div>
      <div class="circle">9</div>
      <div class="circle">8</div>
      <div class="circle">7</div>
    </div>
    <div class="time"></div>
    <script type="text/javascript">
      window.onload=function(){
        setInterval(function(){
          var dt = new Date();
          var sec_deg = dt.getSeconds() * (360/60);
          var min_deg = dt.getMinutes() * (360/60);
          var hr_deg = dt.getHours() * (360/12) + dt.getMinutes() * (360/60/12);
          document.querySelector(".clock .second-hand").style.cssText='-webkit-transform:rotate(' + sec_deg + 'deg)','-moz-transform:rotate(' + sec_deg + 'deg)', '-o-transform:rotate(' + sec_deg + 'deg)', '-ms-transform:rotate(' + sec_deg + 'deg)', 'transform:rotate(' + sec_deg + 'deg)';
          document.querySelector('.clock .minute-hand').style.cssText='-webkit-transform:rotate(' + min_deg + 'deg)', '-moz-transform:rotate(' + min_deg + 'deg)', '-o-transform:rotate(' + min_deg + 'deg)', '-ms-transform:rotate(' + min_deg + 'deg)', 'transform:rotate(' + min_deg + 'deg)';
          document.querySelector('.clock .hour-hand').style.cssText='-webkit-transform:rotate(' + hr_deg + 'deg)', '-moz-transform:rotate(' + hr_deg + 'deg)', '-o-transform:rotate(' + hr_deg + 'deg)', '-ms-transform:rotate(' + hr_deg + 'deg)', 'transform:rotate(' + hr_deg + 'deg)';
         }, 1000);
        var dx=90,
          dy=90,
          s=87,//半径
          x=Math.sin(0),
          y=Math.cos(0),
          dig=2*Math.PI/12;
        var circle=document.querySelectorAll(".circle");
        for(var i=0;i<12;i++){
          var x=Math.sin(i*dig);
          var y=Math.cos(i*dig);
          var topValue=Number(dy+y*s),
            leftValue=Number(dx+x*s);
          circle[i].style.top=topValue+"px";
          circle[i].style.left=leftValue+"px";
        }
      }
    </script>
  </body>
</html>

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 #Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
You might like
2.PHP入门
2006/10/09 PHP
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
javascript 写类方式之三
2009/07/05 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python logging模块学习笔记
2014/05/24 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python占位符输入方式实例
2019/05/27 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python的range和linspace使用详解
2019/11/27 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
应聘教师推荐信
2013/10/31 职场文书
信息部岗位职责
2013/11/12 职场文书
大学活动邀请函
2014/01/28 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技