支付宝赞助帐号:service@kuitao8.com 

jquery简单的倒计时效果

Created2014-12-17   Views 7706    Author 懒人程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery倒计时</title>
 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.countdown{ margin:20px auto; width:500px; heeight:60px; color:#000; font-size:50px;}
 
 
</style>
 
<script type="text/javascript"src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        var i=10;
        var countdown = null;
        function timeShow(){
            i--;
            $(".countdown").html("倒计时" + i + "秒");
            if(i<1){
                clearInterval(countdown);
                $(".countdown").html("倒计时结束!!");
            }
        };
        countdown = setInterval(timeShow,1000);
    })
</script>
</head>
<body>
    <h2 class="countdown" style=""></h2>
</body>
 
</html>



JS实现的效果,带控制器


<!DOCTYPE html> <html> <head> <title>倒计时测试</title> <script type="text/javascript"> window.onload = function(){ var oBtn1 = document.getElementById("start"); var oBtn2 = document.getElementById("over"); var i = 10; var oH2 = document.getElementById("djs"); var countdown = null; function timeShow(){ i--; oH2.innerHTML ="还剩:" + i +"秒"; if( i < 1 ){ clearInterval(countdown); i = 10; oH2.innerHTML="倒计时结束!!" } }; oBtn1.onclick=function(){ //timeShow(); countdown = setInterval(timeShow,1000); }; oBtn2.onclick=function(){ clearInterval(countdown); //i = 10; //如需点击结束后重新计算倒计时,请把注释干掉 } } </script> </head> <body> <input type="button" value="开始" id="start"> <input type="button" value="结束" id="over"> <h2 id="djs"></h2> </body> </html>
上一篇: jquery ajax 随机码调用的方法
下一篇: jquery 筛选元素方法
支持键盘 ← →

邮件订阅

订阅我们的精彩内容