倒计时demo

电玩女神 2021-10-24 00:52 352阅读 0赞

订单超时都会有一个自动取消的过程，第一想到的就是使用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>

发表评论取消回复

表情：

评论列表（有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

相关倒计时

js部分： export default function CalcTime(endtime) { var obj = {}; var

男娘i/ 2023年05月31日 06:38/ 0 赞/ 23 阅读

相关 C#倒计时

C\新手，记录一下倒计时，30s的倒计时，附上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

柔光的暖阳◎/ 2023年01月19日 03:09/ 0 赞/ 291 阅读

相关 Android 实现计数或者倒计时计时器用法Demo

...... private TimeCount time; ...... /\ 定义一个倒计时的内部类 \/

川长思鸟来/ 2022年09月20日 09:08/ 0 赞/ 151 阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 307 阅读

相关倒计时

验证输入手机号验证码倒计时 ![这里写图片描述][SouthEast]![这里写图片描述][SouthEast 1] \如上图所示要实现验证码的倒计时的效果

不念不忘少年蓝@/ 2022年06月02日 10:12/ 0 赞/ 386 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 389 阅读

相关倒计时

js代码 var EndTime= new Date('2017/2/18 00:00:00'); //设置到期时间 var NowTime = ne

- 日理万妓/ 2021年12月23日 08:41/ 0 赞/ 515 阅读

相关倒计时demo

订单超时都会有一个自动取消的过程，第一想到的就是使用setInterval定时器来完成这个小功能。以下是一个倒计时的小demo 。如果不想使用小时的话，请自行去掉。

电玩女神/ 2021年10月24日 00:52/ 0 赞/ 353 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 463 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 561 阅读