原生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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
js实现星星海特效的示例
Sep 28 Javascript
JS实现九宫格拼图游戏
Jun 28 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
坏狼php学习 计数器实例代码
2008/06/15 PHP
php数组去除空值函数分享
2015/02/02 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python re模块介绍
2014/11/30 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python中str.format()详解
2017/03/12 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
保密工作责任书
2014/04/16 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
JavaScript实现显示和隐藏图片
2021/04/29 Javascript