HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开源代码 查看内容

JS实现时钟效果

2016-8-4 17:07| 发布者: microHTML| 查看: 2104| 评论: 0|原作者: funnyF2E|来自: segmentfault.com

摘要: 闲来无事,用JS写了个时钟,只要思路理清了,做起来其实还挺简单的,代码没有多少,运行起来的效果还是十分棒的,附上代码,供大家参考下。

  闲来无事,用JS写了个时钟,只要思路理清了,做起来其实还挺简单的。


  先发个效果链接 点击查看https://jsfiddle.net/sunny_zhang/jcm8h4qe/


  Demo


  

  代码实现

  HTML

 
  
  
  
9
  
10
  
11
  
12
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
  
  
  
  
  


CSS


*{

  padding:0;

  margin:0;

  }

  html, body {

  height: 100%;

  background: #9c9;

  }

  #warp{

  width:230px;

  height:230px;

  margin:50px auto;

  }

  #clock{

  width:200px;

  height:200px;

  border-radius:115px;

  border:15px solid #f96;

  background:white;

  position:relative;

  }

  #number div{

  width:190px;

  height:20px;

  position:absolute;

  left:10px;

  top:90px;

  }

  #number span{

  display:block;

  width:20px;

  height:20px;

  }

  .pointer{

  position:absolute;

  bottom:90px;

  transform-origin:50% 90%;

  -webkit-transform-origin:50% 90%;

  }

  #houre{

  width:5px;

  height:60px;

  left:98px;

  background:black;

  }

  #minute{

  width:3px;

  height:70px;

  left:99px;

  background:gray;

  }

  #second{

  width:1px;

  height:80px;

  left:100px;

  background:red;

  }

  这里要注意的是number里面div的宽度给够,要不然后面用JS布局会出现问题。

  JavaScript


  var oNumber=document.getElementById("number");

  var oDiv=oNumber.getElementsByTagName("div");

  var oSpan=oNumber.getElementsByTagName("span");

  for(var i=0;i


  这里主要代码就两段,一段是布局用的,让数字旋转到相应的位置并调整方向:

for(var i=0;i

  另一段是计算指针的角度,其中最重要的是在不满一小时或不满一分钟时,时针或分针应该转多少度:

 var houreDeg=(nowMinute/60)*30;

 var minuteDeg=(nowSecond/60)*6;

  It's done.是不是很简单......


鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 21:58

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部