javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止
javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止,點(diǎn)擊開始按鈕,獲取當(dāng)前時(shí)間,點(diǎn)擊停止按鈕,時(shí)間停止
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止</title> </head> <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;"> <!--1.顯示當(dāng)前時(shí)間 2.啟動(dòng)秒表 3.停止時(shí)鐘 --> <h1>動(dòng)態(tài)時(shí)鐘</h1> <p> 當(dāng)前時(shí)間:<span id="clock" style="color: #FF0000;"/> </span> </p> <p> <input type="button" value="start" onclick="start()" style="color: #FF0000;"/> <input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/> </p> </body> <script type="text/javascript"> var timer; function start(){ //設(shè)置定時(shí)器(方法的實(shí)現(xiàn),毫秒數(shù)) timer=setInterval(function(){ var now=new Date(); var time=now.toLocaleTimeString(); var c=document.getElementById("clock"); c.innerHTML=time; },1000); } function stop(){ //暫停 清楚定時(shí)器 clearInterval(timer); } </script> </html>
效果截圖:
更多JavaScript時(shí)鐘特效點(diǎn)擊查看:JavaScript時(shí)鐘特效專題
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
- js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
- JS+Canvas繪制動(dòng)態(tài)時(shí)鐘效果
- 基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
- javascript入門·動(dòng)態(tài)的時(shí)鐘,顯示完整的一些方法,新年倒計(jì)時(shí)
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- 五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘實(shí)例代碼
- js實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘
相關(guān)文章
JS?getRandomValues和Math.random方法深入解析
這篇文章主要為大家介紹了JS?getRandomValues和Math.random方法深入詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-02-02JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
這篇文章主要介紹了擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框,需要的朋友可以參考下2017-02-02DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法,下面通過本文給大家詳細(xì)介紹,感興趣的朋友一起看看2016-12-12JavaScript實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06