<!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,没问题,返回了丨

js实现发送验证码倒计时效果的更多相关文章

  1. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  2. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  3. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  4. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  5. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  6. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  7. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

  8. 手机验证 发送验证码倒计时js

    html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...

  9. 倒计时,短信发送后倒计时效果js

    <div class="input-group-addon"><a style="width: 100%;height: 100%" href ...

随机推荐

  1. LeetCode 20. 有效的括号(Valid Parentheses)

    20. 有效的括号 20. Valid Parentheses 题目描述 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须 ...

  2. LeetCode 50. Pow(x, n) 12

    50. Pow(x, n) 题目描述 实现 pow(x, n),即计算 x 的 n 次幂函数. 每日一算法2019/5/15Day 12LeetCode50. Pow(x, n) 示例 1: 输入: ...

  3. 修改织梦DedeCMS投票漏洞

    织梦/dedecms系统我们都知道是有很多漏洞的,我在调试投票功能的时候正好要用到投票功能,这不就出现了漏洞,下面我就给大家展示如何修复这个织梦投票漏洞 首先我们打开//dedevote.class. ...

  4. k8s 证书反解

    k8s证书反解 1.将k8s配置文件(kubelet.kubeconfig)中client-certificate-data:内容拷贝 2.echo "client-certificate- ...

  5. 机器学习之Adaboost与XGBoost笔记

    提升的概念 提升是一个机器学习技术,可以用于回归和分类问题,它每一步产生一个弱预测模型(如决策树),并加权累加到总模型中:如果每一步的弱预测模型生成都是依据损失函数的梯度方向,则称之为梯度提升(Gra ...

  6. vue项目过程的理解： main.js文件理解 router.js文件理解 以及组件 路由 等之间的关系

    https://blog.csdn.net/qq_26229005/article/details/85040393 内容太多了,有空再整理

  7. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

  8. 在论坛中出现的比较难的sql问题：23(随机填充问题)

    原文:在论坛中出现的比较难的sql问题:23(随机填充问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必要记录下 ...

  9. mysql8.0入坑体验

    正常从官网下载,并且正常安装,直到安装完成.然后用navicate连接,发现报错信息如下所示Client does not support authentication protocol reques ...

  10. html中标签的英文含义！

    html中的标签缩写的英文是什么?  标签  英文全称  含义 ul unordered lists 无序列表 li list item 列表项目 ol ordered lists 有序列表 dl d ...