日期对象与定时器
日期对象与定时器
日期对象
一.日期对象的建立
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的位置。