又一款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 相关文章推荐
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
js图片预加载示例
Apr 30 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
基于PyTorch中view的用法说明
2021/03/03 Python
MySQL面试题目集锦
2016/04/14 面试题
活动志愿者自荐信
2014/01/27 职场文书
户外活动策划方案
2014/03/12 职场文书
成龙洗发水广告词
2014/03/14 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
经理岗位职责
2015/02/02 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers