秒表计时器
使用Jquery制作了一個漂亮的秒表計時器。
效果圖
原始樣式
點擊開始之后
點擊停止再點擊清零之后
有沒有一種心動的感覺呢，下面看代碼。
代碼演示
首先注意哦：引入相對應的Jquery架包。
代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script></head><style>#secs{width: 400px;height: 200px;border: 1px dashed royalblue;text-align: center;margin: 100px auto;background-image: url(img/aaa.jpg);}#txt{width: 220px;height: 50px;border: 2px solid aqua;background-color: black;color: white;font-size: 40px;text-align: center;margin-top: 30px;}#start{margin-top: 10px;width: 70px;height: 40px;border-radius: 15px;}#ss{margin-top: 10px;width: 70px;height: 70px;border-radius: 70px;}#end{margin-top: 10px;width: 70px;height: 40px;border-radius: 15px;}</style><body><div id="secs"><form><input type="text" id="txt"><br><input type="button" value="開始" id="start" onClick="timedCount()"><input type="button" value="清零" id="ss" onClick="cs()"><input type="button" value="停止" id="end" onClick="stopCount()"></form></div></body><script type="text/javascript">var c = 0var tfunction timedCount() {document.getElementById('txt').value = cc = c + 1t = setTimeout("timedCount()", 1000)}function stopCount() {clearTimeout(t)}function cs() {c = 0document.getElementById('txt').value = 0}</script> </html>使用上述方法就可以制作一個美麗的秒表了。
了解更多關注我呦！！！
總結
- 上一篇： java爬取小说
- 下一篇： mysql 时间 设计模式_数据库时间设