设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网页设计 > Javascript > 正文

JS 实现时钟效果

时间:2016-09-06 15:10 来源:未知 作者:SecYe安全 阅读:

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

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

  Demo

1.png


代码实现

  HTML

<div id="warp">

 <div id="clock">

 <div id="number">

 <div><span>9</span></div>

 <div><span>10</span></div>

 <div><span>11</span></div>

 <div><span>12</span></div>

 <div><span>1</span></div>

 <div><span>2</span></div>

 <div><span>3</span></div>

 <div><span>4</span></div>

 <div><span>5</span></div>

 <div><span>6</span></div>

 <div><span>7</span></div>

 <div><span>8</span></div>

 </div>

 <div id="houre" class="pointer"></div>

 <div id="minute" class="pointer"></div>

 <div id="second" class="pointer"></div>

 </div>

 </div>

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<odiv.length;i++){   odiv[i].style.webkittransform="rotate(" +="" i="" *="" 30="" "deg)";=""   }=""   for(var="" j="0;j<oSpan.length;j++){"   ospan[j].style.webkittransform="rotate(" -30=""   function="" colornumber(){=""   var="" ohoure="document.getElementById(" houre");"="" ominute="document.getElementById(" minute");"="" osecond="document.getElementById(" second");"="" nowtime="new" date();="" nowhoure="nowTime.getHours();" nowminute="nowTime.getMinutes();" nowsecond="nowTime.getSeconds();" houredeg="(nowMinute/60)*30;" minutedeg="(nowSecond/60)*6;"   ohoure.style.webkittransform="rotate(" (nowhoure="" 30+houredeg)=""   ominute.style.webkittransform="rotate(" (nowminute="" 6+="" minutedeg)=""   osecond.style.webkittransform="rotate(" (nowsecond="" 6)=""   colornumber();=""   setinterval(colornumber,1000);<="" pre=""></odiv.length;i++){>

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

for(var i=0;i<odiv.length;i++){   odiv[i].style.webkittransform="rotate(" +="" i="" *="" 30="" "deg)";=""   }=""   for(var="" j="0;j<oSpan.length;j++){"   ospan[j].style.webkittransform="rotate(" -30=""   }<="" pre=""></odiv.length;i++){>
 另一段是计算指针的角度,其中最重要的是在不满一小时或不满一分钟时,时针或分针应该转多少度:
var houreDeg=(nowMinute/60)*30;

var minuteDeg=(nowSecond/60)*6;

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%