网页注册的短信验证的按钮特效

在网页注册中有些需要短信验证的按钮,显示多少秒的时间递减,当秒数读完后按钮恢复且变为重新发送

点击后成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上看见的