1. 程式人生 > >Html5 倒計時/正計時 功能完成(二)

Html5 倒計時/正計時 功能完成(二)

1.以下是互動邏輯:

 var reverseDate = null;
 
 function setTime() {

 	$("#myModal").modal('show');

 }
 Date.prototype.format = function(format) {
 	var o = {
 		"M+": this.getMonth() + 1, //month
 		"d+": this.getDate(), //day
 		"h+": this.getHours(), //hour
 		"m+": this.getMinutes(), //minute
 		"s+": this.getSeconds(), //second
 		"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
 		"S": this.getMilliseconds() //millisecond
 	}
 	if(/(y+)/.test(format)) format = format.replace(RegExp.$1,
 		(this.getFullYear() + "").substr(4 - RegExp.$1.length));
 	for(var k in o)
 		if(new RegExp("(" + k + ")").test(format))
 			format = format.replace(RegExp.$1,
 				RegExp.$1.length == 1 ? o[k] :
 				("00" + o[k]).substr(("" + o[k]).length));
 	return format;
 }

 function savePlayConfig() {
 	$("#myModal").modal('hide');
 	var isChecked = $('#is_countdown_check').prop("checked") == true;
 	stopCount();
	
 	if(isChecked) {
 		//startCount(true)
 		if($('#reservationtime').val()){
 			try{
 				reverseDate = parseInt($('#reservationtime').val()) * 60 * 1000;
 				localStorage.setItem("reverseDate", $('#reservationtime').val());
 			}catch(e){
 				
 			}
 		}else{
 			alert("請輸入倒計時");
 			return
 		}
 		
 	}
	
 	var num = $("#playInterval").val();
 	if(num) {
 		localStorage.setItem("playInterval", num);
 	}

 	localStorage.setItem("isCountDown", isChecked ? "Y" : "N")

 	if($('#modal_title_text')) {
 		localStorage.setItem("title", $('#modal_title_text').val())
 		$('#topic_title').html(localStorage.getItem("title"))
 	}

 	console.log("localStorage;", localStorage.getItem("isCountDown"));
 }


 function onCountModeChange() {

 	var isChecked = $('#is_countdown_check').prop("checked") == true;
 	$('#reservationtime').prop("disabled", !isChecked)

 }

 function startCount(isCountDown) {
 	reverseDate = reverseDate || 1;
 var time = reverseDate -1 ;
 	if(!isCountDown)
 		isCountDown = $('#is_countdown_check').prop("checked") == true;
 	$('.countdown').final_countdown({
 		'start': 0,
 		'end': time,
 		'now': 0,
 		'isCountDown': isCountDown,
 		'status': 'start'

 	});
 	$('#startOrPause').text("暫停")
 	setBtnIsActive(true);
 	recordVue.records.splice(0,recordVue.records.length)
 }

 function setBtnIsActive(isStart) {
 	if(isStart) {
 		if(!$('#stopAll').hasClass("active"))
 			$('#stopAll').addClass("active");
 		if(!$('#saveRecord').hasClass("active"))
 			$('#saveRecord').addClass("active");
 	} else {
 		$('#stopAll').removeClass("active");
 		$('#saveRecord').removeClass("active");
 	}

 }

 function continueCount(isCountDown) {
 	if(!isCountDown)
 		isCountDown = $('#is_countdown_check').prop("checked") == true;
 	$('.countdown').final_countdown({
 		'start': 0,
 		'end': 0,
 		'now': 0,
 		'isCountDown': isCountDown,
 		'status': 'continue'

 	});
 	$('#startOrPause').text("暫停")
 	setBtnIsActive(true);
 }

 function pauseCount(isCountDown) {
 	if(!isCountDown)
 		isCountDown = $('#is_countdown_check').prop("checked") == true;
 	$('.countdown').final_countdown({
 		'start': 0,
 		'end': 0,
 		'now': 0,
 		'isCountDown': isCountDown,
 		'status': 'pause'
 	});
 	$('#startOrPause').text("繼續")
 	setBtnIsActive(false);
 }

 function stopCount() {

 	var isCountDown = $('#is_countdown_check').prop("checked") == true;
 	$('.countdown').final_countdown({
 		'start': 0,
 		'end': 0,
 		'now': 0,
 		'isCountDown': isCountDown,
 		'status': 'stop'
 	});
 	$('#startOrPause').text("開始")
 	setBtnIsActive(false);
 	recordVue.records.splice(0,recordVue.records.length)
 }

 function clickPause(e) {
 	if(!$(e.currentTarget).hasClass('active'))
 		return

 	e.preventDefault();
 	var status = $('.countdown').get_status();
 	//console.log("clickPause:" + status)
 	if('start' == status) {
 		pauseCount();
 	} else if('pause' == status) {
 		continueCount();
 	} else if('stop' == status) {
 		startCount()

 	}

 }

var recordVue = new Vue({
	el:"#record_list",
	data:{
		records:[],
	}
	 
})


 function clickStop(e) {
 	if(!$(e.currentTarget).hasClass('active'))
 		return
 	stopCount();
 
 }

function clickSave(e){
	if(!$(e.currentTarget).hasClass('active'))
 		return
	var timeStr = $('.countdown').get_time_shown();
	
	var r = {};
	r.interval_time = "00:45:44";
	r.r_time = timeStr;
	
	recordVue.records.splice(0,0,r)
}
 


 //Date range picker with time picker
 $('document').ready(function() {
 	'use strict';
 	var now = new Date();
 	console.log(now);
 	var title = localStorage.getItem("title") || $('#topic_title').html();
 	var isCountDown = "Y" == localStorage.getItem("isCountDown");
 	var playInterval = localStorage.getItem("playInterval") || "6";
    reverseDate = localStorage.getItem("reverseDate") || "1";
 	
	$('#modal_title_text').val(title)	
	$('#reservationtime').val(reverseDate)
 	$('#modal_title_text').val(title)
 	$('#topic_title').html(title)
 	$('#playInterval').val(playInterval)
 	$('#is_countdown_check').prop("checked", isCountDown)
 	$('#reservationtime').prop("disabled", !isCountDown)
 	reverseDate = parseInt(reverseDate) * 60 * 1000;

 	/*$('#reservationtime').daterangepicker({
 			singleDatePicker: true,
 			timePicker: true,
 			timePicker24Hour: true,
 			startDate: now,
 			minDate: now,
 			autoApply: true,
 			isShowing: true,
 			maxDate: new Date(now.getTime() + 24 * 3600 * 1000),
 			drops: 'down',
 			locale: {
 				format: 'YYYY-MM-DD HH:mm',
 				separator: ' ~ ',
 				applyLabel: "應用",
 				cancelLabel: "取消",
 				resetLabel: "重置",
 			}
 		},
 		function(start, end, label) {
 			configDate = new Date(end);
 			 var time=(new Date(end) - new Date());
 			 $("#myModal").modal('hide');
 			 if($('#modal_title_text')){
 			 	localStorage.setItem("title",$('#modal_title_text').val())
 			 	$('#topic_title').html(localStorage.getItem("title"))
 			 }
 			 startCount(time,true)
 		}
 	);*/

 	$('#startOrPause').click(clickPause)
 	$('#stopAll').click(clickStop)
 	$('#saveRecord').click(clickSave)
 	$('#is_countdown_check').change(onCountModeChange)

 });
2.如下是介面:
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery倒計時外掛</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="daterangepicker/daterangepicker.css">
      <!-- Font Awesome -->
     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
  
</head>
<body style="overflow: hidden;">
	<p id="topic_title" style="text-align: center;top:5%;font-size: 48pt;color: #FFFFFF;position:relative;">活動現場嘻嘻嘻</p>
    <div class="countdown countdown-container container">
        <div class="clock row"  style="margin-top: 8%;">
            <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3" style="display: none;">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-days" class="clock-canvas"></div>

                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-days type-time">DAYS</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-hours" class="clock-canvas"></div>

                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-hours type-time">HOURS</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->

            <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-minutes" class="clock-canvas"></div>

                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-minutes type-time">MINUTES</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->

            <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-seconds" class="clock-canvas"></div>

                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-seconds type-time">SECONDS</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
            
            
             <div class="clock-item clock-mils countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-mils" class="clock-canvas"></div>

                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-seconds type-time">MIL_SECONDS</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
            
        </div><!-- /.clock -->
        
     
       <!-- <div calss="row" style="color: #FFFFFF;margin-top: 100px;cursor: pointer;" data-toggle="modal" data-target="#myModal">
         
                <i class="fa fa-cog" aria-hidden="true" ></i> 設定時間
          
        </div>-->
        
        <div class="ctrls" style="margin-top: 7%;margin-left: 60px;">
			<a id="configAll" style="cursor: pointer;" class="active" data-toggle="modal" data-target="#myModal">設定時間</a>
			<a id="stopAll" style="margin-left:2%;cursor: pointer;">停止</a>
			<a id="startOrPause" style="margin-left:2%;cursor: pointer;" class="active">開始</a>
			<a id="saveRecord" style="margin-left:2%;cursor: pointer;">計時</a>
		</div>
		<div id="record_list" style="width: 100%;height:220px;margin-top: 20px;float: left;overflow:auto;">
			
			<!--<div style="height: 20px;width:100%;clear: both;"  >
				<div class="pull-left" style="margin-left: 20px;margin-top: 5px;">
					<h5 style="margin-top: 3px;margin-bottom: 3px;">計次1</h5>
					<label>間隔 00:03.71</label>
				</div>
				<h3 class="pull-right" style="margin-right: 20px;margin-top: 15px;">05641560</h3>
				
			</div>-->


			
			
			<div style="height: 40px;width:80%;clear: both;overflow: hidden;" v-for="(record,index) in records" >
				<div style="margin-left: 300px;margin-top: 5px;position: relative;">
					<h5 style="margin-top: 3px;margin-bottom: 3px;left: 40%;">計次{{records.length-index}}</h5>
					<!--<label>間隔 {{record.interval_time}}</label>-->
				</div>
				
				<h3  style="left: 50%;position: relative;top: -25px;">{{record.r_time}}</h3>
				
			</div>
			
		</div>
        
    </div><!-- /.countdown-wrapper -->
  
<!-- 模態框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">請選擇時間:</h4>
            </div>
            <div class="modal-body">
	              <div class="form-group" id="timeForm" >
	                <label >標題:</label>
	                <div class="input-group">
	                  <div class="input-group-addon">
	                  </div>
	                  <input id="modal_title_text" type="text" class="form-control pull-right" placeholder="請輸入定時主題" id=>
	                </div>	              	
	                <!--<label >Date and time:</label>
	                <div class="input-group">
	                  <div class="input-group-addon">
	                    <i class="fa fa-clock-o"></i>
	                  </div>
	                  <input type="text" class="form-control pull-right" id="reservationtime">
	                </div>-->
	                
	                 <div  class="form-group" style="margin-top: 10px;">
						<label > 倒計時時間(分鐘)</label>
						<input type="number" id="reservationtime" onkeyup="value=value.replace(/[^\d]/g,'')" class="form-control" placeholder="請輸入時間" />
					</div>
	                
	                <div  class="form-group" style="margin-top: 10px;">
						<label > 播放間隔(秒)</label>
						<input type="number" id="playInterval" onkeyup="value=value.replace(/[^\d]/g,'')" class="form-control" placeholder="請輸入時間"/>
					</div>
	                
	                 <div class="input-group" style="margin-top: 10px;">
		                  <label class="pull-left">是否倒計時:</label>
		                  <input type="checkbox" class="pull-right" style="margin-left: 15px;" checked="true" id="is_countdown_check">
	                </div>	  
	                 
	                <!-- /.input group -->
	              </div>           	
            </div>
			
			 <div class="modal-footer ">
						<button id="modalSaveBtn" type="button " class="btn btn-primary  pull-right " onclick="savePlayConfig() " style="float:right;margin-right:30px ">確定</button> 					
					</div>
			
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<audio src="repair.mp3" id="bgMusic">
</audio>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="js/jquery.final-countdown.js"></script>
<!-- date-range-picker -->
<script src="daterangepicker/moment.js"></script>
<script src="daterangepicker/daterangepicker.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue2.x.js"></script>
<script type="text/javascript" src="js/index.js"></script>
  
</body>
</html>