Html5 倒计时/正计时 功能完成（二）

最新推荐文章于 2023-01-17 14:56:43 发布
最新推荐文章于 2023-01-17 14:56:43 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： Html5 倒计时 正计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jishoujiang/article/details/79037626
版权

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" οnkeyup="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" οnkeyup="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 " οnclick="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>



江上游泳的鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用H5完成新年倒计时 - 随机祝福
01-07
2023新年快乐祝福词，使用canvas完成烟花效果，下面有多个点组成的底部在一直变动，随机位置放烟花，每一个烟花的样式都是不同的。 点击页面任意一处，都可以播放新年快乐歌。 页面上方为随机祝福词，每一秒祝福词都在发生变化，字体颜色也是一秒改变一次。 页面中间为新年倒计时，字体颜色每秒改变一次。如果新年时间已经过去，那么中间将会显示为：‘祝大家：新年快乐！’ 整个页面由HTML+CSS+JavaScript编写而成，烟花效果由H5+C3中新增功能Canvas编写而成，整体背景为黑色，在整个页面中随机位置出现烟花，歌曲也是由H5+C3中新增功能的audio标签完成，只要点击页面就会播放歌曲。
html5+javascript 简单的倒计时功能
zhanganbo的博客
02-21 1065
代码名称         倒计时实现             ul, li {             margin: 0;             padding: 0;             list-style: none;         }         #countdown {        
15分钟的html倒计时,js实现5分钟倒计时
weixin_34637857的博客
07-02 1741
兄弟手写倒计时，可以告诉你点思路，此处你用间隔调用可以 用超时调用加回调函数同样也可以，这个需要你自己去实现才是你的。不过我还是简单给你写个吧！function Fn1(opt){this.as = Array.from(document.getElementsByTagName(opt.a));this.fn();}Fn1.prototype = {constructor : Fn1,fn : ...
记录用户网页在线以及正负倒计时
decemberain的专栏
11-24 606
 在PPC的问答求助区曾提过一个问题，如下：本人正在开发一个小游戏，有一个在线打工的操作[每小时要作一次数据统计]大体情况如下1：点击在线打工的时候，系统记录打工的数据以及数据结算的时间2：计划任务定时处理数据，进行用户结算3：判断用户是否在线，根据是否在线进行不同的处理其中1、2步已经解决，但是第3步的时候比较棘手，我之前的
Html5添加时尚的圆形进度条样式的倒计时插件教程
keymob的博客
01-06 1296
KeyMob移动端广告平台是一个移动广告智能管理平台，其目的是为IOS，Android和Windows Phone 8开发者提供一个简单的一站式广告管理工具，并为开发者带来更高的广告收入。
html5输入时间设置倒计时代码
11-10
html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
weixin_30767945的博客
06-03 657
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的，看到效果非常棒并且很实用，就第一时间把它整理出来与大家分享了，主要用到了html5、javascript和css3技术，用到了svg、circle、text。。。核心代码如下复制代码代码如下:function alertSet(e) {document.getElementById("js-alert-box"...
HTML5、css3、js实现倒计时、背景切换
y_z_s_a的博客
12-24 916
纯HTML5、CSS3、JavaScript实现倒计时和背景切换效果哟
计时器 倒计时器
mx0102的博客
01-17 283
计时器 倒计时器
Html5 倒计时/正计时 功能完成（一）
江上一条鱼的博客
01-11 4913
首先是插件代码，是参考了网上别人的倒计时项目（jQuery-Final-Countdown）。额外添加了 正计时，定时提醒，暂停，继续，开始，停止，以及计次的功能，并且将原来的精确到秒改成精确到毫秒，花了我整整一天完成。 如下是插件的核心逻辑： /*! * jQuery Final Countdown * * @author Pragmatic Mates, http://pragmat
基于Javascript实现倒计时功能
01-19
倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~). 代码名称 <!DOCTYPE html> <html ...
Js+CSS完成漂亮的网页倒计时效果
05-01
内容索引:脚本资源,CSS特效,倒计时　一个Js+CSS完成漂亮的倒计时效果，仿广州亚运会的网页倒计时效果，CSS的功能其实占了一大半，仅供参考。
考研倒计时html版
07-22
下载完成后请根据您的需要更改时间，背景图片，是否需要桌面天气插件等，完成后，使用桌面“右键——属性——桌面”，点击“浏览”找到文件位置确定即可
html css js写一个元旦倒计时代码动态页面
12-14
使用基础的HTML CSS Javascript 完成一个页面，实现一个元旦倒计时的功能，主要的布局采用了flex弹性布局，图片背景可以根据自己的喜好自适应改变，引入了谷歌适应的个性化字体，配色也可以根据个人喜好来调整rgb...
express框架实现文件上传服务器
江上一条鱼的博客
05-18 3309
express有个很好用的生成器：express-generator，通过npm install express-generator -g安装。安装成功后，express testapp 命令，生成testapp 项目脚手架cd testapp 进入testapp 目录，npm install命令安装依赖包，时间会有点长1.routes目录下新增路由：uploader.js,代码如下：//引入ht...
koa框架实现文件上传服务器
江上一条鱼的博客
05-18 2187
koa有个好用的生成器koa-generator  ,npm install -g koa-generator 安装之koa2 test_app生成项目，cd test_app进入目录,npm install安装依赖  1.routes下新增koaUploader.js,代码如下：const multer = require('koa-multer');//加载koa-multer模块 con...
js 控制网页全屏及退出全屏
江上一条鱼的博客
03-02 1709
网上找了好多资料，基本大同小异，实际效果会出现IE不兼容的现象（全屏和退出全屏都失效）， 后来解决了，记录如下：function requestFullScreen(element) {     var docElm = element;     if (docElm.requestFullscreen) {         docElm.requestFullscreen();     }els...
spring java图片上传源码.rar
最新发布
04-26
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
使用js完成一个好看的倒计时功能
07-13
以下是一个使用JavaScript实现的简单倒计时功能的示例： ```html <!DOCTYPE html> <html> 倒计时</title> #countdown { font-size: 36px; text-align: center; margin-top: 200px; } </style> </head> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值