js中倒计时学习笔记

news/2024/7/19 14:18:40 标签: js, 倒计时

倒计时原理:未来的时间点-现在的时间点// 现在的时间点(在变)  var iNow = new Date();
// 未来的时间点(不变)

//下面两种方法都可以定义未来的时间点
// var iNew = new Date( 2013, 10, 27,  21,56,0  );

var iNew = new Date( 'November 27,2013 22:3:0' );

// 数字形式:new Date( 2013,4,1,9,48,12 );
// 字符串形式:new Date('June 10,2013 12:12:12');

// January、February、March、April、May、June、
// July、August、September、October、November、December

var t = Math.floor((iNew - iNow)/1000);  除以1000将毫秒变为秒,因为可能出现小数,所以向下取整

// 天:Math.floor(t/86400)  未来时间与现在相差多少天
// 时:Math.floor(t%86400/3600)   未来时间与现在相差多少小时
// 分:Math.floor(t%86400%3600/60)  未来时间与现在相差多少分钟
// 秒:t%60   未来时间与现在相差多少秒

倒计时实例:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.t1 { width:400px; }
</style>
<script>

/*
var t =  Math.floor( new Date().getTime()/1000 );
alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' );
*/

window.onload = function () {
	var aInp = document.getElementsByTagName('input');
	var iNow = null;
	var iNew = null;
	var t = 0;
	var str = '';
	var timer = null;
	
	aInp[2].onclick = function () {
		iNew = new Date(aInp[0].value);
		clearInterval( timer );
		
		timer = setInterval (function (){
			
			iNow = new Date();
			t = Math.floor( ( iNew - iNow ) / 1000 );
			
			if ( t >= 0 ) {
				
				str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
			
				aInp[1].value = str;
				
			} else {
				
				clearInterval( timer );
				
			}
		
		}, 1000);
	};
};
</script>
</head>

<body>

距离:<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />
还剩:<input class="t1" type="text" />
<input type="button" value="开始倒计时吧" />

</body>
</html>

 


http://www.niftyadmin.cn/n/951661.html

相关文章

牛客网前端面试题错题整理(一)

下面有关HTML的Doctype和严格模式与混杂模式的描述&#xff0c;错误的是&#xff1f; 正确答案: C <!DOCTYPE> 声明位于文档中的最前面&#xff0c;处于<html>标签之前。告知浏览器的解析器&#xff0c;用什么文档类型 规范来解析这个文档 在标准模式中&#…

计算机原理知识原码补码和反码,计算机原理之整数表示(原码/反码/补码)

大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。今天痞子衡给大家讲的是计算机原理知识点-整数表示。本系列痞子衡会给大家介绍一些关于计算机原理的有趣的知识点&#xff0c;今天是系列第一节课&#xff0c;痞子衡要讲的是计算机中最基础的知识&#xff0c;即整…

字符串中的slice(),substr(),substring()三种提取字符串的方法总结

1、slice() slice()方法可提取字符串的某个部分&#xff0c;并以新的字符串返回被提取的部分。 语法&#xff1a;str.slice(start,end)&#xff0c;截取str从start到end的所有字符&#xff08;包含起始位置&#xff0c;不包含结束位置&#xff09; 说明&#xff1a;start和e…

微型计算机升级换代的两种,嵌入式的LED点阵显示屏的研究与实现

嵌入式的LED点阵显示屏的研究与实现技术的进步推动着人类对需求的不断提高&#xff0c;人类对需求的提高又不断促进着技术的进步。沿着需求和技术发展的方向&#xff0c;本文把嵌入式和CPLD技术引入到点阵显示项目中&#xff0c;以此实现功能多样、系统强壮、维护方便、面向网络…

css3文本相关的实战案例

1、文字排版相关&#xff1a; direction:定义文字排列方式&#xff08;全兼容&#xff09;&#xff1a;rtl(从右向左显示) ltr&#xff08;从左向右显示&#xff09; 注意&#xff1a;要配合unicode-bidi一起使用 <h1>文字排版</h1>h1{font:40px/60px "微软…

计算机职称专业分类明细,职称分类一览表

摘要&#xff1a;职称最初源于职务名称&#xff0c;理论上职称是指专业技术人员的专业技术水平、能力&#xff0c;以及成就的等级称号&#xff0c;是反映专业技术人员的技术水平、工作能力的标志。下面是小编整理的职称分类一览表&#xff0c;职称最初源于职务名称&#xff0c;…

html中td标签的id如何使用,将id应用于不在html代码中的td元素

我已经使用这个作为测试目的&#xff1a;var temp sdfdfsds;var occurence_count temp.match(/td class/g).length;for(i 1; i<occurence_count; i){temp temp.replace(new RegExp(td class, ), td id"my_cusom_id- i" class);}console.log(temp);而且因为它…

纯css3实现的轮播图效果(表单制作轮播图)

主要是使用css3新增的伪类选择器&#xff0c;利用表单制作的轮播图效果&#xff0c;效果图如下所示 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>纯css实现轮播图效果&l…