js實現簡易計數器功能
更新時間：2022年08月08日 17:18:16 作者：小智RE0
這篇文章主要為大家詳細介紹了js實現計數器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現簡易計數器功能的具體代碼，供大家參考，具體內容如下
實現簡易計數器
可進行三個操作,開始計數,暫停計數,復位操作
(使用計時函數事件)
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數練習</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設置span標簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?/*字體顏色*/
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計數;
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數;
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數函數count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ?}
?? ??? ??? ?//停止計數;
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ?}
?? ??? ??? ?//復位(即將輸入框的內容值變?yōu)樵瓉淼臄抵?;
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數-->
?? ??? ??? ?<h3>簡易計數器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="停止計時" onclick="stop()" ?style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>效果：
優(yōu)化計數練習
為了防止重復點擊開始按鈕;而造成計數器重復操作,出現時間間隔問題;在點擊開始按鈕后,就禁用開始按鈕組件;當點擊停止按鈕或者復位按鈕時,恢復開始按鈕組件.
<html>
<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數練習</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設置span標簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計數;
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數;
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數函數count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//點擊開始后,禁用開始按鈕;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=true;
?? ??? ??? ?}
?? ??? ??? ?//停止計數;
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ??? ?//點擊停止時;恢復開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ??? ?//復位(即將輸入框的內容值變?yōu)樵瓉淼臄抵?;
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ??? ?//點擊復位按鈕后,同時也恢復開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數-->
?? ??? ??? ?<h3>簡易計數器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ? ? ?<input type="button" id="startbtn" value="開始計數" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="停止計數" onclick="stop()" ?style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>效果：
將開始按鈕與停止按鈕布局在同一個位置
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數練習</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設置span標簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數;
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//獲取開始按鈕的對象;
?? ??? ??? ??? ?var startobj=document.getElementById("startbtn");
?? ??? ??? ??? ?//對按鈕的內容進行判斷;
?? ??? ??? ??? ?if(startobj.value=="開始計數"){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數函數count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//將按鈕值變?yōu)橥Ｖ?
?? ??? ??? ??? ?startobj.value="暫停計數";
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?//當按鈕值為暫停時;停止計數;
?? ??? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ??? ?//將按鈕值變?yōu)殚_始;
?? ??? ??? ??? ??? ?startobj.value="開始計數";
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ? //計數;
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ?
?? ??? ??? ?//復位(即將輸入框的內容值變?yōu)樵瓉淼臄抵?;
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數-->
?? ??? ??? ?<h3>簡易計數器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數" id="startbtn" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文詳細講解了JS數組循環(huán)的方式以及效率分析對比，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
用javascript編寫的第一人稱射擊游戲...2007-02-02
這篇文章主要為大家分享了一份很全面的JavaScript常用功能匯總集合，一些常用的額JS 對象、基本數據結構、功能函數等，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JavaScript動態(tài)生成表格的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
Bootstrap讓Web開發(fā)更迅速、更簡單，這篇文章主要為大家詳細介紹了Bootstrap表單控件，用來與用戶做交流的一個網頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了js實現隨機數小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要給大家介紹了關于利用HTML與JavaScript實現注冊頁面的相關資料,文中通過代碼介紹的非常詳細,對大家實現注冊頁面具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了webpack?loader使用的安裝配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在探究前端動畫時,想到之前在鎖屏壁紙看到的羅盤時鐘,看著很是炫酷,于是說干就干,下面就跟隨小編一起來學習一下如何使用JS實現一個炫酷的羅盤時鐘效果吧2024-02-02
JavaScript編程設計模式之觀察者模式(Observer Pattern)實例詳解
這篇文章主要介紹了JavaScript編程設計模式之觀察者模式(Observer Pattern),簡單說明了觀察者模式的概念、原理并結合實例形式詳細給出了觀察者模式的相關實現與使用技巧,需要的朋友可以參考下2017-10-10