jQuery之短信验证码倒计时

2021-07-01 分类：JQuery 评论(0)

HTML代码：

[code]<!doctype html><html><head><meta charset=\"utf-8\"><title>短信验证码倒计时</title><link type=\"text/css\" rel=\"stylesheet\" href=\"css1.css\"/><script src=\"../jquery.js\"></script><script>$(function(){$(\'.sentBtn\').click(function(){var i=60;var timer=null;$(this).addClass(\'disabled\').val(\'还剩60秒\');timer=setInterval(function(){if(i>0){i--;$(\'.sentBtn\').val(\'还剩\'+i+\'秒\');}else{clearInterval(timer);$(\'.sentBtn\').removeClass(\'disabled\').val(\'获取验证码\');}},1000);})});</script></head><body><input type=\"button\" value=\"获取验证码\" class=\"sentBtn\"></body></html>

css代码：

[code]@charset \"utf-8\";/* CSS Document */.sentBtn.disabled {background-color:#CCC !important;cursor:not-allowed !important;}/* 发送按钮样式 */.sentBtn {min-width:100px;padding:5px;border:none;color:#FFF;background-color:#83EBF0;border-radius:4px;cursor:pointer;}