zoukankan      html  css  js  c++  java
  • 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变
    ②有倒计时(一般为30秒)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>pro.html</title>
    <style type="text/css">
    .checkCode {
        cursor: pointer;
        border: 1px solid black;
        text-align: center;
        line-height: 26px;
         115px;
        height: 35px;
    }
    </style>
    <script type="text/javascript">
        var sleep = 30, interval = null;
        window.onload = function ()
        {
            var btn = document.getElementById ('btn');
            btn.onclick = function ()
            {
                if (!interval)
                {
                    this.style.backgroundColor = 'rgb(243, 182, 182)';
                    this.disabled = "disabled";
                    this.style.cursor = "wait";
                    this.value = "重新发送 (" + sleep-- + ")";
                    interval = setInterval (function ()
                    {
                        if (sleep == 0)
                        {
                            if (!!interval)
                            {
                                clearInterval (interval);
                                interval = null;
                                sleep = 30;
                                btn.style.cursor = "pointer";
                                btn.removeAttribute ('disabled');
                                btn.value = "免费获取验证码";
                                btn.style.backgroundColor = '';
                            }
                            return false;
                        }
                        btn.value = "重新发送 (" + sleep-- + ")";
                    }, 1000);
                }
            }
        }
    </script>
    </head>
    <body>
        <input class="checkCode" type="button" id="btn" value="免费获取验证码" />
    </body>
    </html>
  • 相关阅读:
    cesium入门示例-矢量化单体分类
    cesium入门示例-3dTiles加载
    cesium入门示例-geoserver服务访问
    cesium入门示例-HelloWorld
    java中函数传值与引用问题
    jni使用问题总结
    geoserver源码学习与扩展——增加服务接口
    go-ipfs入门及介绍
    安装GoMap
    Gogeos安装
  • 原文地址:https://www.cnblogs.com/package-java/p/10767517.html
Copyright © 2011-2022 走看看