Html5 倒計時/正計時 功能完成（二）
阿新 • • 發佈：2019-02-02
1.以下是互動邏輯：
2.如下是介面：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) });
<!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>