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创建命名空间(namespace)的最简实现
Dec 11 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
简单实现js轮播图效果
Jul 14 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 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配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
js 数组操作代码集锦
2009/04/28 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
centos下更新Python版本的步骤
2013/02/12 Python
Python语言的12个基础知识点小结
2014/07/10 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
详解python持久化文件读写
2019/04/06 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
校本教研工作制度
2014/01/22 职场文书
电子银行营销方案
2014/02/22 职场文书
公司离职证明样本
2014/09/13 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
婚宴致辞
2015/07/28 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL