页面按钮禁用与解除禁用

 计时器和延时器的概念

            //--计时器
            // 计时器ID号 setInterval(回调函数, 毫秒数);
            // 每隔指定毫秒数,调用一次回调函数

            // clearInterval(计时器ID号)
            // 停止指定ID号的计时器(实际上是销毁释放资源了)
            
            //--延时器
            // 延时器Id号 setTimeout(回调函数, 毫秒间隔)
            // 从调用开始,等待指定毫秒数后调用一次回调函数,结束
            // 使用clearTimeout清除延时器

效果图:

页面打开后会出现下图:之后按钮value值每过1秒 数字减小1直至0停止 按钮内容变为同意

  

实现代码:

<!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对象
            var btn = document.getElementById('btn');
            //创建计时器  返回计时器ID
            var intervalId = setInterval(function () {
                var waitSecond = parseInt((/\d+/).exec(btn.value));//利用RegExp.exec()方法,返回匹配的字符串内容
                waitSecond--;//时间--
                if (waitSecond >= 0) {//判断  
                    btn.value=btn.value.replace(/\d+/, waitSecond)  //利用string.repleace(RegExp,code)方法替换按钮value中数字,并返回替换结果
                } else {
                    btn.value = '同意';//将按钮value值改为同意
                    btn.disabled = false;//将按钮disabled值改为false
                    clearInterval(intervalId);//清除计时器
                }

            }, 1000);

        };
    </script>
</head>
<body>
    <input type="button" name="name" value="请仔细阅读5秒后点击同意继续"  id="btn" disabled="disabled"/>
</body>
</html>
posted @ 2014-02-19 10:29  Dream_It_Possible  阅读(734)  评论(0编辑  收藏  举报