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

1.wxml页面代码：

<text>绑定手机</text>

<form bindsubmit="bindMobile">

<view class="form_group">

    <text>手 机：</text>

    <input type="number" placeholder="请输入手机号" maxlength="" 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="" name="data_verify" value=""/>

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

</form>

2. js页面代码：

var countdown = ;

var settime = function (that) {

 if (countdown == ) {

  that.setData({

   is_show: true

  })

  countdown = ;

  return;

 } else {

  that.setData({

   is_show:false,

   last_time:countdown

  })

  countdown--;

 }

 setTimeout(function () {

  settime(that)

 }

  , )

}

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);

 }

})

3 .wxss页面代码：

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

.hide{

 display: none;

}

.show{

 display: block;

}

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

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

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

<script type="text/javascript">

var countdown=;

function settime(obj) {

if (countdown == ) {

obj.removeAttribute("disabled");

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

countdown = ;

return;

} else {

obj.setAttribute("disabled", true);

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

countdown--;

}

setTimeout(function() {

settime(obj) }

,)

}

</script>

<body>

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

</body>

</html>

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

微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能的更多相关文章

  1. 微信小程序实战篇：基于wxcharts.js绘制移动报表

    前言 微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. ...

  2. mpvue微信小程序http请求终极解决方案-fly.js

    fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...

  3. 如何在微信小程序的模板渲染中使用JS？

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  4. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  5. 微信 小程序组件 加入购物车全套 one js

    // pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../. ...

  6. 微信小程序开发者注册流程

    一,首先打开浏览器,搜索微信公众平台 点击进入,此时还没有注册微信小程序开发账号,我们需要点击注册 进入注册页面,会出现四种账号,我们选择小程序账号 然后根据提示就可以进行注册了 注册时,需填写一下个 ...

  7. 微信小程序调用蓝牙功能控制车位锁

    第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  10. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

随机推荐

  1. HttpHelpers类普通GET和POST方式，带Cookie和带证书验证模式

    HttpHelpers类普通GET和POST方式,带Cookie和带证书验证模式 参考路径:https://www.cnblogs.com/splendidme/archive/2011/09/14/ ...

  2. 异常:No Spring WebApplicationInitializer types detected on classpath

    原因: 启动服务提供者/服务消费者-->去注册中心Zookeeper无法注册这个服务 / 在监控中心无法发现服务 异常提示:No Spring WebApplicationInitializer ...

  3. python线程——创建和启动

    可以通过实例化一个threading.Thread()对象来创建子线程. import threading import time def listen_music(num): print(" ...

  4. （转）pycharm常用快捷键

    Alt+Enter 自动添加包Ctrl+t SVN更新Ctrl+k SVN提交Ctrl + / 注释(取消注释)选择的行Ctrl+Shift+F 高级查找Ctrl+Enter 补全Shift + En ...

  5. python data science handbook1

    import numpy as np import matplotlib.pyplot as plt import seaborn; seaborn.set() rand = np.random.Ra ...

  6. python 二分查找法

    @source_data:数据集 @binary_num:要查找的数 @mid:中间数的键值 def binary_search(source_data,search_num): #传入数据集计算中间 ...

  7. 笔记：Zygote和SystemServer进程启动过程

    简述 Android设备启动过程中,先是Linux内核加载完,接着Android中的第一个进程init启动,它会启动一些需要开机启动的进程. Zygote就是进程init启动起来的.Android中所 ...

  8. Android Tools 开发工具库开源项目总结

    在Android开发中,我们不免会遇到使用一些工具库来简化我们的工具代码的编写,以下是本人之前star的开源项目,供大家参考: 一.android_testsuite 项目地址:https://git ...

  9. Eclipse 启动报错 An internal error occurred during: "Initializing Java Tooling"

    如图所示,我的Eclispe版本是Oxygen,启动的时候turnaround弹出这种错误. 多种情况会导致这种报错.通过[重置窗口布局],可解决大部分情况: 解决办法:点击菜单导航栏的Window ...

  10. Java面试集合（四）

    1. jdk,jre,jvm之间的关系 JVM是Java虚拟机,是Java跨平台的重要保障,JVM实现Java跨平台的前提,可以针对不同的操作系统,有不同的JVM. 可以说Java语言是跨平台的,但J ...