14-20web APIs学习总结

Web APIs

  • 事件三要素

事件源(谁):触发事件的元素 事件类型(什么事件): 例如 click 点击事件
事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数

  • 执行事件的步骤

1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
     
            console.log('我被选中了');
        }
    </script>
</body>
  • 操作元素
    ​ JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)

  • 改变元素内容(获取或设置)

element.innerText
从起始位置到终止位置的内容
element.innerHTML
innerText改变元素内容

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮,  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
     
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        function getDate() {
     
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

innerText和innerHTML的区别

获取内容时的区别:
​ innerText会去除空格和换行,而innerHTML会保留空格和换行

设置内容时的区别:
​ innerText不会识别html,而innerHTML会识别

案例代码

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '今天是: 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '今天是: 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>
  • 常用元素的属性操作
    1.innerText、innerHTML 改变元素内容
    2.src、href
    3.id、alt、title

  • 获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

案例代码

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
     
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
     
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>
  • 案例:分时问候
<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断,所以需要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
        // 需要一个div元素,显示不同问候语,修改元素内容即可
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
     
            img.src = 'images/s.gif';
            div.innerHTML = '亲,上午好,好好写代码';
        } else if (h < 18) {
     
            img.src = 'images/x.gif';
            div.innerHTML = '亲,下午好,好好写代码';
        } else {
     
            img.src = 'images/w.gif';
            div.innerHTML = '亲,晚上好,好好写代码';

        }
    </script>
</body>
  • 表单元素的属性操作

利用DOM可以操作如下表单元素的属性 type、value、checked、selected、disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。

案例代码

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
     
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

  • 样式属性操作

1.element.style 行内样式操作
2.element.className 类名样式操作 我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式

方式1:通过操作style属性
元素对象的style属性也是一个对象!

元素对象.style.样式属性 = 值;

案例代码

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
     
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

排他思想

1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
1.// 给button遍历绑定事件 不然只能一个一个的绑定事件

重点!!!

// 这个的for循环开始已经结束了
所以能用btns[i],需要用this,循环完了i已经等于5了,最大的下标为4,所以为undefined

  • tab栏点击改变颜色案例
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<scritpt>
	//1.获取元素
    var btns = document.querySelectorAll('button');
    //2.绑定事件 设置程序
    // 给button遍历绑定事件 不然只能一个一个的绑定事件
    for (var i = 0; i < btns.length; i++) {
     
        btns[i].addEventListener('click', function () {
     
            // 这个的for循环开始已经结束了  所以能用btns[i],
            // 后面i已经为5了,所以为undefined;
            
            // 排他思想
            // 遍历把所有人干掉 包括我自己
            for (var j = 0; j < btns.length; j++) {
     
                btns[j].style.backgroundColor = '';
            }
            
            // 给自己套复活甲 复活
            this.style.backgroundColor = 'skyblue';
        })
    }

</script>
  • 隔行变色案例
    这里最好是通过类名来修改属性,不要修改js函数里面的内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
     
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
     
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
     
            height: 30px;
        }

        tbody td {
     
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
     
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.循环注册事件
        for (var i = 0; i < trs.length; i++) {
     
            trs[i].addEventListener('mouseover', function () {
     
                //第一种方法  利用排他思想
                // for (var j = 0; j < trs.length; j++) {
     
                // trs[j].className = '';
                // }
                this.className = 'bg'
            })
            // 第二种 正常方法 鼠标移入和移出时候 修改类名 来修改属性
            trs[i].addEventListener('mouseout', function () {
     
                this.className = '';
            })
        }

    </script>
</body>

</html>
  • tab栏切换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        li {
     
            list-style-type: none;
        }

        .tab {
     
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
     
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
     
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
     
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
     
            padding: 20px 0 0 20px;
        }

        .item {
     
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        //1. 上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
        // 获取元素
        // var tab_list = document.querySelector('.tab_list');//这里的名字一定要是带.的类名!!!!!
        // var lis = document.querySelectorAll('li');
        // var items = document.querySelectorAll('.item');//这里的名字一定要是带.的类名!!!!!
        // for (var i = 0; i < lis.length; i++) {
     
        //     lis[i].setAttribute('index', i)//一定要注意 这是set设置,不是get获取,不然不会增加index属性
        //     lis[i].onclick = function () {
     
        //         for (var i = 0; i < lis.length; i++) {
     
        //             lis[i].className = '';
        //         }
        //         //留下我自己
        //         this.className = 'current';
        //         //2.下面的显示内容模块
        //         var index = this.getAttribute('index');
        //         // 排他思想 干掉其他所有的属性,只保留自己
        //         for (var i = 0; i < items.length; i++) {
     
        //             items[i].style.display = 'none'
        //         }
        //         items[index].style.display = 'block';
        //     }
        // }

        // 1.获取元素
        var lis = document.querySelectorAll('.tab_list li');
        var items = document.querySelectorAll('.tab_con .item');//又是这里有问题,如果是classname一定要注意!!!!前面要带点
        // 2.注册事件
        for (var i = 0; i < lis.length; i++) {
     
            lis[i].index = i;
            lis[i].onclick = function () {
     
                for (var i = 0; i < lis.length; i++) {
     
                    lis[i].classList.remove('current');
                }
                this.classList.add('current')
                var index = this.index;
                for (var j = 0; j < items.length; j++) {
     
                    items[j].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>
  • 自定义属性操作
    获取属性值
    div.getAttribute();

设置属性值
div.setAttribute();

移除属性
div.removeAttribute();

  • H5自定义属性
    自定义属性的目的:是为了保存并使用数据.有些数据可以保存在页面中而不保存到数据库中

自定义属性获取通过getAttribute(‘属性名’)获取.

1.第一种获取方法:getAttribute(‘data-index’);
getAttribute(‘data-list-name’);
2.第二种和获取方法:dataset.listName;
dataset[‘listName’]

  • 节点操作
  • 父级节点

console.log(erweima.parentNodae);

  • 子元素节点

1.第一种:console.log(ul.childNodes)(基本用不到)
2.第二种:console.log(ul.children);(最常用的) console.log(ul.children[0]);获取第一个子节点
console.log(ul.children[ul.children.length-1]);

  • 兄弟节点
    1.上/下一个兄弟节点

1.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
2.previousSibling 上一个兄弟节点

2.得到上/下一个兄弟元素节点

1.nextElementSibling 得到下一个兄弟元素节点
	2.previousElementSibling  上一个兄弟元素节点

兄弟节点 兼容性解决方案

function getNextElementSibling(element) {
     
      var el = element;
      while (el = el.nextSibling) {
     
        if (el.nodeType === 1) {
     
            return el;
        }
      }
      return null;
    }  
  • 创建节点
var li = document.createElement('li)
  • 添加节点
    1.将一个节点添加到指定父节点的子节点列表末尾,类似于css的after伪元素
1.node.appendChild(child)

2.将一个节点添加到父节点指定子节点前面.类似css里面的before伪元素
1.创建元素节点

var li = document.creareElement('li');

2.添加节点 node.appendChild(child) node父级 child 是子级 后面追加元素

var ul = docunment.querySelector('ul');
	ul.appendChild(li);

3.添加节点 node.insertBefor(child,指定元素);

var lili = document.createElement('li');
ul.insertBefore(lili,ul.chileren[0]); 
  • 案例 简单版发布留言
	<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
    	1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        2.注册事件
        btn.onclick = function(){
     
        	1.创建子元素
        	var li = document.createElement('li');
        	先有li才能赋值
        	li.innerHTML = text.value;
        	2.添加元素
        	ul.insertBefor(li,ul.children[0]);
}
       
    </script>
</body>

键盘事件

 <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
     
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
     
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
     
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
  • 键盘事件对象
    使用keyCode属性判断用户按下哪个键
  <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
     
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
     
                alert('您按下的a键');
            } else {
     
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
     
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>
  • 案例:模拟京东按键输入内容
    当我们按下 s 键, 光标就定位到搜索框(文本框获得焦点)。

注意:触发获得焦点事件,可以使用 元素对象.focus()

   <input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
		// 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
     
            // 判断keyCode的值
            if (e.keyCode === 83) {
     
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>
  • 案例:模拟京东快递单号查询
    要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。
 <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
		// 给输入框注册keyup事件
        jd_input.addEventListener('keyup', function() {
     
				// 判断输入框内容是否为空
                if (this.value == '') {
     
                    // 为空,隐藏放大提示盒子
                    con.style.display = 'none';
                } else {
     
                    // 不为空,显示放大提示盒子,设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        // 给输入框注册失去焦点事件,隐藏放大提示盒子
        jd_input.addEventListener('blur', function() {
     
                con.style.display = 'none';
            })
        // 给输入框注册获得焦点事件
        jd_input.addEventListener('focus', function() {
     
            // 判断输入框内容是否为空
            if (this.value !== '') {
     
                // 不为空则显示提示盒子
                con.style.display = 'block';
            }
        })
    </script>
  • BOM
    页面(窗口)加载事件(2种)
    第1种 window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
    第2种DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。

​ IE9以上才支持!!!

​ 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。

  <script>
        window.addEventListener('load', function() {
     
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
     
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
     
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
     
            alert(33);
        })
    </script>
  • 调整窗口大小事件
    window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
    注意:
    1.只要窗口大小发生像素变化,就会触发这个事件.
    2.利用这个完成响应式布局.window.innerWidth当前屏幕的宽度
<script>
    // 注册页面加载事件
    window.addEventListener('load', function() {
     
        var div = document.querySelector('div');
    	// 注册调整窗口大小事件
        window.addEventListener('resize', function() {
     
            // window.innerWidth 获取窗口大小
            console.log('变化了');
            if (window.innerWidth <= 800) {
     
                div.style.display = 'none';
            } else {
     
                div.style.display = 'block';
            }
        })
    })
</script>
<div></div>
  • 定时器(两种)
    setTimeout()
    setInterval()
    setTimeout()炸弹定时器
    开启定时器
    普通函数是按照代码顺序直接调用。

简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
例如:定时器中的调用函数,事件处理函数,也是回调函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

<script>
    // 回调函数是一个匿名函数
     setTimeout(function() {
     
         console.log('时间到了');

     }, 2000);
    function callback() {
     
        console.log('爆炸了');
    }
	// 回调函数是一个有名函数
    var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
</script>

案例:5秒后关闭广告

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
		// 开启定时器
        setTimeout(function() {
     
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>
  • 停止定时器
  <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
		// 开启定时器
        var timer = setTimeout(function() {
     
            console.log('爆炸了');
        }, 5000);
		// 给按钮注册单击事件
        btn.addEventListener('click', function() {
     
            // 停止定时器
            clearTimeout(timer);
        })
    </script>
  • setInterval() 闹钟定时器
    开启定时器
<script>
    // 1. setInterval 
    setInterval(function() {
     
        console.log('继续输出');
    }, 1000);
</script>

案例:倒计时

  <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素(时分秒盒子) 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
     
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
  • 停止定时器:clearInterval()
    案例:发送短信倒计时
    ​ 点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信。
 手机号码: <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
		// 全局变量,定义剩下的秒数
        var time = 3; 
		// 注册单击事件
        btn.addEventListener('click', function() {
     
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function() {
     
                // 判断剩余秒数
                if (time == 0) {
     
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
     
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>
  • location对象
    location 对象的属性.
    案例:5分钟自动跳转页面
   <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
     
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
     
            if (timer == 0) {
     
                location.href = 'http://www.itcast.cn';
            } else {
     
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>

你可能感兴趣的:(JavaScript)