日期对象与定时器

日期对象与定时器

日期对象

一.日期对象的建立

 var   date=new  Date();

在控制台中输入date对象，打印出当前日期和时间。（无双引号）
而输入Date()构造函数，则会打印出当前日期和时间的字符串。（有双引号）

二.Date对象的方法

方法	描述
getDate()	从Date对象返回一个月中的某一天(1~31)
getDay()	从Date对象返回一周中某一天(0~6)
getMonth()	从Date对象返回月份(0~11)
getFullYear()	从Date对象以四位数字返回年份
getYear()	用getFullYear()方法代替（该方法计算的日期不准确)
getHours()	返回Date对象的小时(0~23)
getMinutes()	返回Date对象的分钟(0~59)
getSeconds()	返回Date对象的秒数(0~59)
getMilliseconds()	返回Date对象的毫秒(0~999)
getTime()	(计算机的纪元时间为:1970年1月1日0分0秒)从纪元时间到现在的毫秒数
setDate()	设置Date对象中的月中的某一天(1~31)
setMonth()	设置Date对象中的月份(0~11)
setFullYear()	设置Date对象的四位数字年份
setYear()	用setFullYear()方法代替
setHours()	设置Date对象的小时(0~23)
setMinutes()	设置Date对象的分钟(0~59)
setSeconds()	设置Date对象的秒数(0~59)
setMilliseconds()	设置Date对象的毫秒(0~999)
setTime()	以毫秒设置Date对象
toString()	把Date对象设置为字符串（有双引号）

注意：这些方法针对的是Date函数所创建的对象诞生时的那一时分秒，年月日，它们记录的不是当前的时分秒，年月日。

三.互联网时间的计数方法

本地时间会向服务器基站发送一个请求，在服务器基站获取统一电脑的时间。计算机电脑虽然不能直接给出当前的时间，但它能准确的感知到时间的变化，即计算机纪元时间距离当前时间所经过的毫秒数，继而推算出当前的时间。

四.小样例

1.测该段程程序执行的效率：

     for(var  i=0;i<10000000;i++){
	}

可以用如下方法：

        var firstTime=new Date().getTime();
		for(var  i=0;i<10000000;i++){
		}
		var  lastTime=new Date().getTime();
		console.log(lastTime-firstTime);

控制台上显示的数据即为执行上段程序所用的毫秒数。

注：通过getTime()的方式叫做时间戳，即记录该时刻的方式叫做时间戳。时间戳往往做为唯一标识来使用。

2.手动设置新的时间时间，让其到时间时执行某种操作

               var  date=new  Date();
               date.setMinutes(16);
				setInterval(function(){
					if(new Date().getTime-date.getTime>1000){
						console.log("伤心桥下春波绿,曾是惊鸿照影来");
					}
				},1000);

定时器

一.基本概念

setInterval(); //可以实现循环定时
clearInterval(); //清除定时器setInterval()
setTimeout(); //只能进行一次定时
clearTimeout(); //清除定时器setTimeout()

二.注意点

• 注1：都是全局对象window中的方法，内部函数this指向window。
  但凡window里面的东西，不写window.也可以。
• 注2：每一个setinterval都会返回一个数字作为它的唯一标识。这个唯一标识可以当做clearInterval的参数来清除定时器。
• 注3:不能通过改变time的值来改变定时器的间隔时间。因为定时器只能识别时间间隔识别一次。

例子：该段程序照样可以运行

 var  time=1000;
 setInterval(function(){
         console.log("a");
  },time)

但该段程序不可以将时间间隔变为2000ms

 var  time=1000;
 setInterval(function(){
         console.log("a");
  },time)；
  time=2000;

• 注4：定时器写定的时间间隔,实际时间间隔并不是这样。它有时时间间隔短，有时时间长。为什么呢？
  简单从一方面来讲，因为JS引擎中的执行队列，它会把任务按照时间片段分解，把很多任务的片段排列好，依次往队列里放，队列依次往执行马达里输送。引擎是单线头，setInterval()只是能保证保证隔着一定的时间把它放到队列后面。

三.小样例

1.查数

 var  i=0;
 setInterval(function(){
          i++;
         console.log(i);
  },1000)；

2.设置一个定时器，到三分钟时停止。

	minutes:
	seconds:
	

3.实现从一张图片到另一张图片的缓慢切换样式
注：target表示要移动到的位置，obj表示对象。

     function  move(obj,target){
		 			 clearInterval(obj.timer);
					 var  speed=obj.offsetLeft < target ? 10:-10;
					 //这个定时器执行多次,碰见if时才会清除定时器
		 			 obj.timer=window.setInterval(function(){
		 				var  result=target-obj.offsetLeft;
		 				obj.style.left=obj.offsetLeft + speed + "px";
		 				if(Math.abs(result)<=10){
		 					obj.style.left=target+"px";
		 					clearInterval(obj.timer);
		 				}
		 			 },10);
		 		}

四.补充：obj.offsetLeft和obj.style.left的区别

（1）offsetLeft 获取的是相对于父对象的左边距
left 获取或设置相对于具有定位属性(position定义为relative，absolute,fixed)的父对象 的左边距
如果父对象设置了padding,或者obj本身设置了margin，则两者不相等。
（2）style.left 返回的是字符串，如28px或者10%，offsetLeft返回的是数值28 或者 父对象的值*10%，如果需要对取得的值进行计算，还用offsetLeft比较方便。
（3）style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
（4）style.left的值需要事先定义，否则取到的值为空字符串。而且必须要定义在html里（通过style="left:XXX"定义)，我做过试验，如果定义在css里，style.left的值仍然为空字符串。
offsetLeft则仍然能够取到，无需事先定义div的位置。