js的dom操作,onmouseover事件,onmouseleave事件,定时器

最新推荐文章于 2022-11-25 15:12:48 发布

刘昕hrf

最新推荐文章于 2022-11-25 15:12:48 发布

阅读量852

点赞数 3

分类专栏： js html css 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_43447266/article/details/120190276

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

样式

onmouseover鼠标放上改变触发事件
onmouseleave鼠标离开改变触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type	= "text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: beige;
			}
		</style>
	</head>
	
	<body>
		<div id= "box" 
			onmouseover="changeColor()"
			onmouseleave ="changeColor2()">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	//onmouseover鼠标放上改变触发事件
	//onmouseleave鼠标离开改变触发事件
	function changeColor(){
		var div = document.querySelector("#box");
		//修改样式css,方式一
		div.style.backgroundColor = "brown";
		div.innerHTML = "我来了...";
	}
	function changeColor2(){
		var div = document.querySelector("#box");
		//修改样式css,方式一
		div.style.backgroundColor = "green";
		div.innerHTML = "我走了...";
	}
</script>

效果展示

在这里插入图片描述

隐藏修改css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type	= "text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: beige;
			}
		</style>
	</head>
	<body>
		<button onclick="change()">隐藏</button>
		<div id= "box" >
			
		</div>
	</body>
</html>
<script type="text/javascript">
	//点击隐藏按钮让当前div隐藏
	var flag = 0;
	function change(){
		var div = document.querySelector("#box");
		var button1 = document.querySelector("button");
		if(flag==0){
			//修改样式css,方式一
			div.style.display= "none";
			button1.innerHTML = "显示";
			flag = 1;
		}else{
			//修改样式css,方式一
			div.style.display= "block";
			button1.innerHTML = "隐藏";
			flag = 0;
		}
		
	}
	
</script>

效果展示

在这里插入图片描述

className同时修改多个样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.c1{
				width: 200px;
				height: 200px;
				background-color: burlywood;
				border: 5px solid yellow;
			}
			.c2{
				width: 200px;
				height: 200px;
				background-color: green;
				border: 5px solid rosybrown;
			}
		</style>
		
	</head>
	<body>
		<button onclick="change1()">切换样式</button>
		<div id="d1" class="c1">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var flag = "c1";//首先定义变量样式为c1
	function change1(){
		var div = document.querySelector("#d1");
		if (flag == "c1") {
			flag = "c2";
		} else{
			flag = "c1";
		}
		//使用className同时修改多个样式(将样式在css里面提前定义好).
		div.className = flag;
	}
</script>

延迟执行定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="start2()">延迟执行</button>
		<button onclick="stop1()">停止延迟</button>
	</body>
</html>
<script type="text/javascript">
	function start1(){
		alert("延迟2秒,只执行一次.")
	}
	var time1= null;
	function start2(){
		time1 = setTimeout("start1()",4000);
	}
	function stop1(){
		clearTimeout(time1);
	}
	
</script>

立即执行定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			
		</div>
		<button onclick="stop1()">停止计时</button>
	</body>
</html>
<script type="text/javascript">
	function getCurrentTime(){
		var div=document.querySelector("#box");
		var date = new Date();
		var d = date.getFullYear()+"/"+
		(date.getMonth()+1)+"/"+
		date.getDate()
		+" " +
		date.getHours()+":"+
		date.getMinutes()+":"+
		date.getSeconds();
		console.log(d);
		div.innerHTML = "系统当前时间" + d;
	}
	
	//定时调用
	var start = setInterval("getCurrentTime()",1000);
	function stop1(){
		clearInterval(start);
	}
	
</script>