又一款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 19 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
Djang中静态文件配置方法
2015/07/30 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python实现换位加密算法的示例
2018/10/14 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
致全体运动员广播稿
2014/02/01 职场文书
岗位竞聘书范文
2014/03/31 职场文书
工会经费申请报告
2015/05/15 职场文书