原生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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
常用DOM整理
Jun 16 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
mocha的时序规则讲解
Feb 16 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
layui递归实现动态左侧菜单
Jul 26 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
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
python 数据加密代码
2008/12/24 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python将时分秒转换成秒的实例
2019/12/07 Python
pymysql的简单封装代码实例
2020/01/08 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
如何利用python读取micaps文件详解
2020/10/18 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Golang 字符串的常见操作
2022/04/19 Golang
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Python日志模块logging用法
2022/06/05 Python