JS+CSS3实现的简易钟表效果示例


Posted in Javascript onApril 13, 2019

本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com js+css3简易钟表</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #wrap{
        width: 300px;
        height: 300px;
        background-color: aliceblue;
        margin: 200px auto;
        position: relative;
        box-sizing: border-box;
      }
      #wrap > div{
        position: absolute;
        top: 50%;
        left: 50%;
      }
      #hour{
        width: 6px;
        height: 60px;
        background-color: #000000;
        margin: -60px -3px;
        transform-origin: 3px 60px;
      }
      #min{
        width: 4px;
        height: 80px;
        background-color: #000000;
        margin: -80px -2px;
        transform-origin: 2px 80px;
      }
      #sec{
        width: 2px;
        height: 100px;
        background-color: red;
        margin: -100px -1px;
        transform-origin: 1px 100px;
      }
      #point{
        width: 20px;
        height: 20px;
        background-color: burlywood;
        margin: -10px -10px;
        border-radius: 50%;
      }
      #circle{
        width: 300px;
        height: 300px;
        position: relative;
      }
      #circle li{
        list-style: none;
        width: 2px;
        height: 6px;
        background-color: #000000;
        position: absolute;
        transform-origin: 1px 150px;
        left: 149px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="point"></div>
      <ul id="circle"></ul>
    </div>
  </body>
  <script type="text/javascript">
    var hourDom=document.getElementById('hour');
    var minDom=document.getElementById('min');
    var secDom=document.getElementById('sec');
    var cricle=document.getElementById('circle');
    //创建表盘,ul宽高为wrap宽高,以wrap中心点为变换基点,动态分配6°的li
    for (var i=0;i<60;i++) {
      var li=document.createElement('li');
      cricle.appendChild(li);
      li.style.transform='rotate('+i*6+'deg)';
    }
    //延时函数,确保每一秒更新一次最新时间。并且计算时间准确值。
    setInterval(function(){
    var date=new Date();
    var hour=date.getHours();
    var min=date.getMinutes();
    var sec=date.getSeconds();
    min+=sec/60;
    hour+=min/60;
    //当前时间*每个单位时间走的角度=指针指向
    hourDom.style.transform='rotate('+hour*30+'deg)';
    minDom.style.transform='rotate('+min*6+'deg)';
    secDom.style.transform='rotate('+sec*6+'deg)';
    },1000)
  </script>
</html>

运行效果:

JS+CSS3实现的简易钟表效果示例

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

Javascript 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
javascript关于继承解析
May 10 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js里的prototype使用示例
2010/11/19 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python人脸识别初探
2017/12/21 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
详解python datetime模块
2020/08/17 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
自信主题班会
2015/08/14 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang