js實現時鐘定時器
本文實例為大家分享了js實現時鐘定時器的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>時鐘</title> <script type='text/javascript'> function showClock(){ // 1. 獲取當前時間 var time = new Date(); // document.write(time); var year = time.getFullYear(); // document.write(year); var month = time.getMonth() + 1; // document.write(month); var day = time.getDate(); // var day1 = time.getDay(); // document.write(day1); var hours = time.getHours(); // document.write(hours); var minutes = time.getMinutes(); // document.write(minutes); var seconds = time.getSeconds(); document.getElementById('clock').innerHTML = year+'-'+month+'-'+day+' ' +hours+':'+minutes+':'+seconds; } var flag = true; var id; function runClock(){ var btn = document.getElementById('btn'); if(flag){ // 計時操作 id = setInterval('showClock()',1000); flag = false; btn.innerHTML = '停止'; }else{ // 停止計時操作 clearInterval(id); flag = true; btn.innerHTML = '動起來'; } } </script> </head> <body> <button οnclick='showClock()'>點擊顯示時鐘</button> <div id='clock'> </div> <button οnclick='runClock()'>動起來</button> </body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 詳解Android studio 動態fragment的用法2. 編程語言PHP在Web開發領域的優勢在哪？3. 什么是python的自省4. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)5. 解決Android studio xml界面無法預覽問題6. 基于android studio的layout的xml文件的創建方式7. Android如何加載Base64編碼格式圖片8. Springboot Druid 自定義加密數據庫密碼的幾種方案9. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現10. 圖文詳解vue中proto文件的函數調用
網公網安備