微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能


Posted in Javascript onAugust 16, 2017

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

1、效果图: 

 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

2、页面仅仅利用了JS的相关功能,包含:wxml、js、wxss 

2.1wxml页面代码:

<text>绑定手机</text>
<form bindsubmit="bindMobile">
<view class="form_group">
  <text>手 机:</text>
  <input type="number" placeholder="请输入手机号" maxlength="11" 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="6" name="data_verify" value=""/>
<button class="save_btn" form-type="submit">确认绑定</button>
</form>

2.2 js页面代码:

var countdown = 60;
var settime = function (that) {
 if (countdown == 0) {
 that.setData({
  is_show: true
 })
 countdown = 60;
 return;
 } else {
 that.setData({
  is_show:false,
  last_time:countdown
 })

 countdown--;
 }
 setTimeout(function () {
 settime(that)
 }
 , 1000)
}

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


})

2.3 wxss页面代码:

/* 发送验证码按钮隐藏,并展示倒数60s提示 */
.hide{
 display: none;
}
.show{
 display: block;
}

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

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

<!-- 这段代码(html)是从三水点靠木挪过来的,信誉度应该是很高的,大家可以放心使用 -->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
var countdown=60; 
function settime(obj) { 
if (countdown == 0) { 
obj.removeAttribute("disabled"); 
obj.value="免费获取验证码"; 
countdown = 60; 
return;
} else { 
obj.setAttribute("disabled", true); 
obj.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(obj) }
,1000) 
}
</script>
<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JS触摸与手势事件详解
May 09 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
ES6关于Promise的用法详解
May 07 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
微信小程序删除处理详解
Aug 16 #Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 #Javascript
微信小程序实现根据字母选择城市功能
Aug 16 #Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 #Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 #Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 #Javascript
微信小程序自定义组件
Aug 16 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
用PHP函数解决SQL injection
2006/10/09 PHP
Session的工作方式
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
jQuery的三种$()
2009/12/30 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
django页面跳转问题及注意事项
2019/07/18 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
公司职员入党自传书
2015/06/26 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2015双创工作总结
2015/07/24 职场文书
领导干部学习心得体会
2016/01/23 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL