JS基础学习（第二周）

wandongle

已于 2023-12-31 09:34:47 修改

阅读量406

点赞数 10

文章标签： javascript 学习前端

于 2023-12-24 17:39:22 首次发布

本文链接：https://blog.csdn.net/wandongle/article/details/135183813

版权

学习内容

这一周主要学习了DOM,同时掌握了一些简单的js方法改变HTML的内容、改变css、或者使网页对dom事件做出反应。

1.获取鼠标在指定区域的坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				box-sizing: border-box;
				width: 400px;
				height: 100px;
				border: 1px solid black;
				margin-bottom: 10px;
			}#show{
				width: 100px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div id="show"></div>
		<script>
			var box=document.getElementById("box");
			var show=document.getElementById("show");
//鼠标移入时添加函数获取鼠标的X、Y坐标并将其输出
			box.onmousemove=function(event){
				var X=event.clientX;
				var Y=event.clientY;
				show.innerHTML="X="+X+",Y="+Y;
			};
		</script>
	</body>
</html>

效果：

2.手动切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0%;
				margin: 0%;
			}
			#outer{
				width: 340px;
				margin: 50px auto;
				padding: 10px;
				background-color: #bfa;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="../img/1.jpg" alt="未来" width="320px" height="180px"/>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
		<script>
			var imgArr=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
			var index=0;
			var prev=document.getElementById("prev");
			var next=document.getElementById("next");
			var img=document.getElementsByTagName("img")[0];
			var info=document.getElementById("info");
			info.innerHTML="共有"+imgArr.length+"张，目前第"+(index+1)+"张";
			prev.onclick=function(){
				index--;
				if(index<0){
					index=imgArr.length-1;
				}
				img.src=imgArr[index];
				info.innerHTML="共有"+imgArr.length+"张，目前第"+(index+1)+"张";
			};
			next.onclick=function(){
				index++;
				if(index>imgArr.length-1){
					index=0
				}
				img.src=imgArr[index];
				info.innerHTML="共有"+imgArr.length+"张，目前第"+(index+1)+"张";
			};
		</script>
	</body>
</html>

3.定时器自动切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">开始</button>
		<button id="btn2">停止</button>
		<img  id="img" src="../img/1.jpg" alt="图片" width="320px" height="180px"/>
		<script>
			var img=document.getElementById("img");
			var btn1=document.getElementById("btn1");
			var btn2=document.getElementById("btn2");
			var timer;
			var imgArr=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
			var index=0;
			btn1.onclick=function(){
				// 防止重复点击生成多个计时器
				clearInterval(timer)
				
				timer =setInterval(function(){
					index++;
					if(index==imgArr.length){
						index=0;
					}
					img.src=imgArr[index];
				},1000)
			}
			btn2.onclick=function(){
				clearInterval(timer);
			};
		</script>
	</body>
</html>