倒计时demo

最新推荐文章于 2019-11-22 10:46:20 发布

曲小强

最新推荐文章于 2019-11-22 10:46:20 发布

阅读量210

点赞数 1

分类专栏：小卖部 js 文章标签：倒计时

本文链接：https://blog.csdn.net/quhongqiang/article/details/99719188

版权

小卖部 js 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

订单超时都会有一个自动取消的过程，第一想到的就是使用setInterval定时器来完成这个小功能。

以下是一个倒计时的小demo 。

如果不想使用小时的话，请自行去掉。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>倒计时demo</title>
</head>
<body>
	倒计时：<span id="time">00 : 00 : 00</span>
	<script src="https://quhongqiang.com/js/jquery.min.js"></script>
	<script>
	$(function(){
		countDown("900", "#time"); // 倒计时XX秒
	})
	function countDown(times, id){ 
		var hour, minute, second,
			watch = $(id),
		    timer = setInterval(function(){ 
			if (times > 0) { 
				times -= 1; 
				hour = Math.floor((times / 3600) % 24); 
				minute = Math.floor((times / 60) % 60); 
				second = Math.floor(times % 60); 
				hour = hour<10?"0"+hour:hour;            // 计算小时 
				minute = minute<10?"0"+minute:minute;    // 计算分钟 
				second = second<10?"0"+second:second;    // 计算秒杀 
				watch.text(hour).append(" : ").append(minute).append(" : ").append(second);
			} else { 
				clearInterval(timer);
			} 
		}, 1000); 
	} 
	</script>	
</body>
</html>

曲小强

关注

1
点赞
踩
0

收藏

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

订单超时都会有一个自动取消的过程，第一想到的就是使用setInterval定时器来完成这个小功能。以下是一个倒计时的小demo 。如果不想使用小时的话，请自行去掉。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...
复制链接

扫一扫

专栏目录