十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤:
主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、微网站、微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站制作、网站建设、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。
1、效果图:
2、页面仅仅利用了JS的相关功能,包含:wxml、js、wxss
2.1wxml页面代码:
绑定手机
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端或者移动端的应该是什么样呢?
其实,方法都差不多,这里也贴出来仅供大家参考