jQuery 实现倒计时

最新推荐文章于 2023-12-13 17:24:28 发布

Remainder_years

最新推荐文章于 2023-12-13 17:24:28 发布

阅读量567

点赞数

分类专栏： JS 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_33808550/article/details/60147294

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
  </head>
    <!-- 引用Bootstrap模板 -->
    <title>分秒毫秒</title>
	<link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="time.css">
  <body>
     <div class="count_down alert alert-success">
	 
	 </div>
	 <div class="count_down alert alert-info">
	 
	 </div>
	 <button class="btn btn-warning" οnclick="myclick()">开始计时</button>
  </body>  
</html>
<script src="../jquery-3.1.0.min.js"></script>
<script src="time.js"></script>
<script>
<!-- 引用倒计时插件 -->
 function myclick(){
   $(".btn-warning").attr("disabled","true");
   <!-- minute 分钟 second 秒  msec 毫秒 -->
   $(".count_down").plug_in_time({
     minute : 1,
	 second : 0,
	 msec : 0
   });
 }
 
</script>

/*time.js*/

/**
 * Created by Hack on 2016/11/8.
 */
/* 获取元素 */
var minute;  /*分*/
var second;  /*秒*/
var msec;    /*毫秒*/
var time_length;
//创建插件time
jQuery.fn.extend({
    plug_in_time : function(arr){
        $(this).html(load_time(arr));
        minute = $(".minute");
        second = $(".second");
        msec = $(".msec");
        time_length = minute.length;
        time();
    }
})
/*加载倒计时界面*/
function load_time(arr){
    arr['minute']==0?arr['minute']="00":arr['minute']=arr['minute'];
	arr['second']==0?arr['second']="00":arr['second']=arr['second'];
	arr['msec']==0?arr['msec']="00":arr['msec']=arr['msec'];
	var time_str = "<span class='minute'>"+arr['minute']+"</span>:<span class='second'>"+arr['second']+"</span>:<span class='msec'>"+arr['msec']+"</span>";
	return time_str;
}
/*倒计时函数*/
function time() {
    /* 用循环遍历数据 */
    for(var i=0;i<time_length;i++) {
        /* 判断当前的数据值 结束循环*/
        if (minute.eq(i).text() == "00" && second.eq(i).text() == "00" && msec.eq(i).text() == "00") {
            clearTimeout(mytime);
        } else {
            /* 判断分钟的时间和秒钟*/
            if (minute.eq(i).text() != "00" && second.eq(i).text() == "00") {
                var num_m = minute.eq(i).text() - 1;
                if (parseInt(minute.eq(i).text()) < 11)
                    minute.eq(i).text("0" + num_m);
                else
                    minute.eq(i).text(num_m);
                    second.eq(i).text("60");
            } else {
                /* 判断毫秒的时间 如果毫秒等于00 分钟减 */
                if (msec.eq(i).text() == "00") {
                    var num_s = second.eq(i).text() - 1;
                    if (parseInt(second.eq(i).text()) < 11)
                        second.eq(i).text("0" + num_s);
                    else
                        second.eq(i).text(num_s);

                    msec.eq(i).text("99");
                } else {
                    var num_c = msec.eq(i).text() - 1;
                    if (parseInt(msec.eq(i).text()) < 11)
                        msec.eq(i).text("0" + num_c);
                    else
                        msec.eq(i).text(num_c);
                }
            }
        }
    }
    var mytime = setTimeout(time,10);
}

/*css*/

body{
	background-color : black;
	text-align : center;
}
.count_down{
	font-size : 30px;
}
.minute,.second,.msec{
	margin : 5px;
}

Remainder_years

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现倒计时

分秒毫秒开始计时 function myclick(){ $(".btn-warning").attr("disabled","true"); $(".count_down").plug_in_time({ minute : 1, second : 0, msec :
复制链接

扫一扫