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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
js实现开启密码大写提示
Dec 21 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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数据库密码的找回的步骤
2011/01/12 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Python验证企业工商注册码
2015/10/25 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python3列表List入门知识附实例
2020/02/09 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
财务支持类个人的自我评价
2014/02/14 职场文书
手机银行营销方案
2014/03/14 职场文书
离婚协议书范文2015
2015/01/26 职场文书
导游词之张家界
2019/10/31 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB