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

微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js发送短信倒计时的简单实现方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> &l

  • JavaScript实现短信倒计时60s

    废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function(){ //获取验证码 var getCode = document.getElementById('getCode'); var wait = 60; function time(btn){ if (wait===0) { btn.removeAttribute("disabled"); btn.innerHTML = "获取验证码"; wait = 60; }else{ btn.setAt

  • js实现5秒倒计时重新发送短信功能

    本文实例讲述了js实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px; border: none

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • js实现短信发送倒计时功能（正则验证）

    js实现短信发送倒计时功能（正则验证）

    本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体内容如下 <div class="login"> <form action="" method="post"> <div class="login-box"> <p class="pho-0 pho"> <img class="" src="img/icon_

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • 微信小程序基于腾讯云对象存储的图片上传功能

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

  • 微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能.分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. 地图采用微信小程序提供的map组件: 2. 周

  • 微信小程序外卖选购页实现切换分类与数量加减功能案例

    微信小程序外卖选购页实现切换分类与数量加减功能案例

    本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图 实现以下功能 一. 点击分类项,切换右边的食品,并高亮自身 这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i

  • 微信小程序webview实现长按点击识别二维码功能示例

    本文实例讲述了微信小程序webview实现长按点击识别二维码功能.分享给大家供大家参考,具体如下: 场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> $(fu

  • 微信小程序实现用table显示数据库反馈的多条数据功能示例

    本文实例讲述了微信小程序实现用table显示数据库反馈的多条数据功能.分享给大家供大家参考,具体如下: 解决了微信小程序自定义表格,并显示的多条数据的问题. index.wxml <view> <text>我的调查问卷</text> <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex"> <view class="

  • 微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能.分享给大家供大家参考,具体如下: 微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{c

  • 微信小程序实现多选框全选与取消全选功能示例

    微信小程序实现多选框全选与取消全选功能示例

    本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11

  • 微信小程序本作用域下调用全局JS详解及实例

    微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"

  • 微信小程序提取公用函数到util.js及使用方法示例

    微信小程序提取公用函数到util.js及使用方法示例

    本文实例讲述了微信小程序提取公用函数到util.js及使用方法.分享给大家供大家参考,具体如下: 在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤: 1:在utils被调用的js文件中,面向对象的方式模型输出: module.exports={要调用的函数名称:要调用的函数名称 }; 2:在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址&quo

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

随机推荐