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. Maven实战（四）——基于Maven的持续集成实践

    Martin的<持续集成> 相信非常多读者和我一样.最早接触到持续集成的概念是来自Martin的著名文章<持续集成>.该文最早公布于2000年9月,之后在2006年进行了一次修 ...

  2. 如何使用C++回调函数

         程序猿经常须要实现回调.本文将讨论函数指针的基本原则并说明怎样使用函数指针实现回调.注意这里针对的是普通的函数,不包含全然依赖于不同语法和语义规则的类成员函数(类成员指针将在另文中讨论). ...

  3. JDBC结合JSP使用（1）

    1. 添加数据 在jsp页面中添加数据,和在serv中添加数据相似.获得页面中提交的数据以后,把数据保存到数据库表中,JSP的代码如下: add.jsp <%@ page language=&q ...

  4. oracle和mysql功能相同的函数

    wm_concat ---->mysql 的group_concat decode (两条件的)----->mysql 的 if decode (3个及以上条件的)---------> ...

  5. 以太网帧、IP报文格式

    这几天完成一个对比以太网帧的程序(c语言),老师给了以太网帧头部和IP报文头部的结构体,跟实际抓取到的数据包的格式是相同的. 以太网帧头部的数据结构: typedef struct { unsigne ...

  6. Node.js中的HTTPS示例

      需要openssl的支持, openssl本身不提供windows的安装程序,可以按照如下的步骤进行安装: (参考https://conetrix.com/Blog/how-to-install- ...

  7. [Backbone]7. Collection Views, Custom Events

    It's finally time to start building out our Appointment app. We're going to be using a collection an ...

  8. ufldl学习笔记与编程作业：Softmax Regression(vectorization加速)

    ufldl学习笔记与编程作业:Softmax Regression(vectorization加速) ufldl出了新教程,感觉比之前的好.从基础讲起.系统清晰,又有编程实践. 在deep learn ...

  9. 火狐浏览器FireFox 如何将整个网页保存为图片

    使用Friefox的Pearl Cresent Page Saver插件 如图所示网页有很长的滚动条 点击右下角的该插件选项,将整个页面保存为图片 在桌面上得到了这样一个文件,大小是1263×6083 ...

  10. 上传的文件放在SVN服务器的哪个目录下

    SVN服务器版本库有两种格式,一种为FSFS,一种为BDB 把文件上传到SVN版本库后,上传的文件不再以文件原来的格式存储,而是被svn以它自定义的格式压缩成版本库数据,存放在版本库中. 如果是FSF ...