頁(yè)面按鈕禁用與解除禁用的方法
更新時(shí)間：2014年02月19日 11:28:37 作者：
這篇文章主要介紹了頁(yè)面按鈕禁用與解除禁用的方法,需要的朋友可以參考下
計(jì)時(shí)器和延時(shí)器的概念
//--計(jì)時(shí)器
// 計(jì)時(shí)器ID號(hào) setInterval(回調(diào)函數(shù), 毫秒數(shù));
// 每隔指定毫秒數(shù)，調(diào)用一次回調(diào)函數(shù)
// clearInterval(計(jì)時(shí)器ID號(hào))
// 停止指定ID號(hào)的計(jì)時(shí)器(實(shí)際上是銷毀釋放資源了)
//--延時(shí)器
// 延時(shí)器Id號(hào) setTimeout(回調(diào)函數(shù), 毫秒間隔)
// 從調(diào)用開始，等待指定毫秒數(shù)后調(diào)用一次回調(diào)函數(shù)，結(jié)束
// 使用clearTimeout清除延時(shí)器
效果圖：
頁(yè)面打開后會(huì)出現(xiàn)下圖：之后按鈕value值每過1秒 數(shù)字減小1直至0停止 按鈕內(nèi)容變?yōu)橥?
實(shí)現(xiàn)代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn
{
width:200px;
height:50px;
background -color:gary;
}
</style>
<script type="text/javascript">
onload = function () {
//獲得該button對(duì)象
var btn = document.getElementById('btn');
//創(chuàng)建計(jì)時(shí)器 返回計(jì)時(shí)器ID
var intervalId = setInterval(function () {
var waitSecond = parseInt((/\d+/).exec(btn.value));//利用RegExp.exec（）方法，返回匹配的字符串內(nèi)容
waitSecond--;//時(shí)間--
if (waitSecond >= 0) {//判斷
btn.value=btn.value.replace(/\d+/, waitSecond) //利用string.repleace(RegExp,code)方法替換按鈕value中數(shù)字，并返回替換結(jié)果
} else {
btn.value = '同意';//將按鈕value值改為同意
btn.disabled = false;//將按鈕disabled值改為false
clearInterval(intervalId);//清除計(jì)時(shí)器
}
}, 1000);
};
</script>
</head>
<body>
<input type="button" name="name" value="請(qǐng)仔細(xì)閱讀5秒后點(diǎn)擊同意繼續(xù)" id="btn" disabled="disabled"/>
</body>
</html>
//--計(jì)時(shí)器
// 計(jì)時(shí)器ID號(hào) setInterval(回調(diào)函數(shù), 毫秒數(shù));
// 每隔指定毫秒數(shù)，調(diào)用一次回調(diào)函數(shù)
// clearInterval(計(jì)時(shí)器ID號(hào))
// 停止指定ID號(hào)的計(jì)時(shí)器(實(shí)際上是銷毀釋放資源了)
//--延時(shí)器
// 延時(shí)器Id號(hào) setTimeout(回調(diào)函數(shù), 毫秒間隔)
// 從調(diào)用開始，等待指定毫秒數(shù)后調(diào)用一次回調(diào)函數(shù)，結(jié)束
// 使用clearTimeout清除延時(shí)器
效果圖：
頁(yè)面打開后會(huì)出現(xiàn)下圖：之后按鈕value值每過1秒 數(shù)字減小1直至0停止 按鈕內(nèi)容變?yōu)橥?
實(shí)現(xiàn)代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn
{
width:200px;
height:50px;
background -color:gary;
}
</style>
<script type="text/javascript">
onload = function () {
//獲得該button對(duì)象
var btn = document.getElementById('btn');
//創(chuàng)建計(jì)時(shí)器 返回計(jì)時(shí)器ID
var intervalId = setInterval(function () {
var waitSecond = parseInt((/\d+/).exec(btn.value));//利用RegExp.exec（）方法，返回匹配的字符串內(nèi)容
waitSecond--;//時(shí)間--
if (waitSecond >= 0) {//判斷
btn.value=btn.value.replace(/\d+/, waitSecond) //利用string.repleace(RegExp,code)方法替換按鈕value中數(shù)字，并返回替換結(jié)果
} else {
btn.value = '同意';//將按鈕value值改為同意
btn.disabled = false;//將按鈕disabled值改為false
clearInterval(intervalId);//清除計(jì)時(shí)器
}
}, 1000);
};
</script>
</head>
<body>
<input type="button" name="name" value="請(qǐng)仔細(xì)閱讀5秒后點(diǎn)擊同意繼續(xù)" id="btn" disabled="disabled"/>
</body>
</html>
相關(guān)文章
巧用js提交表單輕松解決一個(gè)頁(yè)面有多個(gè)提交按鈕
使用js提交表單想必大家都會(huì)，如果要實(shí)現(xiàn)一個(gè)頁(yè)面有多個(gè)提交按鈕，你會(huì)嗎？下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-11-11
filemanage功能中用到的common.js...2007-04-04
通過JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
需要通過點(diǎn)擊某個(gè)元素后， 動(dòng)態(tài)創(chuàng)建一個(gè)DOM元素并顯示，因此寫了一些相關(guān)的js函數(shù)，在此記錄下2014-10-10
這篇文章主要介紹了使用apifm-wxapi模塊中的問題及講解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
本文主要分享了js三種生成隨機(jī)顏色方法代碼，具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了Boostrap popover用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
關(guān)于Promise 異步編程的實(shí)例講解
下面小編就為大家?guī)硪黄P(guān)于Promise 異步編程的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了bootstrap輪播圖示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
document.write()及其輸出內(nèi)容的樣式、位置控制
document.write（），用于簡(jiǎn)單的打印內(nèi)容到頁(yè)面上，可以逐字打印你需要的內(nèi)容，既然可以輸出變量，肯定會(huì)想要去控制下變量的顯示，比如位置以及樣式2013-08-08