秒表计时器

使用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>