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

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

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

javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止，點(diǎn)擊開(kāi)始按鈕，獲取當(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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