JavaScript輸入分鐘、秒倒計時技巧總結(jié)（附代碼）
更新時間：2017年08月17日 15:16:35 作者：小倔驢
這篇文章主要介紹了JavaScript輸入分鐘、秒倒計時的代碼實現(xiàn)，通過css和js代碼展示了邏輯過程，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
代碼如下：
<div class="container-fluid"> <div class="main-content-inner"> <div class="page-content"> <div class="page-header"> <form class="form-inline" id="searchform"> <div class="form-group" style="margin-left: 10px;"> <label>分</label> <input type="text" class="form-control" name="Minute" id="Minute"> </div> <div class="form-group" style="margin-left: 10px;"> <label>秒</label> <input type="text" class="form-control" name="Second" id="Second"> </div> <button type="button" class="btn btn-purple btn-sm" onclick="ok()"> 開始 </button> </form> </div> <div class="row" style="height:500px;line-height:500px;vertical-align:middle;font-size:200px;color:red;text-align:center;margin-top:100px"> <p id="listview"></p> </div> </div> </div> </div>
<script>
var t;
var Minute;
var Second;
var d;
function ok() {
if ($("#Minute").val() == "0" || $("#Minute").val() == "") {
Minute = 0;
} else {
Minute = $("#Minute").val();
}
if ($("#Second").val() == "0" || $("#Second").val() == "") {
Second = 0;
} else {
Second = $("#Second").val();
}
var min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
var sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
$(".page-header").hide();
$("#listview").show();
setTimeout(function () {
begin()
}, 1000);
}
function begin() {
if (Second != 0) {
Second--;
min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
} else {
if (Minute > 0) {
Minute--;
Second = 59;
min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
} else {
clearTimeout(t);
}
}
t = setTimeout(function () {
begin()
}, 1000)
}
</script>
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!
您可能感興趣的文章:
- JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個技巧
- JS尾遞歸的實現(xiàn)方法及代碼優(yōu)化技巧
- 2019 年編寫現(xiàn)代 JavaScript 代碼的5個小技巧(小結(jié))
- JavaScript實用代碼小技巧
- 幾個你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
- js技巧之十幾行的代碼實現(xiàn)vue.watch代碼
- js 奇葩技巧之隱藏代碼
- javascript簡寫常用的12個技巧（可以大大減少你的js代碼量）
- JavaScript中最常用的10種代碼簡寫技巧總結(jié)
- 手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享
- JavaScript避免代碼的重復(fù)執(zhí)行經(jīng)驗技巧分享
- JavaScript編碼小技巧分享
相關(guān)文章
在TypeScript中,我們可以使用Class來定義類,這使得我們能夠更加結(jié)構(gòu)化地組織代碼并使用面向?qū)ο蟮乃枷脒M(jìn)行開發(fā),本文小編將給大家詳細(xì)的總結(jié)一下TypeScript中Class類的基本語法,需要的朋友可以參考下2023-09-09
JavaScript鏈?zhǔn)秸{(diào)用原理與實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實現(xiàn)方法與相關(guān)操作注意事項,需要的朋友可以參考下2020-05-05
下面小編就為大家?guī)硪黄猨avascript url幾種編碼方式詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本文給大家?guī)鞪S中判斷某個字符串是否包含另一個字符串的五種方法，有string對象的方法，match() 方法，RegExp對象的方法，test() 方法，exec() 方法，具體內(nèi)容詳情大家參考下本文2018-05-05
javascript元素動態(tài)創(chuàng)建實現(xiàn)方法
這篇文章主要介紹了javascript元素動態(tài)創(chuàng)建實現(xiàn)方法,涉及javascript操作元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
無論你開發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動態(tài)import原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
element-ui?對話框dialog使用echarts報錯'dom沒有獲取到'的問題
這篇文章主要介紹了element-ui?對話框dialog里使用echarts，報錯'dom沒有獲取到'的問題，在這個事件里邊進(jìn)行echarts的初始化，執(zhí)行數(shù)據(jù)，本文結(jié)合實例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JS中的Replace()傳入函數(shù)時的用法詳解,replace方法的語法是：stringObj.replace(rgExp, replaceText)關(guān)于js replace 傳入函數(shù)的用法，大家通過本文學(xué)習(xí)吧2017-09-09
本文主要介紹了js實現(xiàn)手機(jī)發(fā)送驗證碼功能的示例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JavaScript中的標(biāo)簽語句用法,實例分析了標(biāo)簽語句的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02