又一款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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
JS实现九宫格拼图游戏
Jun 28 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中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js查找节点的方法小结
2015/01/13 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
angular6 填坑之sdk的方法
2018/12/27 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python数据操作方法封装类实例
2017/06/23 Python
Python代码注释规范代码实例解析
2020/08/14 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
学术会议欢迎词
2014/01/09 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
护士毕业实习感言
2014/03/05 职场文书
主题教育活动总结
2014/05/05 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
物资采购管理制度
2015/08/06 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js