03【Web】基础-JavaScript-事件

东海若知意

已于 2023-06-05 09:39:03 修改

阅读量430

点赞数

分类专栏： Web 文章标签： javascript 前端 html

于 2023-06-03 21:00:16 首次发布

极正君

本文链接：https://blog.csdn.net/qq_44098341/article/details/131025548

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的事件处理，包括事件介绍、事件流（冒泡和捕获）、Event对象及其属性、事件的五种绑定方式，以及鼠标事件、键盘事件和文档事件等。文章通过实例展示了如何在HTML元素属性和JavaScript中绑定和处理事件，强调了标准DOM事件监听方法和IE的attachEvent/detachEvent的区别和使用。

摘要由CSDN通过智能技术生成

03【Web】基础-JavaScript(P4)-事件

本系列文章，针对Web前端的相关知识进行了详细的介绍

前言

JS事件已经不再像从前一样了，目前对选择器的支持，早已不再局限于 getElelmentById等呆板的方法。目前原生的JS支持按找元素，id，class等等形式的选择。
如在开发中遇到具体问题，参阅下面的网址，基本可以解决，无需再漫山遍野的查找问题答案。MDN

Chapter03 事件处理

1.事件介绍

JS采用事件驱动的响应机制，在用户页面上进行交互操作时会触发相应的事件。当事件发生时，系统调用JS中指定的事件处理函数进行处理。事件产生于响应都是由浏览器来完成，HTML中设置那些元素响应哪些事件，JS告诉浏览器如何处理这些响应事件。

JS事件分为两大类：

操作事件：用户在浏览器中操作所产生的事件。
鼠标事件(Mouse Events)、
键盘事件(Keyboard Events)、
表单及表单元素事件(Form & Element Events)：表单的提交、重置和表单元素的改变、选取、获取/失去焦点

文档（页面）事件：文档本省所产生的事件，

如页面加载完毕，页面卸载，关闭页面窗口，

对HTML元素的绑定事件的方式包括HTML元素的属性绑定和JS脚本的动态绑定

属性绑定：在HTML标签内使用以on开头的某一事件处理函数进行绑定
JS脚本绑定：获取文档中的某一对象，然后通过on口头的事件绑定指定的事件处理函数

1.1 理解事件

JS采用事件驱动的响应机制，用户在进行界面交互操作时会触发相应的事件

事件（Event）驱动：指页面中相应用户操作的一种处理方式
事件（Event）处理：在相应用户操作时调用的代码

事件的产生和响应都是浏览器来完成的，包括HTML代码中设置哪些元素响应哪些事件，JS告诉浏览器如何处理这些事件

当浏览器检查到事件（鼠标事件、键盘事件、文档事件、表格事件、表单事件、表单元素事件）时，会调用事先指定的事件处理函数进行处理，在此过程中，事件中需要传递的信息都是通过事件对象来完成的。

1.2 事件流和事件对象

1.2.1 DOM事件流

也称事件传播过程，即，在树形的DOM文档中，其中一个HTML元素产生一个事件时，事件会在元素节点与根节点之间按特定顺序传播，传播路径经过的节点都会收到该事件

DOM事件流包含两种类型：

事件冒泡（Event Bubbling）:从叶子节点朝着祖先节点一直传递到根节点，事件从特定的目标向最不特定的目标传递
事件捕获（Event Capturing）:从顶层元素一直传递到最精确的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-10 事件流- 冒泡事件，捕获事件</title>
    <script type="text/javascript">
        /* 冒泡事件 */
        function show(sText) {
            var oDiv = document.getElementById("display");
            oDiv.innerHTML += sText;
        }

        /* 捕获事件 */
        window.onload = function () {
            var mybody = document.getElementById('mybody');
            var mydiv = document.getElementById('mydiv');
            var myp = document.getElementById('myp');
            /* addEventListener的第三个参数，false: 冒泡事件；true:捕获事件 */
            mybody.addEventListener('click',function () { show('body <br>') },true);
            mydiv.addEventListener('click',function () { show('div <br>') },true);
            myp.addEventListener('click',function () { show('p <br>') },true);
        }
    </script>
</head>

<body id="mybody" onclick="show('body <br>')">
    <div id="mydiv" onclick="show('div <br>');">
        <p id="myp" onclick="show('p <br>');"> 点击我 </p>
    </div>
    <div id="display"></div>
</body>

</html>

1.2.2 Event对象

1. 事件对象

事件对象即：**Event对象 **是JS中极为重要的对象，其中包括当前事件触发对象的状态，如键盘的按键、鼠标的状态(左键、右键)、鼠标在屏幕的位置、窗口的改变、表单的填写和提交，大多数event对象的属性是只读的，因为Event是触发事件对象的动作快照。
Event提供两种范式阻止事件的进一步传递
- prevetDefault()方法，用以通知浏览器不再执行与事件关联的默认动作，
- stopPropagation()用于终止事件的进一步传播

2. 事件对象常用属性

一般使用 e=event||window.event 获取触发事件的对象，是为了兼容不同浏览器获取对象的方式不同
标准DOM中的事件对象
- 标准DOM浏览器检测到发生了某个事件时，将自动创建一个Event对象，并隐式的将该对象作为事件处理函数的第一个参数传入

// IE中得到的事件对象
op.onclick=function(){var oEvent=window.event;}
// 标准DOM中得到的事件对象
op.onclick=function(oEvent){// 使用参数进行操作; }
// 兼容不同浏览器
op.onclick=function(oEvent){
    if(window.event){
        oEvent=window.event;
    }
}

Event事件对象的常用属性

IE	标准DOM	说明
e.cancelBubble	stopPropagation()	若事件句柄取消事件传播到包含的对象，必须将该书香设置为true
e.srcElement	e.target	对生成事件的window对象、document对象或element对象的引用返回触发事件的目标元素
e.toElement	无	对于mouseover和mouseout事件，该属性代之移入鼠标的元素
(e.X,e.Y)	无	事件发生位置的X和Y坐标, 他们对应于用CSS动态定位的最外层包容元素
(e.offsetX,e.offsetY)	无	发生事件的对象，在事件源元素的坐标系统中的X和Y坐标
(e.clientX,e.clientY)	同IE	返回事件发生时鼠标指针相对当前窗口的水平、垂直坐标
(e.screenX,e.screenY)	同IE	返回事件发生时鼠标指针相对屏幕的水平、垂直坐标
e.altKey e.shiftKey e.ctrlKey	同IE	返回一个布尔值，判断当前alt、ctrl、shift键是否一直被按住
e.type	同IE	返回发生事件的类型，如submit、click、load
e.button	同IE	返回指示是哪个鼠标按键点击时触发了当前事件，包括: 0（左键）、1（中键）、2（右键）、4（IE浏览器中的中键）
e.returnValue	同IE	如果设置了该属性，它的值比事件句柄的返回值优先级高, 将该属性设置为false,可以取消发生事件源元素的默认动作
e.keyCode	同IE	对于keypress事件：返回被敲击键盘的uncode字符码对于keyup,keydown事件：指定被敲击键的虚拟键盘码，但虚拟码可能与键布局相关

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-11 事件属性及兼容性</title>
    <script type="text/javascript">
        function headle(event) {
            if(window.event){
                event=window.event;
            }
            var target;
            if(event.srcElement){
                target=event.srcElement;
            }else{
                target=event.target;
            }
            alert(target.tagName);
        }
        onload=function(){
            var img=document.getElementsByTagName("img")[0];
            img.onclick=headle;
        }
    </script>
</head>

<body>
    <img src="./img/cloudwhales.png" alt="">
</body>

</html>

1.3 示例

显示鼠标移动时的信息

/* 显示鼠标移动时的坐标信息 */
this.onmousemove = function (event) {
    var mouseX = event.screenX;
    var mouseY = event.screenY;
    showMouseInfo.value = mouseX + ',' + mouseY;
};

裁切图片区域

/* 获取图片对象的位置，并根据鼠标移动，选中图片上60*60区域，通过canvas对象重新绘制选中的图形 */
function enlargre(e) {
    /* 获取图片 */
    var imge=document.getElementsByTagName('img')[0];
    var e = e || window.event;
    var x = e.clientX - 30;
    /* imge.offsetTop表示距离屏幕右上角的高度偏移，imge.offsetLeft表示左侧偏移 */
    var y = e.clientY - imge.offsetTop - 30;
    context.drawImage(img, x, y, 60, 60, 0, 0, canvas.width, canvas.height);
}

操作表单元素

/* 全选商品 */
function checkAll(event) {
    if (event.srcElement.checked) {
        //如果是顶部操作栏是选中动作，则进行全选操作
        var inputList = document.getElementsByTagName('input');
        for (let i = 0; i < inputList.length; i++) {
            if (inputList[i].type == "checkbox") {
                inputList[i].checked = true;
            }
        }
    } else {
        //如果是顶部操作栏是取消选中动作，则进行全不选操作
        var inputList = document.getElementsByTagName('input');
        for (let i = 0; i < inputList.length; i++) {
            if (inputList[i].type == "checkbox") {
                inputList[i].checked = false;
            }
        }
    }
    //最后将页面的数据收集后计算
    calSumMoney();
}
/* 全选店铺 */
function checkBrand(event) {
    if (event.srcElement.checked) {
        var checboxlist = event.srcElement.form.goods;
        //如果当前店铺的操作栏多选框被选中，则将该店铺的商品全选
        for (let i = 0; i < checboxlist.length; i++) {
            checboxlist[i].checked = true;
        }
    } else {
        //如果当前店铺的多选框被取消选中，则将该店铺的商品全不选
        var checboxlist = event.srcElement.form.goods;
        for (let i = 0; i < checboxlist.length; i++) {
            checboxlist[i].checked = false;
        }
    }
    // 检查以下全选复选框的状态是否可以变成全选
    selectAllState();
    //最后将页面的数据收集后计算
    calSumMoney();
}
/* 选中当前 */
function checkthis(event) {
    /* 选中当前本来可以不进行额外操作，但是因为商铺全选的存在，
    在选中当前后要根据店铺选中的情况改变，当前商铺的全选的状态 */
    if (event.srcElement.checked) {
        var j = 0;
        var checkboxList = event.srcElement.form.goods;
        for (let i = 0; i < checkboxList.length; i++) {
            if (checkboxList[i].checked) {
                j++;
            } else {
                break;
            }
        }
        if (j == checkboxList.length) {
            event.srcElement.form.checkshop.checked = true;
        }
    } else {
        event.srcElement.form.checkshop.checked = false;
    }
    // 检查以下全选复选框的状态是否可以变成全选
    selectAllState();
    //最后将页面的数据收集后计算
    calSumMoney();
}

2. 事件的5种绑定方式

绑定HTML元素属性
绑定DOM对象属性
标准DOM事件监听方法
非标准DOM（IE中）的事件监听方法

JS的事件作为鼠标、键盘、文档、表格、表单、表单元素等的属性，通常是以on开头的动作，可以采用如下的方式进行绑定。

其中第3、4种方式最为常用，第二种经常出现。而方式1不方便维护，方式5则无法保证除IE外浏览器的兼容性

2.1 绑定HTML元素属性

在控件属性上直接编写流程

<p class="white" id="funcbinding1" 
   onclick="var id=this.id;alert(id); return false;">事件绑定方式1
</p>

2.2 绑定DOM对象属性

在控件属性上指定脚本函数

<h4>2. 行内事件绑定函数名</h4>
<p class="white" id="funcbinding2" onclick="show(this)">事件绑定方式2</p>
<script>
    function show(params) {
        var id = params.id;
        alert(id);
    }
</script>

2.3 在脚本中通过DOM绑定

在JavaScript代码中通过 DOM元素的onclick、onchange等属性绑定。注意此种方式经常出现如下的报错：

Uncaught TypeError: Cannot set properties of null (setting ‘onmouseover’)

是因为 js脚本写在了body前面。网页解释脚本的时候，是从上往下执行，由于解释脚本的时候body还没执行到，所以读取不到这个变量范围，这时候只要把我们写的js脚本的代码写在body下面就可以了。如果在head中编写事件则使用 windows的 onload 方法

<h4>3. 将事件动态绑定到DOM</h4>
<div class="group">
    <p class="white" id="funcbinding3" name="funcbinding3">事件绑定方式3-1</p>
    <p class="white" id="funcbinding3" name="funcbinding3">事件绑定方式3-2</p>
    <p class="white" id="funcbinding3" name="funcbinding3">事件绑定方式3-3</p>
    <p class="white" id="funcbinding3" name="funcbinding3">事件绑定方式3-4</p>
</div>
<script>
    var plist = document.getElementsByName('funcbinding3');
    for (let i = 0; i < plist.length; i++) {
        plist[i].onclick = function (event) {
            e = event.target || event.srcElement;
            alert((i++) + ":" + e.id);
        }
    }
</script>

2.4 标准DOM事件监听方法

使用W3C标准提供的 addEventListener 和 removeEventListener

[object].addEventListener(“事件类型”,“处理函数”,“冒泡事件或捕获事件”)；

[object].removeEventListener(“事件类型”,“处理函数”,“冒泡事件或捕获事件”)；

这两个函数作为W3C标准被FireFox和Chrome所支持，虽然早期的IE6/IE7/IE8，并未支持两个API，但从IE9之后均可正常使用

<h4>5. addEventListener/removeEventListener 绑定方式</h4>
<!-- 
    addEventListener(type,listener,useCapture)
      type: 事件类型，此时不含"on"，使用的是诸如 click、mousemover、keydown等，不带On的动作
      listener: 事件处理函数
      useCapture：代表事件冒泡类型，是事件冒泡还是事件捕获：false 代表事件冒泡，true代表事件捕获
    同一个事件处理函数可以绑定2次，但必须是一次捕获一次冒泡。 如果绑定的事件冒泡类型相同，则只执行一次
-->
<div class="funcbinding5 group">
    <span class="">A
        <span class="">B
            <span class="">C
                <span class="">D</span>
            </span>
        </span>
    </span>
</div>
<script>
    window.onload = function () {
        var spanlist = document.getElementsByTagName('span');
        for (let i = 0; i < spanlist.length; i++) {
            const element = spanlist[i];
            element.addEventListener('click', function show() {
                alert(i + ":" + this.innerText);
            }, true);  // 捕获型事件
        }
    }
</script>

2.5 在IE下的attachEvent和detachEvent

在IE下使用attachEvent/detachEvent 函数进行事件绑定和取消

【object】.attachEvent(“事件类型”，”处理函数“)；// 添加事件监听
【object】.detachEvent(“事件类型”，“处理函数”)；// 取消监听

虽然attachEvent/detachEvent 函数支持IE6~IE11，但是FireFox和Chrome浏览器均不支持该方法，不推荐此方法。存在兼容性不好的问题。同时它也不是W3C标准

注意：标准DOM下使用的事件类型不需要以on开头，IE监听方法中的事件类型则以on开头

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-08 标准DOM监听事件与IE监听事件的实现</title>

    <script type="text/javascript">
        var show = function () {
            alert("hello standard DOM");
        }
        window.onload = function () {
            var testAdd = document.getElementById('testAddEvent');
            var testRemove = document.getElementById('testRemoveEvent');

            var testAttach = document.getElementById('testAttach');
            var testDatach = document.getElementById('testDetach');

            testAdd.addEventListener("click", show, false);
            /* 解除方式1 */
            /* testRemove.addEventListener("click", function () {
                 testAdd.removeEventListener("click", show, false)
             }, false); */
            /* 解除方式2 */
            testRemove.onclick = function () {
                testAdd.removeEventListener('click', show, false);
            }

            testAttach.attachEvent("click",show);
            testDatach.onclick=function(){
                testAttach.detachEvent("click",show);
            }
        }
    </script>
</head>

<body>
    <h2>标准DOM 事件监听</h2>
    <input type="button" value="测试事件绑定" id="testAddEvent">
    <input type="button" value="测试事件解除" id="testRemoveEvent">

    <h2>IE 事件监听</h2>
    <input type="button" value="测试事件绑定" id="testAttach">
    <input type="button" value="测试事件解除" id="testDetach">
</body>

</html>

3.事件分类

3.1 鼠标事件

动作	事件	动作	事件	动作	事件	动作	事件
单机	onclick	双击	ondblclick	按下	onmousedown
进入	onmouseover	移出	onmouseout	悬停	onmouseup	移动	onmousemove

示例：

<h2>8-12 鼠标事件</h2>
<div class="dl_bg">
    <dl>
        <dt>
	       <img src="img/card/01.jpg" alt="" onclick="this.src='img/card/10.jpg'">
        </dt>
        <dd>单击事件</dd>
    </dl>
    <dl>
        <dt>
            <img src="img/card/01.jpg" alt="" onclick="this.src='img/card/11.jpg';alert('双击了图片')">
        </dt>
        <dd>双击事件</dd>
    </dl>
    <dl>
        <dt><img src="img/card/01.jpg" alt="" onmouseover="this.src='img/card/12.jpg'"
            onmouseout="this.src='img/card/01.jpg'"></dt>
        <dd>移动悬停</dd>
    </dl>
    <dl>
        <dt><img src="img/card/01.jpg" alt=""  onmousedown="this.src='img/card/13.jpg'"
            onmouseup="this.src='img/card/01.jpg'"></dt>
        <dd>按下松下</dd>
    </dl>
    <dl>
        <dt><img src="img/card/01.jpg" alt=""  onmouseover="changeImage(event)"></dt>
        <dd>鼠标移动四角</dd>
    </dl>
</div>
<script type="text/javascript">
    function changeImage(e) {
        e = e || window.event;
        var myImageList = document.getElementsByTagName('img');
        var myImage = myImageList[myImageList.length - 1];
        var x = e.clientX - myImage.offsetLeft;
        var y = e.clientY - myImage.offsetTop;
        if (x < myImage.width / 2 && y < myImage.height / 2) {
            myImage.src = 'img/card/11.jpg';
        } else if (x < myImage.width / 2 && y > myImage.height / 2) {
            myImage.src = 'img/card/12.jpg';
        } else if (x > myImage.width / 2 && y < myImage.height / 2) {
            myImage.src = 'img/card/13.jpg';
        } else if (x > myImage.width / 2 && y > myImage.height / 2) {
            myImage.src = 'img/card/14.jpg';
        }
    }
</script>

3.2 键盘事件

事件	说明
window.onkeypress	在键盘按键被按下并产生一个字符时触发事件
window.onkeydown	在用户按下一个按键时触发
window.onkeyup	在键盘按钮送开始触发

/* DOM 键盘事件示例： */
var rightImages = ["r0.png", "r1.png", "r2.png"];
var leftImages = ["l0.png", "l1.png", "l2.png"];
var downImages = ["d0.png", "d1.png", "d2.png"];
var upImages = ["u0.png", "u1.png", "u2.png"];
var images = rightImages;
var n = 0;
/* 根据键盘信息操作dom对象 */
function doKeyDown(e) {
    var walkDiv = document.getElementById('walkingDiv')
    var walkPerson = document.getElementById('walkPerson');
    var imgWidth = walkDiv.offsetWidth;
    var imgHeight = walkDiv.offsetWidth;
    var x = dealPx(walkDiv.style.left);
    var y = dealPx(walkDiv.style.top);
    var e = e || window.e;
    var keyID = e.keyCode ? e.keyCode : e.which;
    switch (keyID) {
        case 39:
        case 68:
            if (x + imgWidth < window.innerWidth) {
                x += 10;
            }
            images = rightImages;
            break;
        case 37:
        case 65:
            if (x - 10 >= 0) {
                x -= 10;
            }
            images = leftImages;
            break;
        case 38:
        case 87:
            if (y - 10 >= 0) {
                y -= 10;
            }
            images = upImages;
            break;
        case 40:
        case 83:
            if (y + imgHeight < window.innerHeight) {
                y += 10;
            }
            images = downImages;
            break;
        default: break;
    }
    if (n >= rightImages.length) {
        n = 0;
    }
    walkPerson.src = './img/walker/' + images[n];
    walkDiv.style.left = x + 'px';
    walkDiv.style.top = y + 'px';
    n++;
}
/* px单位设置 */
function dealPx(pixeStr) {
    var pixel = pixeStr.substring(0, pixeStr.indexOf('px'));
    if (pixel == "") {
        return 0;
    } else {
        return parseInt(pixel);
    }
}

计算按键	键码	功能按键	键码	控制按键	键码	控制按键	键码
0	96	F1	112	BackSpace	8	right Arrow	39
1	97	F2	113	Tab	9	Down Arrow	40
2	98	F3	114	Clear	12	Insert	45
3	99	F4	115	Enter	13	Delete	46
4	100	F5	116	shift	16	Num Lock	144
5	101	F6	117	control	17	;:	186
6	102	F7	118	Alt	18	=+	187
7	103	F8	119	Cape Lock	20	-_	189
8	104	F9	120	ESc	27	.>	190
9	105	F10	121	Spacebar	32	/?	191
乘	106	F11	122	Page Up	33	`~	192
加	107	F12	123	Page Down	34	[{	219
Enter	108			End	35	/\|	220
减	109			Home	36	]}	221
点	110			Left Arrow	37
除	111			Up Arrow	38

3.3 HTML文档事件

事件	说明
onload	在页面或图像加载完成后立即触发事件( 可出现在body中 )
onunload	在用户退出页面时触发事件( 可出现在body中 )
window.onresize	在窗口和框架被调整大小时触发事件
onchange	文本框获取焦点后内容发生了改变，并在之后失去焦点时触发
onfous / onblur	任何元素或窗口获取焦点 / 失去焦点时触发
onselect	选择文本框的一个或多个字符时触发
onsubmit	点击submit 类型按钮时触发form表单的action

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-14 Document 事件</title>
    <link rel="stylesheet" href="./css/8-01windowProperty.css">
    <style>
        img{
            width: 256px;
        }
    </style>
</head>

<body>
    <h2>8-14 文档事件</h2>
    <div class="header">
        <img />
        <img />
        <img />
        <img />
    </div>
    <script type="text/javascript">
        var array = [3, 4, 6, 7];
        function initImages() {
            array.sort(randomSort);
            var images = document.getElementsByTagName('img');
            for (let i = 0; i < array.length; i++) {
                images[i].src = 'img/time/num_' + array[i] + '.png';
            }
        }

        function randomSort(a, b) {
            return Math.random(0, 1) > 0.5 ? -1 : 1;
        }

        function resizeImages() {
            var scale = 0.2;
            var images = document.getElementsByTagName('img');

            var resizeWidth = window.innerWidth * scale;
            if (resizeWidth < 100) {
                resizeWidth = 100;
            }
            for (let i = 0; i < images.length; i++) {
                images[i].style.width = resizeWidth + "px";
            }
        }

        window.onload = initImages;
        window.onresize = resizeImages;
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-09 HTML事件</title>
    <link rel="stylesheet" href="./css/democommon.css">
</head>
<body onload="alert('hello')" unonload="alert('bye bye')">
    <form action="https://www.baidu.com" submit="alert('跳转')"> <!-- submit= "return false" -->
        <input type="text" value="a" onfocus="alert('获取焦点')" onblur="alert('失去焦点')">
        <input type="text" value="b" onchange="alert('改变文本框并失去焦点')" onselect="alert('文本被选中')">
        <select name="" id="" onchange="alert('选项改变')">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="tianjin">天津</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>

Chapter04 程序示例

1. 计时器、轮播图、定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSP基础-JavaScript 计时器/轮播图/定时器</title>
    <style>
        #container {
            width: 800px;
            margin: 0 auto;
        }

        #time {
            border: 1px double gray;
            width: 600px;
            height: 60px;
            font: bold small-caps 16px/60px Cambria, "Microsoft Sans Serif";
        }

        #imgBox {
            border: 1px dotted palevioletred;
            width: 600px;
            height: 400px;
        }

        img {
            width: 600px;
            height: 400px;
        }

        #circle {
            width: 600px;
            text-align: center;
            position: absolute;
            margin: 5px auto;
            bottom: 50px;
        }

        span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: snow;
            border-radius: 5px;
            margin-left: 10px;
            opacity: 0.6;
        }

        .select {
            opacity: 1;
        }
    </style>
    <script>
        onload = function () {
            timeInterval();
            imgCarousel();
            createSpan();
        }

        function timeInterval() {
            let start = document.getElementById("start");
            let stop = document.getElementById("stop");
            let info = setInterval(timeCount, 1000);
            stop.onclick = function () {
                clearInterval(info);
                start.removeAttribute("disabled");
            }
            start.setAttribute("disabled", "disabled");
            start.onclick = function () {
                info = setInterval(timeCount, 1000);
            }
        }

        function timeCount() {
            let time = document.getElementById("time");
            let date = new Date();
            let year = pad(date.getFullYear());
            let month = pad(date.getMonth() + 1);
            let day = pad(date.getDate());
            let hour = pad(date.getHours());
            let minutes = pad(date.getMinutes());
            let second = pad(date.getSeconds());
            time.innerText = year + "年" + month + "月" + day + "日" + " " + hour + ":" + minutes + ":" + second;
        }

        function pad(text) {
            if (text < 10) {
                return "0" + text;
            }
            return text;
        }

        function imgCarousel() {
            let box = document.getElementById("imgBox");
            let move = setInterval(carousel, 1000);
            box.onmouseover = function () {
                clearInterval(move);
            }
            box.onmouseleave = function () {
                move = setInterval(carousel, 1000);
            }
        }

        let i = 0;
        let imgs = ["pic1.png", "pic2.png", "pic3.png", "pic4.png", "pic5.png"];

        function carousel() {
            let img = document.getElementsByTagName("img")[0];
            let spans = document.getElementsByTagName("span");
            i++;
            if (i == imgs.length) {
                i = 0;
            }
            img.src = "img/" + imgs[i];
            for (let j = 0; j < spans.length; j++) {
                spans[j].className="";
            }
            spans[i].className="select";
        }

        function createSpan() {
            let str = "";
            for (let j = 0; j < imgs.length; j++) {
                str += "<span></span>";
            }
            document.getElementById("circle").innerHTML = str;
        }
    </script>

    <!-- 计时器 -->
    <script type="text/javascript">
        setTimeout(console.log("111"), 1000);
        function jumpPage() {
            document.location.href = "http://www.baidu.com";
        }
        setTimeout(jumpPage,4000);
    </script>
</head>
<body>
<div id="container">
    <!-- 定时器 -->
    <input type="button" id="start" value="开始">
    <input type="button" id="stop" value="结束">
    <div id="time"></div>
    <!-- 图片轮播 -->
    <div id="imgBox">
        <img src="./img/pic1.png" alt="">
        <p id="circle"></p>
    </div>
</div>
</body>
</html>