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 相关文章推荐
深入理解Javascript作用域与变量提升
Dec 09 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
ionic3 懒加载
Aug 16 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue项目中使用多选框的实例代码
Jul 22 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
Php注入点构造代码
2008/06/14 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript 短路法代码精简
2009/08/20 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
新手简单了解vue
2019/05/29 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python生成圆形图片的方法
2020/03/25 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python装饰器知识点补充
2018/05/28 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
EJB面试题
2015/07/28 面试题
求职信模版
2013/11/30 职场文书
自强之星事迹材料
2014/05/12 职场文书
篮球比赛口号
2014/06/10 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
解决Pytorch中关于model.eval的问题
2021/05/22 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS