手记

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);
		}
	}

谢谢大家啦~

0人推荐
随时随地看视频
慕课网APP