JS学习笔记-简单的事件

太过爱你忘了你带给我的痛 2023-06-20 06:15 164阅读 0赞

## 简单的事件 ##

**1.实例代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<img id="imges" src="img/images/off.gif"/> //html定义的id和图片
    	</body>
    	<script>
    	var img  = document.getElementById("imges");   //通过id获取图片对象
    	var flag = false;                              //设置标记
    	img.onclick = function(){                       //绑定事件
    		if(flag == false){                          //描述事件的函数
    			img.src="img/images/on.gif";
    			flag = true;
    		}
    		else{ 
    			img.src="img/images/off.gif";
    			flag = false;
    		}
    	}
    	</script> 
    </html>

**2.结果**  
点击前  
![例子][20191208145403774.png]  
点击后  
![例子][20191208145433296.png]  
**3.自动页面跳转**  
实例代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body style="text-align: center;">
    		<span id="time" style="color: red;">5</span>秒后，自动跳转至百度...
    	</body>
    	<script>
    		var second = 5;           //初始化秒数
    		function fun(){            //定义函数
    			second--;             //倒计时
    			if(second <= 0){ 
    				location.href = "https://www.baidu.com"; //倒计时结束后跳转到百度
    			}
    			var time = document.getElementById("time");  //获取图片对象
    			time.innerHTML = second + "";                //改变HTML
    		}
    		setInterval(fun,1000);                          //一秒调用一次函数
    	</script>
    </html>

**结果：**

跳转前：  
![例子][20191208215231132.png]  
跳转后：  
![例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]

[20191208145403774.png]: https://img-blog.csdnimg.cn/20191208145403774.png
[20191208145433296.png]: https://img-blog.csdnimg.cn/20191208145433296.png
[20191208215231132.png]: https://img-blog.csdnimg.cn/20191208215231132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191208215156171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70