目前共有6篇帖子。
【原创程序】网页秒表程序
 |
|
|
【HTML代码】
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Timer</title> <style> #Timer { font-family: Arial, Verdana, sans-serif; border: 1px solid black; width: 200px; text-align: center; } #Timer > h3 { margin: 3px 0px 3px 0px; font-size: 24px; } #Timer > #display { margin: 3px 0px 3px 0px; padding: 4px 0px 4px 0px; border: 1px solid grey; font-size: 20px; } #Timer > form { margin-bottom: 4px; } #Timer > #records.hasBorder { border-top: 1px solid grey; padding: 2px; } </style> <script> var timer = {}; timer.intervalID = null; timer.time = [0, 0, 0, 0]; timer.display = function() { var text = []; var i; for (i = 0; i < this.time.length; i++) { value = this.time[i]; if (value < 10) { value = "0" + value; } text[i] = value; } text = text.join(":"); document.getElementById("display").innerHTML = text; } timer.increment = function() { this.time[3]++; if (this.time[3] >= 100) { this.time[3] = 0; this.time[2]++; if (this.time[2] >= 60) { this.time[2] = 0; this.time[1]++; if (this.time[1] >= 60) { this.time[1] = 0; this.time[0]++; } } } this.display(); } timer.start = function() { this.intervalID = setInterval(function(){timer.increment()}, 10); } timer.stop = function() { clearInterval(this.intervalID); } timer.reset = function() { this.stop(); this.time = [0, 0, 0, 0]; this.display(); } timer.record = function() { document.getElementById("records").innerHTML += document.getElementById("display").innerHTML + "<br>"; document.getElementById("records").className = "hasBorder"; } function init() { timer.display(); } </script> </head> <body onLoad="init()"> <section id="Timer"> <h3>Webpage Timer</h3> <div id="display"></div> <form> <input type="button" value="Start" onClick="timer.start()"> <input type="button" value="Reset" onClick="timer.reset()"> <input type="button" value="Record" onClick="timer.record()"> </form> <div id="records"></div> </section> </body> </html> |
|
在Dreamweaver CC 2015设计视图下的显示效果：
 不过我没用任何网页设计器，是完全纯手写的代码。 |
|
4楼
182.137.54.*
2015-12-14 16:50
666
|
|
|
5楼
182.137.54.*
2015-12-14 16:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页秒表 </title> <meta charset="UTF-8"> <script language="javascript"> var stop; var ss=0; var s=0; var m=0; var h=0; function clock(){ var btn = document.getElementById('start'); switch(btn.value){ case "start": setTimeout("init()",10); btn.value = "pause"; break; case 'pause': clearTimeout(stop); btn.value = "start"; document.getElementById("showtime"); break; } } function init(){ ss++; var show =document.getElementById("showtime"); if(m==60){ h++;m=0; } if(s==60){ m++;s=0; } if(ss==100){ s++;ss=0; } if(m<10&&s<10){ show.value= "0"+h+":"+"0"+m+":"+"0"+s+":"+ss; } else if(s<10&&m>=10){ show.value= "0"+h+":"+m+":"+"0"+s+":"+ss; }else if(m<10&&s>=10){ show.value="0"+h+":"+"0"+m+":"+s+":"+ss; } else show.value= "0"+h+":"+m+":"+s+":"+ss; stop=setTimeout("init()",10); } function reset(){ h=0; m=0; s=0; ss=0; document.getElementById("showtime").value="00:00:00:00"; clearTimeout(stop); var btn = document.getElementById('start'); btn.value = "start"; } function record(){ var is =document.getElementById("record"); var is =document.getElementById("showtime"); } </script> <style type="text/css"> #main{ width:200px; margin: auto; border:solid 1px; } #showtime{width:196px; height:30px; font-size:25px; text-align:center; } #t{ text-align:center; font-size:28px; } </style> </head> <body onLoad="reset();"> <div id='main'> <div id="t">网页秒表</div> <input type="text" readonly="readonly" id="showtime"/> <input type="button" value="start" onclick="clock();" id="start" name="start"> <button onclick="reset();" id="reset" name="reset"/> reset</button> <button onclick="record();" id="record" value="reset" >record</button> <table id="tab"; border:solid; ></table> </div> </body></html>
我没有写记录功能 真厉害！ |
|
|
 |
