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


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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
使用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
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP多态代码实例
2015/06/26 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
package.json各个属性说明详解
2020/03/11 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
画展观后感
2015/06/17 职场文书
污染环境建议书
2015/09/14 职场文书
《桂花雨》教学反思
2016/02/19 职场文书