微信小程序+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. dubbo入门学习 五 provider端的编写

    1. 新建Maven Project, 里面只有接口(dubbo-service) 1.1 为什么这么做? RPC框架,不希望Consumer知道具体实现.如果实现类和接口在同一个项目中,Consum ...

  2. Startls Back 引起的 win10升级之后的闪屏问题

    win10 更新之后出现闪频问题. 有人说是和startls back 有关,需要卸载startls back, 但是进入安全模式下显示此 程序无法打开,无法卸载. 后来看到有人更新到startls ...

  3. JS中的instanceof和typeof，以及特殊引用类型

    1.instanceof是用于测试对象类型,通常格式为:a instanceof b,返回true或falise,表示为对象a是否是类型b的实例. typeof则是用于测试基本类型,包括undefin ...

  4. php中的问题整理

    1.什么是 CSRF 攻击 ?XSS 攻击?如何防范? CSRF,跨站请求伪造,攻击方伪装用户身份发送请求从而窃取信息或者破坏系统.讲述基本原理:用户访问A网站登陆并生成了cookie,再访问B网站, ...

  5. JQuery跳出each循环的方法

    一.jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; 二.jquery怎么跳出当 ...

  6. PHP PDO预定义常量

    以下常量由本扩展模块定义,因此只有在本扩展的模块被编译到PHP中,或者在运行时被动态加载后才有效. 注意: PDO使用类常量自PHP 5.1.以前的版本使用的全局常量形式PDO_PARAM_BOOL中 ...

  7. hbase单机版安装+phoneix SQL on hbase 单节点安装

    hbase 单机安装部署及phoneix 单机安装 Hbase 下载 (需先配置jdk) https://www.apache.org/dyn/closer.lua/hbase/2.0.1/hbase ...

  8. Ubuntu 16.04更新grub-pc提示脚本/var/lib/dpkg/info/grub-pc.postinst 执行错误

    错误信息: $ sudo aptitude upgrade 下列仅部分安装的软件包将被配置: grub-pc 将不会安装,升级或者删除任何软件包. 0 个软件包被升级,新安装 0 个, 0 个将被删除 ...

  9. war包远程部署访问不到问题解决过程总结

    项目完成后,先在本地ide测,用ide集成的tomcat,顺理发布,访问,然后放本地tomcat的webapp文件夹,顺理启动,访问,再放远程阿里云的tomcat的webapp文件夹,重启tomcat ...

  10. python Descriptor (描述符)

    简介: python 描述符是新式类(继承自object)中的语言协议,基于描述符可以提供更佳优雅的解决方案. python的classmethod, staticmethod, property都是 ...