广州网站建设功能,网站做海康直播,wordpress酷播,郑州网络营销公司哪家好使用Jquery制作了一个漂亮的秒表计时器。
效果图
原始样式 点击开始之后 点击停止再点击清零之后 有没有一种心动的感觉呢#xff0c;下面看代码。
代码演示
首先注意哦#xff1a;引入相对应的Jquery架包。
代码
!DOCTYPE html
htmlhead下面看代码。
代码演示
首先注意哦引入相对应的Jquery架包。
代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srcjs/jquery.js/script/headstyle#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;}/stylebodydiv idsecsforminput typetext idtxtbrinput typebutton value开始 idstart onClicktimedCount()input typebutton value清零 idss onClickcs()input typebutton value停止 idend onClickstopCount()/form/div/bodyscript typetext/javascriptvar 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
使用上述方法就可以制作一个美丽的秒表了。
了解更多关注我呦
