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中&quot;/&quot;运算符常见错误
Oct 13 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
我的论坛源代码(十)
2006/10/09 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python区分不同数据类型的方法
2019/10/14 Python
python sorted方法和列表使用解析
2019/11/18 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
yy生日主持词
2014/03/20 职场文书
安全教育月活动总结
2014/05/05 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
实习介绍信范文
2015/05/05 职场文书
大队委员竞选稿
2015/11/20 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
nginx lua 操作 mysql
2022/05/15 Servers