又一款js时钟!transform实现时钟效果


Posted in Javascript onAugust 15, 2016

又来一个时钟效果了,这个的实现不需要canvas,都是div、ul、li画出的,好玩有真实。 

哈哈~

需要的js才能实现到走动这个效果,但js的内容不多,也不难。
主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟
在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度
使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和
圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路。 

又一款js时钟!transform实现时钟效果

代码: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>transform</title>
  <style id="css">
    #clock{
      width: 200px;
      height: 200px;
      border: 2px solid #000;
      border-radius: 50%;
      margin: 100px auto 0;
      position: relative;
    }
    #clock ul{
      width: 200px;
      height: 200px;
      position: relative;
      list-style: none;
      padding:0;
      margin: 0;
    }
    #clock ul li{
      width: 2px;
      height: 10px;
      background: #000;
      transform-origin: center 100px;
      position: absolute;
      top: 0;
      left: 50%;
    }
    #clock ul li:nth-of-type(5n+1){
      height: 20px;
    }  
    #hour{
      height: 40px;
      width: 4px;
      background: #00fefe;
      position: absolute;
      top: 60px;
      left: 99px;
      transform-origin:center bottom;
    }
    #min{
      height: 60px;
      width: 3px;
      background: #001afe;
      position: absolute;
      top: 40px;
      left: 99px;
      transform-origin: center bottom;
      transform: rotate(15deg);
    }
    #sec{
      height: 70px;
      width: 2px;
      background: #000;
      position: absolute;
      top: 30px;
      left: 99px;
      transform-origin:center bottom;
    }
    #dot{
      width: 10px;
      height: 10px;
      position: absolute;
      left: 95px;
      top: 95px;
      background: #aaa;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="clock">
    <ul></ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="dot"></div>
  </div>
  <script>
    var oCss=document.getElementById("css"); 
    var oClock=document.getElementById("clock");
    var oUl=oClock.getElementsByTagName("ul")[0];
    var oHour=document.getElementById("hour");
    var oMin=document.getElementById("min");
    var oSec=document.getElementById("sec");
    var strLi="";
    var strCss="";
    for(var i=0;i<60;i++){
      strLi+="<li></li>";
    }
    oUl.innerHTML=strLi;
    for(var i=0;i<60;i++){
      strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
    }
    oCss.innerHTML+=strCss;
    time();
    setInterval(time,1000);
    function time(){
    var date=new Date();
    var h=date.getHours();
    var m=date.getMinutes();
    var s=date.getSeconds();

    oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
    oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
    oSec.style.transform="rotate("+s*6+"deg)";
    }
  </script>
</body>
</html>

使用标签画图最主要的是定位,因为这样我们就可以把弄到形状的盒子放到你所想要的位置,内部css样式表是可以使用获取元素的方式获取的,这样就可以 使用innerHTML为其添加样式,且可以循环添加,还有因为刻度太多所以使用循环添加,这样省时省力,至于剩下的就是定时器了,给定好1秒的时间,每1 秒执行一次函数,这样它就是动起来了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
JS实现图片切换效果
Nov 17 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 #Javascript
深入分析javascript中console命令
Aug 14 #Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
javascript中的 object 和 function小结
Aug 14 #Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
UNIX文件系统分类
2014/11/11 面试题
入团者的自我评价分享
2013/12/02 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
护士思想汇报
2014/01/12 职场文书
手机被没收检讨书
2014/02/22 职场文书
暑期培训心得体会
2014/09/02 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
新生入学欢迎词
2015/01/26 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
《西门豹》教学反思
2016/02/23 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
一篇文章弄懂Python中的内建函数
2021/08/07 Python