js實現(xiàn)簡易計數(shù)器功能
更新時間：2022年08月08日 17:18:16 作者：小智RE0
這篇文章主要為大家詳細介紹了js實現(xiàn)計數(shù)器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡易計數(shù)器功能的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)簡易計數(shù)器
可進行三個操作,開始計數(shù),暫停計數(shù),復位操作
(使用計時函數(shù)事件)
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數(shù)練習</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">
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ?}
?? ??? ??? ?//停止計數(shù);
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ?}
?? ??? ??? ?//復位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數(shù)" 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)化計數(shù)練習
為了防止重復點擊開始按鈕;而造成計數(shù)器重復操作,出現(xiàn)時間間隔問題;在點擊開始按鈕后,就禁用開始按鈕組件;當點擊停止按鈕或者復位按鈕時,恢復開始按鈕組件.
<html>
<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數(shù)練習</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">
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//點擊開始后,禁用開始按鈕;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=true;
?? ??? ??? ?}
?? ??? ??? ?//停止計數(shù);
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ??? ?//點擊停止時;恢復開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ??? ?//復位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ??? ?//點擊復位按鈕后,同時也恢復開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ? ? ?<input type="button" id="startbtn" value="開始計數(shù)" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="停止計數(shù)" 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>簡易計數(shù)練習</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;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//獲取開始按鈕的對象;
?? ??? ??? ??? ?var startobj=document.getElementById("startbtn");
?? ??? ??? ??? ?//對按鈕的內(nèi)容進行判斷;
?? ??? ??? ??? ?if(startobj.value=="開始計數(shù)"){
?? ??? ??? ??? ?//設置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//將按鈕值變?yōu)橥Ｖ?
?? ??? ??? ??? ?startobj.value="暫停計數(shù)";
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?//當按鈕值為暫停時;停止計數(shù);
?? ??? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ??? ?//將按鈕值變?yōu)殚_始;
?? ??? ??? ??? ??? ?startobj.value="開始計數(shù)";
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框對象;
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ?
?? ??? ??? ?//復位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數(shù)" id="startbtn" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js計時事件實現(xiàn)圓形時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過編譯之后都會生成 JavaScript 代碼。TypeScript 最大的特點就是類型化，因此才叫做 TypeScript。比起弱類型的 JavaScript，類型化的 TypeScript 顯得更加容易維護。2015-06-06
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。下面通過本文給大家介紹Bootstrap 輪播(Carousel)插件，非常不錯，需要的朋友參考下吧2016-12-12
JS實現(xiàn)的base64加密、md5加密及sha1加密詳解
這篇文章主要介紹了JS實現(xiàn)的base64加密、md5加密及sha1加密的方法,結合實例形式詳細分析了JavaScript各種常見加密方法與實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
How to Auto Include a Javascript File
How to Auto Include a Javascript File...2007-02-02
這篇文章主要為大家介紹了stats.js使用性能監(jiān)控源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
Javascript圖像處理—圖像形態(tài)學(膨脹與腐蝕)
上一篇文章，我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來做膨脹和腐蝕函數(shù)2013-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)打字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能示例
這篇文章主要介紹了微信小程序自定義可滑動頂部TabBar選項卡實現(xiàn)頁面切換功能,結合實例形式分析了微信小程序自定義頂部TabBar選項卡頁面切換功能的相關布局、樣式及功能實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Knockout自定義綁定創(chuàng)建方法的相關資料,需要的朋友可以參考下2015-12-12