微信小程序+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. c#串口测试

    软件和代码网盘下载 https://pan.baidu.com/s/1dFrE1pv#list/path=%2F SerialPort 类 https://msdn.microsoft.com/zh- ...

  2. C语言闰年问题程序框图

    判定2000-2500年中的每一年是否为闰年,并将结果输出. 先分析闰年成立条件: 1)能被4整除,但不能被100整除的年份都是闰年: (2)能被400整除的年份是闰年: #include<st ...

  3. Flink 报错 "Could not find a suitable table factory for 'org.apache.flink.table.factories.StreamTableSourceFactory' in the classpath"

    先上代码: table = tablexx.select('*).tablexx.groupBy('x).select('x, xx.count ) tableEnvironment // decla ...

  4. SimpleCursorAdapter使用代码

    package com.kale.cursoradapter; import android.app.Activity; import android.database.Cursor; import ...

  5. 学习Python第五天

    今天咱们讲一下元组,hash,字典,元组是数据类型其中之一 元组的特性为有序的,不可变的,但是如果其中有可变元素,这些可变元组还是可以改变的,代码如下: 元组的写法:name = (‘roy’,‘al ...

  6. JavaScript复习笔记——数据类型

    1.undefined 使用var声明但未对其进行初始化时,这个变量的值就是undefined. 对未被初始化的值使用typeof会返回undefined值,而对未声明的变量执行typeof操作同样也 ...

  7. 利用 awk 统计nginx 中某一个用户的访问次数

    线上总是会遇到攻击,所以就需要分析 access.log 看看那些用户的访问次数不正常,针对这些不正常的用户,要做处理,以 access.log为例说明下怎么统计. 通过 access.log 日志来 ...

  8. JS全局变量与局部变量

    一句话概括:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; function test1() { var a = 2; al ...

  9. 深入-FastReport TfrxReport组件使用

    [翻译] FastReport TfrxReport组件使用   一:加载和保存报表 报表默认保存在项目窗体文件中,大多数情况下,没有更多的操作要深圳市, 因此,你不需要采取特别措施来载入报告.如果你 ...

  10. Redis-08.命令参数详解

    1. redis-cli -r(repeat)选项代表江命令执行多次 # 执行3次ping命令 redis-cli -r 3 ping -i(interval)选项代表每个几秒执行一次命令(必须和-r ...