快捷導(dǎo)航

javascript實(shí)現(xiàn)動態(tài)時鐘的啟動和停止

更新時間：2020年07月29日 08:19:34 作者：Of_the

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)動態(tài)時鐘的啟動和停止文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

javascript實(shí)現(xiàn)動態(tài)時鐘的啟動和停止，點(diǎn)擊開始按鈕，獲取當(dāng)前時間，點(diǎn)擊停止按鈕，時間停止

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>動態(tài)時鐘的啟動和停止</title>
 </head>
 <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;">
 <!--1.顯示當(dāng)前時間
 2.啟動秒表
 3.停止時鐘
 -->
 <h1>動態(tài)時鐘</h1>
 <p>
 當(dāng)前時間：<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í)現(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(){
  //暫停 清楚定時器
  clearInterval(timer);
 }
 </script>
</html>

效果截圖：

更多JavaScript時鐘特效點(diǎn)擊查看：JavaScript時鐘特效專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))
這篇文章主要介紹了ES6 新增的創(chuàng)建數(shù)組的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
前端實(shí)現(xiàn)瀏覽器自定義滾動條寫法實(shí)例
自定義滾動條最早是IE玩出來的,但是后來,不知道為什么IE把這個有意思的功能廢棄了,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)瀏覽器自定義滾動條寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
基于JavaScript實(shí)現(xiàn)手機(jī)短信按鈕倒計時(超簡單)
在淘寶等購物網(wǎng)站，我們都會看到一個發(fā)送短信倒計時的按鈕，究竟是如何實(shí)現(xiàn)的呢？下面小編通過本篇文章給大家分享一段代碼關(guān)于js實(shí)現(xiàn)手機(jī)短信按鈕倒計時，需要的朋友參考下
2015-12-12
快速解決FusionCharts聯(lián)動的中文亂碼問題
這篇文章主要介紹了如何解決FusionCharts聯(lián)動的中文亂碼問題。需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
根據(jù)json字符串生成Html的一種方式
本文介紹了根據(jù)Json串生成Html的一種方式（只是簡單實(shí)現(xiàn)了文本框，密碼框，下拉框）感興趣的朋友可以了解下
2013-01-01
JS實(shí)現(xiàn)六邊形3D拖拽翻轉(zhuǎn)效果的方法
這篇文章給大家分享一個利用javascript實(shí)現(xiàn)3D六邊形拖拽翻轉(zhuǎn)的效果實(shí)例，實(shí)現(xiàn)后的效果很贊，對大家的學(xué)習(xí)Javascript具有一定的參考借鑒價值，有需要的朋友們一起去來看看吧。
2016-09-09
原生js實(shí)現(xiàn)吸頂效果
本文主要介紹了原生js實(shí)現(xiàn)吸頂效果的示例。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
JS實(shí)現(xiàn)盒子拖拽效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)盒子拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
Javascript 遍歷對象中的子對象
昨天同事問我一個問題：“有一個JSON對象，其中有若干個子對象，如何遍歷這個對象中的子對象？”
2009-07-07
javascript 圖片輪換函數(shù)化繼承
一直讓我困擾的是，我不知道如何去讓這個效果自動播放，或者費(fèi)了很多周折。這可能叫初始化。
2010-05-05