JavaScript--Date（）日期类型-原创手记-慕课网

1.对于当前的时间，我们可以通过 new Date（）来获取，这是计算机的时间
var nowtime=new Date();

2.如果是自己的定义的时间：
var mytime=new Date（“2019/3/20 11:20”）；

3.如果是时间差：（就像计算倒计时）
var res=mytime-nowtime;

4.一般计算时间的话：
res/1000/3600 是一小时的量
res/1000/60%60是一分钟的量
res/1000%60 是一秒钟的量
1秒=1000毫秒
5.静态倒计时代码

		<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div>span{
				display: inline-block;
				width: 100px;
				height: 20px;
				border: 1px solid blue;
				border-radius: 2px;
				line-height: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			距离下课还有：<span id="h"></span>小时<span id="min"></span>分钟<span id="m"></span>秒
		</div>
	<script>
		var mydate=new Date("2019/3/20 17:30");
		var nowtime=new Date();
		var res= mydate-nowtime ;
		var h=Math.floor(res/3600/1000);//用到的Math.floor的方法是存在小数问题的话就可以向下取整数
		var min=Math.floor(res/1000/60%60); //有时候可能出现大于60分钟的时候。就利用求余的方式来写
		var m=Math.floor(res/1000%60);
		function $(id){
			return document.getElementById(id);
		}
		$("h") .innerHTML=h;//把小时的值引入到html页面当中去，引用的id值的话，上面的function函数就必不可少
		$("min").innerHTML=min;
		$("m").innerHTML=m;
	</script>

下面就是效果图：
图片描述
6.如果想要动态的倒计时（周期性的定时器）：（将自己定义的时间卡在计算机进行的时间，会随着计算机的时间的流动而变化，就形成了一种动态的效果）
这个时候就需要一种方法
setInterval（function（）{你需要看到时间变化的程序，比如说倒计时的静态全部程序就可以放在这里}，1000）；
后面的1000参数是希望能够以秒的形式出现。
最后利用:
window.onload=setInterval()；
实现动态的倒计时的功能
看下面
（上面的代码不变，纠正script部分的代码如下：）

<script type="text/javascript">
		window.onload=timer;
		var timer=setInterval(
		function (){
			
		var mydate=new Date("2019/3/20 17:30");
		var nowtime=new Date();
		var res= mydate-nowtime ;
		var h=Math.floor(res/3600/1000);
		var min=Math.floor(res/1000/60%60); 
		var m=Math.floor(res/1000%60);
		function $(id){
			return document.getElementById(id);
		}
		$("h") .innerHTML=h;
		$("min").innerHTML=min;
		$("m").innerHTML=m;
		}
		);
</script>

效果是不断在动的，大家可以自己试一下。

7.关于上面代码的补充说明就是：
函数调用时是名字（）；

如果是调用的函数本身的话就是名字就行了
var a=function(){
return 10；
}
console.log(a())；//打印结果为10
console.log(a)；
//打印结果为function(){return 10；}

8.解绑定时器：clearInterval(写上创建定时器的名字);

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border:1px solid red;
				color: black;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
//第一种解绑的方法
	 var box=document.getElementById("box");
	 var n=10;//从10开始向下计数
	var timer=setInterval(aa,1000);
	function aa(){
		box.innerHTML=n;//注意innerHtml方法的拼写
		 n--;//不断减小数
		if(n==0){//到0秒为止停止
			clearInterval(timer);
		}
	}
//第二种 解绑的方法
    function $(id){
    	return document.getElementById(id);
    }
	 var n=10;
	var timer=setInterval(aa,1000);
	function aa(){
		$("box").innerHTML=n;
		 n--;
		if(n==0){
			clearInterval(timer);
		}
	}

谢谢大家的观看谢谢大家啦~