时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "http://hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
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;
</script>
<style type="text/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;
}
</style>
</head>
<body>
<div class="example">
<table style="background-color: #3e8e41">
<tbody>
<tr>
<td>
<div style="width:120px;height:100px;position:relative;left:58px;top:50px;">
<div id="dig1" class="dig" style="top: -49.823px; left: 5.6814px;">1</div>
<div id="dig2" class="dig" style="top: -35.2232px; left: 20.5112px;">2</div>
<div id="dig3" class="dig" style="top: -15.1496px; left: 25.9997px;">3</div>
<div id="dig4" class="dig" style="top: 4.96459px; left: 20.6614px;">4</div>
<div id="dig5" class="dig" style="top: 19.6749px; left: 5.94126px;">5</div>
<div id="dig6" class="dig" style="top: 24.9996px; left: -14.1765px;">6</div>
<div id="dig7" class="dig" style="top: 19.4976px; left: -34.2464px;">7</div>
<div id="dig8" class="dig" style="top: 4.65796px; left: -48.8363px;">8</div>
<div id="dig9" class="dig" style="top: -15.5025px; left: -53.9968px;">9</div>
<div id="dig10" class="dig" style="top: -35.527px; left: -48.3314px;">10</div>
<div id="dig11" class="dig" style="top: -49.9953px; left: -33.3734px;">11</div>
<div id="dig12" class="dig" style="top: -54.9914px; left: -13.1715px;">12</div>
<div id="hour1" class="hour" style="top: 0px; left: 0px;"></div>
<div id="hour2" class="hour" style="top: -6.59662px; left: -4.526px;"></div>
<div id="hour3" class="hour" style="top: -13.1932px; left: -9.052px;"></div>
<div id="hour4" class="hour" style="top: -19.7898px; left: -13.578px;"></div>
<div id="min1" class="min" style="top: 0px; left: 0px;"></div>
<div id="min2" class="min" style="top: -4.70743px; left: -6.46839px;"></div>
<div id="min3" class="min" style="top: -9.41487px; left: -12.9368px;"></div>
<div id="min4" class="min" style="top: -14.1223px; left: -19.4052px;"></div>
<div id="min5" class="min" style="top: -18.8297px; left: -25.8736px;"></div>
<div id="sec1" class="sec" style="top: 0px; left: 0px;"></div>
<div id="sec2" class="sec" style="top: -3.25971px; left: -7.30577px;"></div>
<div id="sec3" class="sec" style="top: -6.51942px; left: -14.6115px;"></div>
<div id="sec4" class="sec" style="top: -9.77914px; left: -21.9173px;"></div>
<div id="sec5" class="sec" style="top: -13.0388px; left: -29.2231px;"></div>
<div id="sec6" class="sec" style="top: -16.2986px; left: -36.5289px;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var c1 = 0;
var t=0;
var timer_is_on1= 0 ;
function myTimer(){
t=t+1;
document.getElementById("txt").value=t;
}
function doTimer1(){
if (!timer_is_on1) {
timer_is_on1 = 1;
myt = setInterval(function () {
myTimer()
},1000);
}
}
function stopCount1(){
clearInterval(myt);
timer_is_on1=0;
}
</script>
</head>
<body>
<br>
<form>
<input type="button" value="开始计数!" onclick="doTimer1()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount1()" />
</form>
</body>
</html>计时器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
document.getElementById(‘txt‘).value=c;
c=c+1;
t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
if (!timer_is_on){
timer_is_on=1;
timedCount();
}
}
function stopCount(){
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
</body>
</html>本文出自 “奋斗吧” 博客，请务必保留此出处http://lvnian.blog.51cto.com/7155281/1855648
原文地址：http://lvnian.blog.51cto.com/7155281/1855648
