7.26-7.31周报

最新推荐文章于 2024-08-13 22:07:58 发布

qq_52314424

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量76

点赞数

分类专栏：笔记文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_52314424/article/details/119318084

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

周报

7.26

封装函数typeof

function type(target) {
            var template = { //区分不同类型的对象
                "[object Array]": "array",
                "[object Object]": "object",
                "[object Number]": "number-object",
                "[object Boolean]": "boolean - object",
                "[object String]": "string - object"
            }
            if (target == null) { //特殊情况null
                return null;
            } else if (typeof (target) == 'object') {
                var str = Object.prototype.toString.call(target);
                return template[str];
            } else {
                return typeof (target);
            }
        }

数组去重（对象属性不能重复）

        var arr = [1, 1, 1, 0, 0, 0, 'a', 'b', 'a', 'b'];
        Array.prototype.unique = function () {
            var temp = {},
                arr = [],
                len = this.length;
            for (var i = 0; i < len;i++){
                if(!temp[this[i]]){
                    temp[this[i]] = 'abc';
                    arr.push(this[i]);
                }
            }
                return arr;
        }
        var myArr = arr.unique();

数组去重2（双层for循环）

        function unique(arr) {
            for (var i = 0; i < arr.length; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        j--;
                    }
                }
            }
            return arr;
        }
        var arr = [1, 1, 'true', 'true', true, true, 10, 10, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
        console.log(unique(arr));

数组去重3（indexOf减少一层for循环）

        var arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9, 9,];
        var newArr = [];
        arr.forEach(function (val) {
            if (newArr.indexOf(val) === -1) {//如果检索值没有出现则返回-1
                newArr.push(val);
            }
        })
        console.log(newArr);

数组去重4（include减少一层循环）

       var arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9, 9,];
        var newArr = [];
        var len = arr.length;
        arr.forEach(function(val){
            if(!newArr.includes(val)){//如果数组里面没有val，则铺设val。includes(val)有val返会true，没有返回false
                newArr.push(val);
            }

        })
        console.log(newArr);

闭包练习

        var obj = {
            a: 'obj',
            foo: function () {
                console.log('foo:', this.a)
                return function () {
                    console.log('inner:', this.a)
                }
            }
        }
        var a = 'window';
        var obj2 = { a: 'obj2' }
        obj.foo()(); // -->obj window
        obj.foo.call(obj2)(); //--> obj2 window
        obj.foo().call(obj2);//-->obj obj2

7.27

create创建对象

   var demo = {
            lastName : 'deng'
        }

        var obj = Object.create(demo);//把demo当作原型
        // obj = {
        //     __proto__ : demo;
        // }

try…catch(查错)

        //在try里面发生错误，不会执行错误后的try里面的代码
        //try内部代码错误，catch内的代码才会执行
        try{
            console.log('a');
            console.log(b);
            console.log('c');

        }catch(e){
            alert(e.name + ' : '+e.message);
        }
        console.log('d');

Error.name 对应的六种错误信息

1.EvalError：eval()的使用与定义不一致
2.RangeError：数组越界
3.ReferenceError：非法或不能识别引用数值
4.SyntaxError：发生语法解析错误
5.TypeError：操作数类型错误
6.URIError：URI函数使用不当

es5.0严格模式
1.启用es5.0严格模式：“use strict”
2.es5.0禁用with(),arguments.callee,func.callee
3.预编译this指向undefined
4.eval("")可以把字符串当代码执行

7 .28

dom初探三个小练习
1.选项卡

 <style>
        .wrapper div {
            display: none;
            width: 200px;
            height: 200px;
            border: 2px solid rgb(238, 47, 255);
        }

        .active {
            background-color: #0d969b;
        }
    </style>
        <div class="wrapper">
        <button class="active">111</button><button>222</button><button>333</button>
        <div class="content" style="display: block;">yyy</div>
        <div class="content">zzz</div>
        <div class='content'>xxx</div>
    </div>
    <script type="text/javascript">

        var btn = document.getElementsByTagName('button');
        var div = document.getElementsByClassName('content');


        for(var i = 0;i < btn.length;i ++){
            (function(n){
                btn[n].onclick = function(){
                    for(var j = 0;j < btn.length;j ++){
                        btn[j].className = '';
                        div[j].style.display = 'none';
                    }
                    this.className = 'active';
                    div[n].style.display = 'block';
                }
            }(i))
        }
   </script>

2.扫雷格子

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            box-sizing: border-box;
            width: 10px;
            height: 10px;
            /* border:1px solid black; */
        }
        ul{
            list-style: none;
            width: 200px;
            height: 200px;
        }
    </style>
            <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>

    </ul>
    <script>
        var ul = document.getElementsByTagName("ul")[0];
        ul.onmouseover = function(e){
            var event = e || window.event;
            var target = event.target || event.srcElement;
            target.style.backgroundColor = "rgb(0,255,"+ target.getAttribute('img-date') +")" ;
            target.setAttribute('img-date',parseInt(target.getAttribute('img-date')) + 5);
        }
    </script>

3.定时器

    <button style="width: 100px; height: 50px;background-color: linear-gradent(to left,#999,#f088de);
    position: absolute;top: 50%;left: 50%;">加速</button>
    <script type="">
        var div = document.createElement("div");//在JavaScript里写入div
        document.body.appendChild(div);//把div放入HTML里
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = 'red';
        div.style.position = 'absolute';
        div.style.left = '0';
        div.style.top = '0';

        // 定时器
        // var speed = 1;
        // var timer = setInterval(function(){
        //     speed += speed/7;
        //     div.style.left = parseInt(div.style.left) + speed + 'px';
        //     div.style.top = parseInt(div.style.left) + speed + 'px';
        //     if(parseInt(div.style.top) > 200 && parseInt(div.style.left) > 200){
        //         clearInterval(timer);//停止定时器
        //     }
        // },100);//setInterval每隔100毫秒执行函数一次

        //敲击键盘上下左右产生效果
        var btn = document.getElementsByTagName('button')[0];
        var speed = 5;
        btn.onclick = function(){
            speed ++;
        }
        document.onkeydown = function (e) {
            switch (e.which) {
                case 38://上
                    div.style.top = parseInt(div.style.top) - speed + 'px';
                    break;
                case 40://下
                    div.style.top = parseInt(div.style.top) + speed + 'px';
                    break;
                case 37://左
                    div.style.left = parseInt(div.style.left) - speed + 'px';
                    break;
                case 39://右
                    div.style.left = parseInt(div.style.left) + speed + 'px';
                    break;
                
                }
        }

    </script>

7.29

dom选择器
1.对节点的增删改查

        document.getElementById('');
        document.getElementsByClassName('');
        document.getElementsByTagName('')[0];

2.遍历节点数
——parentNode 父节点（最顶端为#document）
——childNodes 子节点们
——firstChild 第一个子节点
——lastChild 最后一个子节点
——nextSibling 后一个兄弟节点
——previousSibling 前一个兄弟节点

// 返回div的元素子节点（不用children）
    	    var div = document.getElementsByTagName('div')[0];
            function retElementchild(node){
            var len = node.childNodes.length;
            var arr =[];
            var child = node.childNodes;
            for(var i= 0;i < len; i++){
                if(child[i].nodeType == 1){
                    arr.push(child[i]);
                }
            }
            return arr;
        }
        console.log(retElementchild(div));

3.基于元素节点遍历
——parentElement 父元素节点
——children 元素子节点
——firstElementChild 第一个子元素节点
——lastElementChild 最后一个子元素节点
——nextElementSibling 后一个兄弟元素节点
——previousElementSibling 前一个兄弟元素节点
4.节点的属性
nodeName 节点类型（返回#text，#comment，#document）
nodeValue 文本节点或者注释节点可读写
nodeType ：元素节点：1，属性节点：2，文本节点：3，
注释节点：8，document：9，DocumentFragment：11.
attributes 可改变属性名，不能改属性值
getattribute 获取属性值
setattribute( , ) 给元素节点加上属性名和属性值

7.30 继承树

返回第几层父级元素

  //返回第几层父级元素
        function retParent(elem,n){
            for( var i = 0; i < n ;i ++){
                elem = elem.parentElement;
            if(elem == null){
                return null;
            }
            }
            return elem;
        }

找该元素的子元素节点

        var div = document.getElementsByTagName('div')[0];
        var i = document.getElementsByTagName('i')[0];
        function myChildren(node) {
            var tar = node.childNodes,
                arr = [],
                len = node.childNodes.length;
            for (var i = 0; i < len; i++) {
                if (tar[i].nodeType == 1) {
                    arr.push(tar[i]);
                }
            }
            return arr;
        }
        console.log(myChildren(div));

负数返回元素的第n个父级元素，正数返回n个子元素，0返回自己


        function retSibling(e, n) {
            while (e && n) {

                if (n > 0) {
                    e = e.nextElementSibling;
                    n--;

                } else {
                    e = e.previousElementSibling;
                    n++;
                }
            }
            return e;
        }
        var strong = document.getElementsByTagName('strong')[0];
        console.log(retSibling(strong, -2));

增加一个元素节点
——document.creatElement("")
——document.createTextNode("")
——document.creatComment("")
插入一个元素节点
——appendChild 相当于push，插入最后
-——div.insertBefore（a，b）把a插入div里的b之前

//用js把标签插入到html里
        var div = document.createElement('div');
        var p = document.createElement('p');
        div.setAttribute('class','example')
        p.setAttribute('class','solgan');
        var text = document.createTextNode('yzx beautiful!');
        div.appendChild(p);
        p.appendChild(text);
        document.body.appendChild(div);

        // 把元素插入目标元素之后
        Element.prototype.insertAfter = function (target, a) {

            var beforeNode = a.nextElementSibling;
            if (beforeNode == null) {
                this.appendChild(target);
            } else {
                this.insertBefore(target, beforeNode);
            }

        }
        var div = document.getElementsByTagName('div')[0];
        var b = document.getElementsByTagName('b')[0];
        var span = document.getElementsByTagName('span')[0];
        var p = document.createElement('p');

7.31

date对象

属性	描述
constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

方法	描述
Date()	返回当前时间
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setTime()	以毫秒设置 Date 对象。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。

//时间差
         var firstTime = new Date().getTime();
        for(var i = 0;i <1000000; i++){
        }
        var lastTime = new Date().getTime();
        console.log(lastTime - firstTime);

定时器

        //定时循环器(setInterval)
        var date = new Date();
        date.setMinutes(32);
        setInterval(function () {
            if (new Date().getTime() - date.getTime() > 1000) {
                console.log('yzx yyds!');
            }
        }, 1000);


        定时循环器的停止(clearInterval)
        var i = 0;
        var timer = setInterval(function () {
            console.log(i++);
            if (i > 10) {
                clearInterval(timer);
            }
        }, 1000);

        定时器(setTimeout)
        setTimeout(function(){  //隔1000毫秒之后执行一次程序(只执行一次)
            console.log('a');
        },1000);

        //清除setTimeout(clearTimeout);
        var timer = setTimeout(function () {
            console.log('a');
        }, 1000);
        clearTimeout(timer);

三分钟定时器

  minutes: <input type="text" name="" id="" value="0">
    seconds: <input type="text" name="" id="" value="0">
    <script>
        var min = document.getElementsByTagName('input')[0];
        var sec = document.getElementsByTagName('input')[1];
        var minutes = 0, seconds = 0;
        var timer = setInterval(function () {
            seconds++;
            if (seconds > 59) {
                minutes++;
                seconds = 0;
            }
            sec.value = seconds;
            min.value = minutes;
            if (minutes == 3) {
                clearInterval(timer);
            }


        }, 1000);
            </script>