JavaScript实现时钟效果
程序员文章站
2022-05-08 17:03:23
...
时钟效果
项目布局如下：
下面就是大家所关心的代码了
clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/clock.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/clock.css" type="text/css">
</head>
<body>
<center>
<div style="width:150px;height:100px;position:relative;left:58px;top:50px;">
<div style="top: -49.823px; left: 5.6814px;" id="dig1" class="dig">1</div>
<div style="top: -35.2232px; left: 20.5112px;" id="dig2" class="dig">2</div>
<div style="top: -15.1496px; left: 25.9997px;" id="dig3" class="dig">3</div>
<div style="top: 4.96459px; left: 20.6614px;" id="dig4" class="dig">4</div>
<div style="top: 19.6749px; left: 5.94126px;" id="dig5" class="dig">5</div>
<div style="top: 24.9996px; left: -14.1765px;" id="dig6" class="dig">6</div>
<div style="top: 19.4976px; left: -34.2464px;" id="dig7" class="dig">7</div>
<div style="top: 4.65796px; left: -48.8363px;" id="dig8" class="dig">8</div>
<div style="top: -15.5025px; left: -53.9968px;" id="dig9" class="dig">9</div>
<div style="top: -35.527px; left: -48.3314px;" id="dig10" class="dig">10</div>
<div style="top: -49.9953px; left: -33.3734px;" id="dig11" class="dig">11</div>
<div style="top: -54.9914px; left: -13.1715px;" id="dig12" class="dig">12</div>
<div style="top: 0px; left: 0px;" id="hour1" class="hour"></div>
<div style="top: -7.31095px; left: -3.24807px;" id="hour2" class="hour"></div>
<div style="top: -14.6219px; left: -6.49614px;" id="hour3" class="hour"></div>
<div style="top: -21.9329px; left: -9.74422px;" id="hour4" class="hour"></div>
<div style="top: 0px; left: 0px;" id="min1" class="min"></div>
<div style="top: -2.46608px; left: 7.61042px;" id="min2" class="min"></div>
<div style="top: -4.93215px; left: 15.2208px;" id="min3" class="min"></div>
<div style="top: -7.39823px; left: 22.8313px;" id="min4" class="min"></div>
<div style="top: -9.86431px; left: 30.4417px;" id="min5" class="min"></div>
<div style="top: 0px; left: 0px;" id="sec1" class="sec"></div>
<div style="top: -5.35778px; left: -5.94089px;" id="sec2" class="sec"></div>
<div style="top: -10.7156px; left: -11.8818px;" id="sec3" class="sec"></div>
<div style="top: -16.0733px; left: -17.8227px;" id="sec4" class="sec"></div>
<div style="top: -21.4311px; left: -23.7636px;" id="sec5" class="sec"></div>
<div style="top: -26.7889px; left: -29.7045px;" id="sec6" class="sec"></div>
</div>
</center>
</body>
</html>
clock.css
div.dig, div.hour, div.min, div.sec
{
position:absolute;
}
div.hour, div.min, div.sec
{
width:2px;
height:2px;
font-size:2px;
}
div.dig
{
width:30px;
height:30px;
font-family:arial,verdana,sans-serif;
font-size:10px;
color:#000000;
text-align:center;
padding-top:10px
}
div.min
{
background:#0000FF;
}
div.hour
{
background:#000000;
}
div.sec
{
background:#FF0000;
}
clock.js
var H = '....';
var H = H.split('');
var M = '.....';
var M = M.split('');
var S = '......';
var S = S.split('');
var Ypos = 0;
var Xpos = 0;
var Ybase = 8;
var Xbase = 8;
var dots = 12;
function clock() {
var time = new Date();
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs / 30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins / 30;
var hr = time.getHours();
var hrs = -1.57 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 0; i < dots; ++i) {
document.getElementById("dig" + (i + 1)).style.top = 0 - 15 + 40 * Math.sin(-0.49 + dots + i / 1.9).toString() + "px";
document.getElementById("dig" + (i + 1)).style.left = 0 - 14 + 40 * Math.cos(-0.49 + dots + i / 1.9).toString() + "px";
}
for (i = 0; i < S.length; i++) {
document.getElementById("sec" + (i + 1)).style.top = Ypos + i * Ybase * Math.sin(sec).toString() + "px";
document.getElementById("sec" + (i + 1)).style.left = Xpos + i * Xbase * Math.cos(sec).toString() + "px";
}
for (i = 0; i < M.length; i++) {
document.getElementById("min" + (i + 1)).style.top = Ypos + i * Ybase * Math.sin(min).toString() + "px";
document.getElementById("min" + (i + 1)).style.left = Xpos + i * Xbase * Math.cos(min).toString() + "px";
}
for (i = 0; i < H.length; i++) {
document.getElementById("hour" + (i + 1)).style.top = Ypos + i * Ybase * Math.sin(hrs).toString() + "px";
document.getElementById("hour" + (i + 1)).style.left = Xpos + i * Xbase * Math.cos(hrs).toString() + "px";
}
setTimeout('clock()', 50);
}
window.onload = clock;
上一篇： 预防弱视应该怎么做
下一篇： 勤洗头会脱发？预防脱发的7大方法