微信小程序+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. Springboot & Mybatis 构建restful 服务

    Springboot & Mybatis 构建restful 服务一 1 前置条件 jdk测试:java -version maven测试:命令行之行mvn -v eclipse及maven插 ...

  2. mysql第一课，数据库的简单简单操作方法（配图略虐狗）

    mysql -u root -p 并输入密码进入mysql管理界面 show databases; 显示数据库列表 use 数据库名; 进入该数据库 show tables;显示表列表 建立新表 添加 ...

  3. 计蒜客 2019 蓝桥杯省赛 B 组模拟赛（三）一笔画

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...

  4. ffmpeg 推流相关指令

    1.rtsp->rtsp(只解封装,不解码) ffmpeg -re -rtsp_transport tcp -i rtsp://usr:passwd@ip:port/h264/ch1/sub/a ...

  5. go 闭包

    看程序 package main import "fmt" func main() { f:=test2() fmt.Println(f()) fmt.Println(f()) } ...

  6. 我们的爬虫从pyspider开始说起（一）

    看各种爬虫文献也有好几天了,总是感觉下不了手,总结一句“提笔忘字,总是因为看的太多而写的太少”.所以从现在开始,把看到的想到的,需要总结的东西慢慢的都沉淀下来,扎扎实实的走好每一步. 先来说这几天遇到 ...

  7. JS求数组差集的几种方法

    第一种:如果不考虑IE8的兼容性完全可以使用Foreach ,此方法求出arr1 减去 arr2的差集, arr1 = [1,2,3,4];arr2 = [1,2,3]; var subSet = f ...

  8. C语言+嵌入式SQL+DB2开发经验总结

    1.使用DB2工具将SQC文件预编译成C文件和bnd文件. 命令: db2 prep ***.sqc version * package using * bindfile BLOCKING ALL I ...

  9. 不适合使用hadoop来解决的问题

    1.Hadoop能解决的问题必须是可以mapreduce的.一是问题可以拆分,二是子问题必须独立.比如斐波那契数列就不适合. 2.数据结构不满足key-value形式的.比如结构化的数据查询. 3.不 ...

  10. 当GDPR来敲门，中国互联网企业该如何应对？

    本文来自 网易云社区 . 欧盟<通用数据保护条例>(General Data Protection Regulation,GDPR)已于2018年5月25日正式生效,谷歌.Facebook ...