<!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 94. 二叉树的中序遍历(Binary Tree Inorder Traversal)

    94. 二叉树的中序遍历 94. Binary Tree Inorder Traversal 题目描述 给定一个二叉树,返回它的 中序 遍历. LeetCode94. Binary Tree Inor ...

  2. 031 Android 自定义控件

    1.自定义控件的优点 Android自身带的控件不能满足需求, 需要根据自己的需求定义控件. 2.自定义控件的分类: (1)组合已有的控件实现 (2)继承已有的控件实现(扩展已有的功能) (3)完全自 ...

  3. Java基础笔试练习（五）

    1.以下关于Integer与int的区别错误的是? A.int是java提供的8种原始数据类型之一 B.Integer是java为int提供的封装类 C.int的默认值为0 D.Integer的默认值 ...

  4. golang之文件结尾错误（EOF）

    函数经常会返回多种错误,这对终端用户来说可能会很有趣,但对程序而言,这使得情况变得复杂.很多时候,程序必须根据错误类型,作出不同的响应.让我们考虑这样一个例子:从文件中读取n个字节.如果n等于文件的长 ...

  5. 09 IO流（六）——ByteArray字节流、流对接

    字节数组流 ByteArray流是节点流. 前面讲到的文件字节流,文件字符流,他们的源都是来自于pc硬盘. 本节要讲的字节数组流的源是来自于内存或网络. 它更合适用来处理来自网络的字节流. 由于源并不 ...

  6. WSL部署记录

    1. 管理员打开PowerShell,开启WSL功能: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Sub ...

  7. 2、C语言实现通讯录

    main函数入口: //test.c #include<stdio.h> #include<stdlib.h> #include<string.h> #includ ...

  8. Android Manifest 中 uses-feature 和 uses-permission的作用 关系和区别

    Manifest中的 <uses-permission android:name="android.permission.CAMERA" /> 和 <uses-f ...

  9. SSM整合所需的maven配置文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  10. 使用Jenkins编译打包SpringCloud微服务中的个别目录

    意义说明: 使用Jenkins从Gogs拉取SpringCloud微服务,拉取的是整个仓库的内容,分好多个模块文件夹,但是使用maven编译打包的话只编译打包指定的模块文件夹 Gogs Webhook ...