`

延时生效的按钮

HTML
阅读更多
转载：
延时生效的按钮经常在网站注册过程中使用到，其作用主要是为了让用户停留几秒，仔细阅读该网站必须遵守的协议。
基本思路：最初按钮不可用，每隔1秒更改一次按钮的文字，提示剩余时间，当到达指定的时间时，将按钮的状态改为可用（disabled=false）。 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        
        var remain =10;
        function init(){
            $("btn").innerHTML = "提交("+(remain--)+"秒)";
            if(remain>0){
                window.setTimeout(init,1000);
            }
            else{
                $("btn").disabled = false;
                $("btn").innerHTML = "提交";
            }    
        }
        </script>
    </head>
    <body onload="init()">
        <button id="btn" disabled="disabled" >提交</button>
    </body>
</html>
分享到：
| Javascript中最常用的55个经典技巧[转]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C# Winform可长按延时触发事件的按钮控件

    对应文章地址在https://blog.csdn.net/mazhiyuan1981/article/details/121286666

    JS控制按钮10秒钟后可用的方法

    在网页开发中，常常需要控制按钮的可用状态，以满足特定的业务逻辑。例如，防止用户过于频繁地点击按钮，或者需要等待某些操作（如数据验证或异步请求）完成后再启用按钮。本文将详细介绍如何使用JavaScript来实现...

    在ACCESS定时刷屏窗体内实现提示窗体延时自动关闭功能的方法.docx

    通过这种方式，我们确保了在弹出提示窗体时，定时器暂停，从而允许`Popup`函数的延时关闭功能生效。在提示窗体关闭后，定时器重新启动，继续执行定时刷屏的功能。 总结来说，要实现Access定时刷屏窗体的提示窗体...

    PLC系统设计-关断延时定时器.pptx

    在操作过程中，当外部输入i0.2（例如一个按钮SB1）被按下并保持时，关断延时定时器的输出Q（这里假设为Q0.1）变为1状态，即输出被激活。一旦松开按钮SB1，定时器开始计时，其当前时间从0开始逐渐增加。当当前时间...

    DS6-K5B计算机联锁系统操作规程宣贯.pdf

    - 结束操作：非自复式和延时抬起按钮应恢复抬起状态。 3. 排列进路： - 使用鼠标依次点击进路的始端和终端信号按钮，变更进路则需点击变更按钮。 - 通过按钮简化正向通过进路的办理。 4. 总取消与总人解： - ...

    倒计时10秒后关闭当前窗口

    如果该窗口是用户直接打开的，使用`window.close()`可能不会生效，因为浏览器出于安全原因可能会阻止这种行为。 描述中提到的“博文链接：https://kinyum-li.iteye.com/blog/718776”可能提供了更详细的实现方式...

    灵者Gif录制_v1.0

    Gif动画的原理是：将多张图片（帧）捆绑在一起，然后设定每张图片停留的时间（帧延时，也称帧速），播放器根据前后顺序和预定的每帧切换时间就可以播放动态图像啦——简单的说，Gif动画是将多张图片有机结合在一起而...

    自锁电路图怎么接线图

    例如，在电动机启动后，我们可能需要在一定时间后自动停止电动机，这时就可以使用时间继电器来实现延时断电功能，通过时间继电器的辅助触点来切断接触器线圈的电源。 需要注意的是，在接线过程中，电路的正确性和...

    Idea配置热部署的实现步骤

    1. Idea 热部署并非绝对实时，还是会有延时的，假如你手速快的话可能会出现改了并没有马上生效。 2. 可以点击下图标注的按钮，或者使用快捷键 Ctrl + F10 使热部署生效。 3. 如果您想马上生效，可以在 application....

    单片机实践-STC-ISP下载软件的使用.pptx

    - **软件延时计算器**：根据单片机工作频率和需要的延时时间，生成延时函数，用于实现精确的程序延时。 - **头文件生成**：可以为所有STC系列单片机生成相应的头文件，头文件包含了单片机的宏定义和函数声明，方便...

    采集器升级及远程修改IP地址操作说明参考.pdf

    如果返回数据有延时，说明设备与测试工具之间建立了有效的通信。 3. **获取设备信息**：点击“设备信息”，验证数据返回正常，并查看当前软件版本。如果显示为V1.2，表示需要进行升级。 4. **选择升级项**：在...

    解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    例如，可以设置延时为100毫秒，然后在延时结束后执行初始化函数。 2. 对img标签进行块级化并设置宽高占位。在图片实际加载前，我们可以通过CSS将img标签设置为块级元素，并预先设定一个宽高。这样在图片加载完成...

    思科WAP4410N 设置步骤

    完成以上步骤后，记得保存配置并重启设备，以使新设置生效。这样，您的思科WAP4410N无线接入点就能提供稳定、安全且高效的网络服务了。请根据实际情况调整设置，确保与您的网络需求和安全策略相匹配。

    简易电脑定时关机工具

    3. **确认与保存**：设置完成后，记得点击“保存”或“确定”按钮，这样设定的定时关机就会生效。部分软件可能还需要你确认是否立即开始计时。 4. **取消定时**：如果需要取消已经设置的定时关机，一般在软件主界面...

    vant-ui组件调用Dialog弹窗异步关闭操作

    需求描述： 需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，...

    在裸奔2440时候遇到的GPIO郁闷问题

    当作者清除某个GPIO位（例如通过`s2440IOP-&gt;GPFDAT &=0xFB`来清零bit[2]）后，如果没有添加适当的延迟（如`mdelay(1)`），操作似乎并未生效。只有在加入延时函数之后，GPIO的状态才会正确更新。作者还发现，将两个位...

    【用18B20温度控制板介绍GD32F330单片机 （六）-新增阈值温度选择功能】

    为此，我们可以在软件中添加一个用户友好的界面，允许用户通过按钮或触摸屏实时更改阈值。这些新的阈值将被更新到内存中，并立即生效。 此外，为了防止温度快速变化导致频繁的报警，还可以引入一个延时机制。例如，...

    无线干扰解决办法

    需要注意的是，在更改频率后，必须点击APPLY按钮保存设置，并重启设备以使新的频率设置生效。 2. **排除连接问题**：确保设备在直连条件下没有任何丢包现象，PING包延时小于1ms。如果存在丢包或延时问题，则可能是...

Magicbox
Global site tag (gtag.js) - Google Analytics