学习内容
这一周主要学习了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>
学习反思
这周完成了基本完成了dom的学习,可以做出一些基础的练习,但是对于高级的运用仍然不熟练,比如轮播图的效果做的不是很好,会出现很多bug,自己下周应该加强这部分的练习,完全完成轮播图的效果,同时也可以多学习掌握多种写法达到不同效果。