微信小程序注册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 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
js中top的作用深入剖析
Mar 04 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
实例浅析js的this
Dec 11 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 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
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
js数据类型检测总结
2018/08/05 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
高一生物教学反思
2014/01/17 职场文书
置业顾问岗位职责
2014/03/02 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
起诉状范本
2015/05/20 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL