在做手机网站开发的时候,难免发生意外。这时候,就是你展示人格魅力的时候啦!
下面是自己写的一个发送验证码给手机之后,进入的一个倒计时的效果
js代码,我可是连<script type="text/javascript">这种都贴出来啦!
<script type="text/javascript">
var InterValObj;
var count = 60;
var curCount;
function sendMessage() {
curCount = count;
$("#sendMessage").attr("disabled", "true");
$("#sendMessage").parent().children().first().children().text("在" + curCount + "秒之后重发");
$("#sendMessage").val("在" + curCount + "秒之后重发");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj); //停止计时器
$("#sendMessage").removeAttr("disabled"); //启用按钮
$("#sendMessage").parent().children().first().children().text("重新发送");
$("#sendMessage").val("重新发送");
}
else {
curCount--;
$("#sendMessage").val("在" + curCount + "秒之后重发");
$("#sendMessage").parent().children().first().children().text("在" + curCount + "秒之后重发");
}
}
</script>
Html代码,就一个按钮
<input type="button" id="sendMessage" value="发送信息" />
当然了 你还得引用最重要的库文件。
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"
type="text/css">
<script src="jquery的库文件" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
这都不是最重要的,重要的是 没有引用啊~
于是js加上一句:
$(function () {
$("#sendMessage").click(function () {
sendMessage();
})
})
最后的效果,在谷歌里面如下:
点击之后
很期待下次与大家的分享,不要问我是谁,请叫我红领巾。