原生javascript按钮时间倒计时
2021/11/26 20:10:42
本文主要是介绍原生javascript按钮时间倒计时,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小功能的练习,直接上,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间定时器</title> </head> <body> <input type="button" value="免费获取验证码" onclick="add(this)"> <!-- oncheck绑定的add(this) this表示获取标签里的数据 --> </body> <script> var num = 10; //设置个变量,定时器的初始值 function add(val) { // console.log(val.value) //获取value里的值 // val.setAttribute("disabled", "");//setAttribute("属性",值)表示设置标签的属性和值 disabled属性是禁用 //第一步:判断初始值为1,如果为0的话最后一秒会显示"发送中(0秒)" if (num == 1) { //第五步:removeAttribute删除disabled属性使定时器重新启动,并设置初始值num=10,value= "免费获取验证码" val.removeAttribute("disabled") num = 10; val.value = "免费获取验证码" } else { // 第二步:设置disabled属性 val.setAttribute("disabled", "") // 第三步:倒计时时间--改变标签里value的值 num--; val.value = "发送中(" + num + "秒)" // 第四步:设置定时器重复调用add事件里面每调用一次num-1;直到执行上边的判断 setTimeout(function() { add(val); }, 1000) } } </script> </html>
这篇关于原生javascript按钮时间倒计时的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?