在网页注册中有些需要短信验证的按钮,显示多少秒的时间递减,当秒数读完后按钮恢复且变为重新发送
点击后成XX秒输入....那个
难度不大,逻辑思维很清晰,不错的例子故写下
js工具库:jQuery
假设这个按钮的 id = 'button' 设立个omclick函数 函数名 changevode
/思路/
var count = 60;//初始秒数
var counts;//在按钮上显示出的秒数
var Timer;//时间定时器
function changevode(){
counts = count;//对它赋值为60s
//点击按钮后按钮禁用
$('#button').attr('disabled':true);
//点击按钮后北京颜色变化(一般为灰)
$('#button').attr('background-color':'#AAAAAA');
//按钮上的文字改变
$('#button').val(counts +'内输入激活码');
Timer = window.setInterval(timevode,1000);//设置定时函数 timevode
}
function timevode(){
if(counts == 0){//当时秒数为0时
//按钮启用,颜色恢复,文字变成重新发送,计时器Timer清除
window.clearInterval(Timer);
$('#button').attr('disabled',false);
$('#button').attr('background-color':'blue');
$('#button').val('重新发送验证码');
}else{
counts --;
$('#button').val(counts +'内输入激活码');
}
}
ps:欢迎加我微信,一起探讨技术,注明csdn上看见的