h5倒计时弹窗_html5+js绚丽的倒计时

编写第control.js文件

源码如下:

var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=600;

var RADIUS=8;

var MARGINTOP=60;

var MARGINLEFT=30;

const endTime=new Date(2016,8,23,14,06,52);

var curShowTimeSeconds=0;

var balls=[];

const colors=["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900"

,"#ffbb33","#ff8800","#ff4444","#cc000c"];

window.οnlοad=function(){

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

canvas.width=WINDOW_WIDTH;

canvas.height=WINDOW_HEIGHT;

curShowTimeSeconds=getCurShowTimeSeconds();

setInterval(function(){render(context);update();},50);

}

function getCurShowTimeSecon

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当用户点击获取验证码按钮时,可以触发一个事件,在事件处理程序中向后端发送请求,请求发送验证码到用户手机,并开启一个倒计时,每秒钟减少1秒,当倒计时结束时,重新启用获取验证码按钮。 下面是一个简单的用Vue编写的H5登录页验证码倒计时的示例代码: ```vue <template> <div> <input type="text" placeholder="请输入手机号"> <button v-bind:disabled="isCounting" @click="getCode">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { isCounting: false, // 是否正在倒计时 count: 60, // 倒计时秒数 buttonText: '获取验证码' // 按钮文本 } }, methods: { getCode() { // 发送请求,请求发送验证码到用户手机 // 成功后开启倒计时 this.isCounting = true this.buttonText = this.count + '秒后重新获取' let timer = setInterval(() => { this.count-- this.buttonText = this.count + '秒后重新获取' if (this.count <= 0) { clearInterval(timer) this.count = 60 this.isCounting = false this.buttonText = '获取验证码' } }, 1000) } } } </script> ``` 在上面的代码中,我们通过 `data` 方法定义了 `isCounting`、`count` 和 `buttonText` 三个变量。当用户点击获取验证码按钮时,我们先向后端发送请求,并将 `isCounting` 变量设置为 `true`,`buttonText` 设置为倒计时秒数。然后使用 `setInterval` 函数每秒钟减少一秒,直到倒计时结束,将 `isCounting` 设置为 `false`,`buttonText` 重新设置为获取验证码。 在模板中,我们使用 `v-bind:disabled` 绑定 `isCounting` 变量,当 `isCounting` 为 `true` 时,按钮会被禁用。同时,我们使用 `@click` 绑定 `getCode` 方法,在用户点击按钮时触发 `getCode` 方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值