zoukankan      html  css  js  c++  java
  • 页面按钮禁用与解除禁用

     计时器和延时器的概念

                //--计时器
                // 计时器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
        {
            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>
  • 相关阅读:
    127. Word Ladder(单词变换 广度优先)
    150. Evaluate Reverse Polish Notation(逆波兰表达式)
    32. Longest Valid Parentheses(最长括号匹配,hard)
    20. Valid Parentheses(括号匹配,用桟)
    递归桟相关
    python编写计算器
    python打印9宫格,25宫格等奇数格,且横竖斜相加和相等
    基于百度人工智能图片识别接口开发的自动录题系统
    自动收集有效IP代理
    python数据储存
  • 原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213781.html
Copyright © 2011-2022 走看看