1、效果图：

2、页面仅仅利用了JS的相关功能，包含：wxml、js、wxss

2.1wxml页面代码：

<text>绑定手机</text>

<form bindsubmit="bindMobile">

<view class="form_group">

        <text>手  机：</text>

        <input type="number" placeholder="请输入手机号" maxlength="11" name="data_phone" value="" auto-focus="true" bindblur="blur_mobile" />

        <button type="button" class="{{is_show?'show':'hide'}}" bindtap="clickVerify">获取验证码</button>

        <button type="button" class="{{is_show?'hide':'show'}}">重新发送{{last_time}}秒</button>

    </view>

<input type="number" placeholder="请输入验证码" maxlength="6" name="data_verify" value=""/>

<button class="save_btn" form-type="submit">确认绑定</button>

</form>

2.2 js页面代码：

var countdown = 60;

var settime = function (that) {

  if (countdown == 0) {

    that.setData({

      is_show: true

    })

    countdown = 60;

    return;

  } else {

    that.setData({

      is_show:false,

      last_time:countdown

    })

    countdown--;

  }

  setTimeout(function () {

    settime(that)

  }

    , 1000)

}

Page({

  /**

   * 页面的初始数据

   */

  data: {

    last_time:'',

    is_show:true

  },

  clickVerify:function(){

    var that = this;

 // 将获取验证码按钮隐藏60s，60s后再次显示

      that.setData({

        is_show: (!that.data.is_show)   //false

      })

      settime(that);

  }

})

2.3 wxss页面代码：

/* 发送验证码按钮隐藏，并展示倒数60s提示 */

.hide{

 display: none;

}

.show{

 display: block;

}

3、上面讲的是微信小程序的，那么我们一般web端或者移动端的应该是什么样呢？

其实，方法都差不多，这里也贴出来仅供大家参考

<!-- 这段代码(html)是从脚本之家挪过来的，信誉度应该是很高的，大家可以放心使用 -->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

var countdown=60;

function settime(obj) {

if (countdown == 0) {

obj.removeAttribute("disabled");

obj.value="免费获取验证码";

countdown = 60;

return;

} else {

obj.setAttribute("disabled", true);

obj.value="重新发送(" + countdown + ")";

countdown--;

}

setTimeout(function() {

settime(obj) }

,1000)

}

</script>

<body>

<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

</body>

</html>

原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能的更多相关文章

  1. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  2. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  3. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  4. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  5. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  6. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  7. 微信小程序结合原生JS实现电商模板（二）

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  8. 微信小程序一键生成源码 在线制作定制功能强大的微信小程序

    微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...

  9. 1_python小程序之实现用户的注册登陆验证功能

    python小程序之实现用户的注册登陆验证功能 程序扼要简述:  一.程序流程:1.程序开始2.判断本地文件/数据库是否已存在用户信息,存在则跳转到登陆,否则跳转到注册,注册成功后后跳转到登陆3.判断 ...

随机推荐

  1. docker Redis的主从配置

    redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member:score的散列集合,其中member为成员 ...

  2. 简明python教程 --C++程序员的视角（七）：异常

    当你的程序中出现某些 异常的 状况的时候,异常就发生了.例如,当你想要读某个文件的时候,而那个文件不存在.或者在程序运行的时候,你不小心把它删除了.上述这些情况可以使用异常来处理. 假如你的程序中有一 ...

  3. 使用自由软件Icarus Verilog Simulator进行仿真

    Icarus Verilog Simulator(http://iverilog.icarus.com/home)使用iverilog作为源代码编译器,编译生成vvp程序文本,使用vvp作为运行时引擎 ...

  4. OpenCV学习(16) 细化算法(4)

    本章我们学习Rosenfeld细化算法,参考资料:http://yunpan.cn/QGRjHbkLBzCrn 在开始学习算法之前,我们先看下连通分量,以及4连通性,8连通性的概念: http://w ...

  5. 我也用github（2）——关联本地工程到github仓库

    github只是为我们提供了一个存储的功能,我们也可以准备一个服务器(当然,能联网是前提了),将版本库保存到服务器上. 本文以github为例进行实验. 1. 在github上创建一个仓库 这个非常简 ...

  6. NLP 依存分析

    NLP 依存分析 https://blog.csdn.net/sinat_33741547/article/details/79258045

  7. 第一章 mac下开发环境的配置

    mac系统与Linux系统差不多,但是与windows系统版本非常不同. 1.jdk 安装与卸载:https://docs.oracle.com/javase/8/docs/technotes/gui ...

  8. IOS基本数据类型之枚举

    枚举是C语言中的一种基本数据类型,通过枚举可以声明一组常数,来代表不同的含义,它实际上就是一组整型常量的集合. 枚举是非常常用的一种类型,在现实生活中也很常见.比如有四个季节,在不同的季节需要显示不同 ...

  9. Effective C++ Item 43 学习处理模板化基类内的名称

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:可在derived class templates 内通过 "this-&g ...

  10. 如何在Linux上面安装GCC 4.1.2

    安装步骤: 1.首先下载GCC 4.1.2的source code package: $ wget http://mirrors.ustc.edu.cn/gnu/gcc/gcc-4.1.2/gcc-4 ...