又一款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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
js模拟类继承小例子
Jul 17 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
Layui tree 下拉菜单树的实例代码
Sep 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
destoon设置自定义搜索的方法
2014/06/21 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
财务部总监岗位职责
2014/03/12 职场文书
公司年会策划方案
2014/05/17 职场文书
七年级生物教学反思
2016/02/20 职场文书