站长工具seo词语排名做网站会提供源代码
使用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>使用上述方法就可以制作一个美丽的秒表了。
了解更多关注我呦！！！