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与函数式编程解释
Apr 27 Javascript
基于jquery的表格排序
Sep 11 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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中的字符串函数
2006/11/24 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php 中英文语言转换类
2011/09/07 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP编写简单的App接口
2016/08/28 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
javascript实现滚动条效果
2020/03/24 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
详解python中的文件与目录操作
2017/07/11 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
财务部经理岗位职责
2014/02/03 职场文书
倡议书格式模板
2014/05/13 职场文书
节能减耗标语
2014/06/21 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014年医院工作总结
2014/11/20 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers