页面按钮禁用与解除禁用

来源：互联网发布：python爬虫项目知乎编辑：程序博客网时间：2024/05/20 23:05

计时器和延时器的概念

            //--计时器
            // 计时器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>

0 0