又一款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 相关文章推荐
javascript中scrollTop详解
Apr 13 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
物流专业大学应届生求职信
2013/11/03 职场文书
爱护公共设施标语
2014/06/24 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
出纳岗位职责
2015/01/31 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android