微信小程序+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. Java实现产生一个int数组，长度为100，并向其中随机插入1-100，并且不能重复。

    public static void main(String[] args){ //创建一个int数组,长度为100, int n = 100; int[] arrayInt = new int[n] ...

  2. C++ 中利用 Opencv 得到不规则的ROI 区域(已知不规则区域)

    因为需要,之前写了一个利用mask 得到不规则ROI 区域的程序. 现在需要修改,发现自己都看不懂是怎么做的了.. 所以把它整理下来. 首先利用 鼠标可以得到 你想要的不规则区域的 顶点信息.具体这里 ...

  3. W7500S2E串口转以太网

    概述 W7500S2E是一系列串口转以太网模块,支持TCP Server.TCP Client和UDP三种工作模式,串口波特率最高可达460,800bps,并提供配套的上位机配置软件,也可通过网页或A ...

  4. [少数派]如何学习Git

    用玩游戏的方式学习 Git 目录 为什么要学习 Git 怎么学习 Git Learn Git Branching 其他学习资源 用游戏的方式来学习,是一种有趣而高效的方式. 从刚接触电脑时的打字练习软 ...

  5. Mac OS mysql数据库安装与初始化

    一.官网下载mysql 二.安装并启用 三.数据库初始化 192:bin zhuyajing$ ./mysql -u root -p Enter password: Welcome to the My ...

  6. php 批量下载文件

    public function batchDownload() { $filename = 'tmp.zip'; $zipName = date('YmdHi') . '.zip'; $files = ...

  7. Unity编辑器扩展-Custom List, displaying data your way

    本文转自http://catlikecoding.com/unity/tutorials/editor/custom-list/ Custom List, displaying data your w ...

  8. 华为云服务器为Tomcat配置SSL

    近期由于开发小程序需要在云服务器上配置https访问协议,也遇到了一点小问题,把配置过程记录一下:SSL 证书申请下来之后会有 .jks .crt .pfx .pem为后缀的文件(如何申请SSL证书这 ...

  9. oracle远程连接服务器数据库

    oracle远程连接数据库,需要配置本地服务,具体步骤如下: 1. 2.添加新的服务 3.输入服务名(例如:orcl3即服务器数据库名) 4.选择TCP协议 5.输入服务器IP(192.268.10. ...

  10. app -webkit-box-orient: vertical 打包后不显示

    先说明问题是什么: -webkit-box-orient: vertical 这个属性在本地运行调试是存在的,但是打包后这个属性消失了: 解决办法: 1.将-webkit-box-orient: ve ...