原生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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
js 函数调用模式小结
Dec 26 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue.js中created方法作用
Mar 30 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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绘图技术
2013/07/03 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
给ECShop添加最新评论
2015/01/07 PHP
php显示时间常用方法小结
2015/06/05 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
用matplotlib画等高线图详解
2017/12/14 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python中求对数方法总结
2020/03/10 Python
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
《天安门广场》教学反思
2014/04/23 职场文书
公路绿化方案
2014/05/12 职场文书
军训拉歌口号
2014/06/13 职场文书
商务经理岗位职责
2014/08/03 职场文书
党性观念心得体会
2014/09/03 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
解决numpy和torch数据类型转化的问题
2021/05/23 Python