微信小程序之发送短信倒计时功能


Posted in Javascript onAugust 30, 2017

微信小程序之发送短信倒计时功能

点击后

微信小程序之发送短信倒计时功能

代码

<form bindsubmit="formSubmit" bindreset="formReset"> 
<view class="fidpas"> 
 <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号" name="phonenumber" /> 
 <input type="number" class="fidpas_inp2"placeholder-class="lgin_place" placeholder="请输入短信验证码" name="msg" /> 
 <button class="{{sendmsg}}" bindtap="sendmessg">{{getmsg}}</button> 
</view> 
<button class="lgbut" formType="submit">下一步</button> 
</form> 
data: { 
 sendmsg: "sendmsg", 
 getmsg:"获取短信验证码", 
 }, 
 /** 
 * 获取短信验证码 
 */ 
 sendmessg:function(e){ 
 if (timer==1){ 
 timer=0 
 var that=this 
 var time=60 
 that.setData({ 
 sendmsg:"sendmsgafter", 
 }) 
 var inter=setInterval(function(){ 
  that.setData({ 
  getmsg: time + "s后重新发送", 
  }) 
  time-- 
  if(time<0){ 
  timer=1 
  clearInterval(inter) 
  that.setData({ 
   sendmsg: "sendmsg", 
   getmsg: "获取短信验证码", 
  }) 
  } 
 },1000)} 
 },

思路:将BUTTON后样式和内容设为变量,点击之后setData将其改变即可

总结

以上所述是小编给大家介绍的微信小程序之发送短信倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
js实现选项卡效果
Mar 07 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 #Javascript
hammer.js实现图片手势放大效果
Aug 29 #Javascript
js禁止表单重复提交
Aug 29 #Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 #Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 #Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 #Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 #Javascript
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
团干部培训方案
2014/06/03 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
敬老月活动总结
2014/08/28 职场文书
争先创优公开承诺书
2014/08/30 职场文书
青年文明号申报材料
2014/12/23 职场文书
机器人瓦力观后感
2015/06/12 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android