Sunny

# 例子

封装函数insertAfter();功能类似insertbefore();把<p></p>插入到b标签的后面

    <div>
        <i></i>
        <b></b>
        <span></span>
    </div>
    <p></p>
1
2
3
4
5
6

实现思路

为参照物,放到的后面相当于放到的前面,也就是的下一个兄弟元素节点

Element.protype.insertAfter = function(targetNode,afterNode) {
        var beforeNode = afterNode.nextElementSibilng;
        if(beforeNode == null) {
            this.appendChild(targetNode);
        }else{
            this.insertBefore(targetNode,beforeNode);
        }
}
var div = document.getElementsByTagName('div')[0];
var b = document.getElementsByTagName('b')[0];
var span = document.getElementsByTagName('span')[0];
var p = doucment.getElementsByTagName('p');
div.insertAfter(p,b);   //p在b的后面
div.insertAfter(p,span)//p在span的后面
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 日期对象Date();

日期对象,是系统提供好的

var date = new Date();//会打印当前的时间,只打印当前,不是实时的.

date()//返回当前时间 实时
1
2
3

![](https://cdn.jsdelivr.net/gh/zhongyongfeng/blogimg/img/FireShot Capture 001 - JavaScript Date 对象 - www.w3school.com.cn.png)

Date 对象的属性

只有两个，prototype 和 constructor，，要区分开:prototype 是函数类对象(构造函数)上的属性， constructor 是对象类对象(原型)上的属性。

Date 对象的方法

Date():Date 空执行后返回的是字符串类型的日期时间，得"Sun Feb 10 2019 18:10:59 GMT+0800 (中国标准时间)"。

以下方法全部是 Date 生产的对象调用的，比如说 var date = new Date(); getDate():返回的是这个月中的第几天，拿今天 2 月 10 日为例，date.getDate() 就得到 10.

getDay():返回的是一周中的第几天，但是是从 0 记起的，并规定星期天为第一 天 ，则返回 0，星期一返回 1，那么今天 date.getDay()就得到 0.

getMonth():返回当前月份是今年的第几月，但也是从 0 开始记起的，那么今天二月 date.getMonth()就得到 1.

getYear():这个方法不准，是早期方法，date.getYear()得到 119，上边让我们用 getFullYear()代替。

getFullYear():返回四位数的数字年份，date.getFullYear()就得到 2019.

getHours():返回小时，date.getHours()就得到 18.

getMinutes():返回分钟，date.getMinutes()就得到 10.

getSeconds():返回秒数，date.getSeconds()就得到 59.

getMilliseconds():返回毫秒，范围是 0-999.

注意

以上 get 的所有方法都不是实时的，它记录的是 date 对象出生的时间，比如说 我把网页刷新一下，然后 date.getSeconds()得到 2，然后不刷新继续 date.getSeconds() 还是 2.所以说他记录的不是你访问的时间，而是 date 出生的时间。

getTime():返回 1970 年 1 月 1 日至今的毫秒数，date.getTime()就得到 1549795905341。

解释:这个 1970 年 1 月 1 日 0 时 0 分 0 秒被定义为计算机的纪元时间，这个方法就可 以准确地计算出现在这个 date 出生的时间距离纪元时间多少毫秒，他的作用就是可以 当做一个时间戳用，来检验一个程序运行的效率，比如说:

var firstTime = new Date().getTime();
for(var i = 0; i < 100000000; i++){
}
var lastTime = new Date().getTime();
1
2
3
4

console.log(lastTime - firstTime); 我们让计算机空循环一亿圈，在循环开始之前记录一下时间戳，结束后再记录一下时 间戳，然后用后边的时间毫秒数减去前边的时间毫秒数来看一下计算机运行的效率。 再比如你写了一个程序，想看一下运行的效率，也可以用时间戳测一下写的这个程序 运行花了多少秒。

日期对象除了一些 get 的方法以外，还有一些 set 的方法，就是除了读取时间以 外，还可以手动设置时间。现在继续 var date = new Date();然后 date.setDate(15)， 再访问 date 就得到 Fri Feb 15 2019 11:30:29 GMT+0800 (中国标准时间)，这个 set 的方法就是比如日期改了，其他的星期啥的就也跟着一起变了。set 还有一些方法， 比如 setMonth()、setFullYear()、setHours()等等

set 的这些方法的作用就是可以当做一个闹钟来用，比如说你设置了一个时间，然后和 系统的时间相比对(用 getTime()的方法做差)，如果时间相吻合的话，就触发某种事件

var date = new Date();
date.setMinutes(54);
setInterval(function (){
if(date.getTime() - new Date().getTime() < 1000){ console.log("你最帅");
} },1000)
1
2
3
4
5

# 封装函数

打印当前是何年何月何日何时几分几秒。

function myDate() {
var date = new Date();
console.log("当前是" + date.getFullYear() + "年" + (date.getMonth() + 1)
+ "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒");
}
1
2
3
4
5

解析:这个比较简单，直接 get 就行了，但是注意 getMouth()是从 0 开始记起的，所 以得给他加1，现在myDate()就打印 当前是2019年2月16日12时23分20秒。

# 定时循环器setInterval

var time = 1000;
var timer = setInterval(function () {
        console.log('a');
},time);
//每隔time的时间执行一次函数,里面的time只识别一次
//每一个setInterval都可以用一个变量来接收
//都会返回一个唯一的标识
//有了这个唯一标识,就可以用clearInterval(timer)来清除定时器
1
2
3
4
5
6
7
8

# 秒表

var i = 0;
    setInterval(function() {
        i++;
        console.log(i);
    },1000);
1
2
3
4
5

# 定时器setTimeout

推迟一段时间执行

var timer = setTimeout(function() {
        console.log('a')
},1000);//到了1000毫秒执行函数,并且只执行一次
    clearTimeout(timer);//永远就不执行了
//两个定时器会逐一罗列的往下进行,不会重叠
//定时器,他们全是全局Window上的方法,内部函数this指向window
1
2
3
4
5
6

# 计时器例子

<!--计时器,到三分钟停止-->
minutes:<input type="text" value="0">
seconds:<input type="text" value="0">
1
2
3
input {
        border:1px solid rgba(0,0,0,.8);
        text-align: right;
        font-size: 20px;
        font-weight: bold;
    }
1
2
3
4
5
6
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0;
    seconds = 0;
var timer = setInterval(function() {
    seconds ++;
    if(seconds == 60) {
        seconds = 0;
        minutes ++;
    }
    secondsNode.value = seconds;
    minutesNode.value = minutes;
        if(minutes == 3) {
            clearInterval(timer);
        }
    }, 1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 自动阅读器

<div style="width: 100px;height: 100px;background-color:#000;border-radius: 50%;font-size: 25px;font-weight: blod;position: fixed;bottom: 200px;right: 20px;text-align: center;line-height: 100px;color:#fff;opacity: .6;">Start</div>

<div style="width: 100px;height: 100px;background-color:#000;border-radius: 50%;font-size: 25px;font-weight: blod;position: fixed;bottom: 50px;right: 20px;text-align: center;line-height: 100px;color:#fff;opacity: .6;">Stop</div>
1
2
3
var Start = document.getElementsByTagName('div')[0];
var Stop = document.getElementsByTagName('div')[1];
var timer = 0;
var key = true;
    Start.onclick = function () {
        if (key) {
            timer = setInterval(function () {
                window.scrollBy(0, 10);
            }, 100);
            key = false;
        }
    }
    Stop.onclick = function () {
            clearInterval(timer);
            key = true;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← 窗口尺寸&脚本化CSS →