• js实现发送验证码倒计时效果


    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #btnyzm {
        background: #31BCFF;
        color: #fff;
        font-size: 14px;
        padding: 0;
        line-height: 43px;
        border-radius: 0;
        border: 0;
        width: 50%;
    }
    .btn_com:disabled {
        background-color: #999999 !important;
    }
        </style>
    </head>
    <body>
        <input type="button" class="btn_com" id="btnyzm" value="发送验证码">
    <script type="text/javascript">
            var wait=60;
            function time(o) {
                if (wait == 0) {
                    o.removeAttribute("disabled");
                    o.value="发送验证码";
                    wait = 60;
                } else {
                    o.setAttribute("disabled", true);
                    o.value="(" + wait + ")后可重新发送";
                    wait--;
                    setTimeout(function() {
                        time(o)
                    }, 1000)
                }
            }
            document.getElementById("btnyzm").onclick=function(){time(this);}
    
    
           
        </script>
    
    </body>
    </html>

    效果实现图

    补充重点:

    实现过程中发现pc和安卓手机上完美显示,但是iphone上却毫无反应,甚至没有任何波澜。(或者想告诉我它是多么的高冷?)

    定位代码,发现问题出现在时间处理的方式上:

    为了比较两个时间点的大小和控制距离,我用new Date().getTime()来获取毫秒数,比较毫秒数。

    2012-2-22 06:23 这是我得到的时间格式,理所当然

    new Date("2012-2-22 06:23 ").getTime();这样得到就是所指定时间的毫秒数,完美!

    嗯,在pc上和安卓手机上一切正常,但是iphone上告诉我-----invalid Date

    new Date("2012-2-22 06:23 ")返回的是invalid Date

    难道是不支持这种日期格式?于是我就改为new Date("2012/2/22 06:23 "),

    可以,很强。返回了正确的对象。                              

    于是我试着这样   new Date("2012","2","22","06","23"),ok,没问题,返回了正确的对象。

    这样 new Date(2012/2/22),ok,没问题,返回了丨

  • 相关阅读:
    LeetCode Array Easy 1. Two Sum
    关于VS2015 发布.net mvc 网站失败的问题
    2016计蒜之道复赛 百度地图的实时路况 floyd+cdq分治
    2016计蒜之道复赛 菜鸟物流的运输网络 网络流EK
    HDU5715 XOR 游戏 二分+字典树+dp
    HDU5697 刷题计划 dp+最小乘积生成树
    codeforces 687D Dividing Kingdom II 带权并查集(dsu)
    codeforces 687C
    codeforces 687B
    HDU 5693 D Game 区间dp
  • 原文地址:https://www.cnblogs.com/li-sir/p/7885128.html
Copyright © 2020-2023  润新知