CSS3+JS实现的时钟,该怎么解决
日期：2014-05-18 浏览次数：20472 次
CSS3+JS实现的时钟
写的玩玩的，高手勿拍哈
先上图
只支持google浏览器
再上码，有问题的地方还请指出
写的玩玩的，高手勿拍哈
先上图
只支持google浏览器
再上码，有问题的地方还请指出
- HTML code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
@-webkit-keyframes secondhand{}
@-webkit-keyframes minutehand{}
@-webkit-keyframes hourhand{}
@-webkit-keyframes clockhand
{
0%{
-webkit-box-shadow:3px -3px 6px #ffff00;
}
50%
{
-webkit-box-shadow:3px -3px 6px #ff00ff;
}
}
*{ padding:0; margin:0;}
#clock{
-webkit-border-radius:250px;
-webkit-animation-name:clockhand;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-box-shadow:3px -3px 6px #ffff00;
}
#second{
width:4px;
height:270px;
-webkit-border-radius:2px;
background-color: rgba(255,0,0,0.8);
border:1px solid black;
-webkit-animation-duration:60s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
top:34px;
left:248px;
-webkit-transform-origin:50% 80%;
position:absolute;
}
#minute{
width:12px;
height:300px;
-webkit-border-radius:6px;
background-color: rgba(0,0,0,1);
border:1px solid black;
-webkit-animation-duration:3600s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
top:10px;
left:244px;
-webkit-transform-origin:50% 80%;
position:absolute;
}
#hour{
width:20px;
height:240px;
-webkit-border-radius:10px;
background-color: rgba(0,0,0,1);
border:1px solid black;
-webkit-animation-duration:43200s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
top:58px;
left:240px;
-webkit-transform-origin:50% 80%;
position:absolute;
}
#ct{
height:10px;
width:10px;
-webkit-border-radius:5px;
background-color:#000000;
position:absolute;
top:245px;
left:245px;
}
span{
cursor:pointer;
-webkit-border-radius:15px;
border:1px solid rgba(100,200,300,0.7);
display:block;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:24px;
color:#3399FF;
height:30px;
width:30px;
position:absolute;
text-align:center;
-webkit-transition-timing-function:linear;
-webkit-transition-duration:0.2s;
}
span:hover{
text-shadow:2px 2px 4px #3399FF;
z-index:100;
}
</style>
</head>
<body>
<div id="clock" style="width:500px;height:500px;">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<div id="ct"></div>
</div>
<script>
(function(){
var spans=document.getElementsByTagName("SPAN");
for(var length=0;length<spans.length;length++)
{
spans[length].style.top=485-(250+230*Math.cos((Math.PI/6)*(length+1)))+"px";
spans[length].style.left=235+230*Math.sin((Math.PI/6)*(length+1))+"px";
spans[length].style.webkitTransform="rotate("+((length+1)*30)+"deg)";
spans[length].class=length;
spans[length].onmouseover=function(){
this.style.webkitTransform="rotate(360deg) scale(2,2)"
};
spans[length].onmouseout=function(){
this.style.webkitTransform="rotate("+((this.class+1)*30)+"deg)";
};
}
var dateNow=new Date();
var seconds=dateNow.getSeconds();
var seconddeg=6*seconds;
var minutes=dateNow.getMinutes();
var minutedeg=6*minutes;
var hours=dateNow.getHours();
var hourdeg=30*((hours+1)-12)+((minutedeg*30)/3
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
