素材网 素材网

jQuery手机秒表计时器特效

下载资源()次

阅读次数()次

发布时间:2017-10-12

jQuery手机秒表计时器特效
分享到:

用法简介:

来源:xw素材网

jQuery手机秒表计时器特效。
文件引用:


<script>

//添加事件

$(function(){

var min=0;

var sec=0;

var ms=0;

var timer=null;

var count=0;

//点击第一个按钮

$('.bnt button:eq(0)').click(function(){

if($(this).html()=='记次'){

if(!timer){

alert("没有开启定时器!");

return;

}

count++;

var right1="<span class='right'>"+$('#showtime').text()+"</span>";

var insertStr = "<div><span class='left'>记次"+count+"</span>" +right1+"</div>";

 

$("#record").prepend($(insertStr));

}else{

min=0;

sec=0;

ms=0;

count=0;

$('#showtime span:eq(0)').html('00');

$('#showtime span:eq(2)').html('00');

$('#showtime span:eq(4)').html('00');

$('#record').html('');

}

});

//点击第二个按钮

$('.bnt button:eq(1)').click(function(){

if($(this).html()=='启动'){

$(this).html('停止');

$('.bnt button:eq(0)').html('记次');

clearInterval(timer);

timer=setInterval(show,10)

}else{

$(this).html('启动');

$('.bnt button:eq(0)').html('复位');

clearInterval(timer);

}

});

//生成时间

function show(){

ms++;

if(sec==60){

min++;sec=0;

}

if(ms==100){

sec++;ms=0;

}

var msStr=ms;

if(ms<10){

msStr="0"+ms;

}

var secStr=sec;

if(sec<10){

secStr="0"+sec;

}

var minStr=min;

if(min<10){

minStr="0"+min;

}

$('#showtime span:eq(0)').html(minStr);

$('#showtime span:eq(2)').html(secStr);

$('#showtime span:eq(4)').html(msStr);

}

})

</script>


   

相关标签:

上一篇:jQuery仿QQ空间时间轴动画 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。