習題是提升的根本,可以将自己的知識更好地鞏固
第一天的課程總共有11道練習題,我們一一填寫
1.點選按鈕,切換圖檔
2. 點選按鈕,修改圖檔的寬高 -- width、height屬性
3. 點選按鈕,修改div的樣式 -- 預定義類名
4. 點選按鈕,div進行顯示和隐藏(兩個按鈕) -- 預定義類名
5. 點選按鈕,div進行顯示和隐藏(一個按鈕) -- 預定義類名 + innerText屬性
6. 點選按鈕,循環切換圖檔 -- src屬性
7.點選按鈕修改p标簽的内容 -- innerText屬性
8點選按鈕,同時修改多個p标簽的内容
9. 給多個按鈕注冊點選事件
10. 隔行變色
11. 給多個按鈕注冊點選事件,點選的那個變成紅色
1.點選按鈕,切換圖檔
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="but">點選切換圖檔</button>
<img id="tu" src="imgs/1.jpg" alt="圖檔1" title="這是圖檔1">
<script>
// 點選按鈕,切換圖檔
var but = document.getElementById("but");
var tu = document.getElementById("tu");
but.onclick = function(){
tu.src = "imgs/2.jpg";
tu.title = "這是圖檔2";
}
</script>
</body>
</html>
2. 點選按鈕,修改圖檔的寬高 -- width、height屬性
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="but">點選切換圖檔寬高</button>
<br>
<img id="tu" width="400" height="500" src="imgs/1.jpg" alt="圖檔1" title="這是圖檔1">
<script>
//1. 點選按鈕,修改圖檔的寬高 -- width、height屬性
var but = document.getElementById("but");
var tu = document.getElementById("tu");
but.onclick = function(){
tu.width = "200";
tu.height = "250";
}
</script>
</body>
</html>
3. 點選按鈕,修改div的樣式 -- 預定義類名
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.d{
width: 100px;
height: 100px;;background-color: red;
}
</style>
</head>
<body>
<button id="but">按鈕</button>
<div id="d">我是一個盒子</div>
<script>
//2. 點選按鈕,修改div的樣式 -- 預定義類名
var but = document.getElementById("but");
var d = document.getElementById('d');
but.onclick = function(){
d.className = "d";
}
</script>
</body>
</html>
4. 點選按鈕,div進行顯示和隐藏(兩個按鈕) -- 預定義類名
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.xian{
width: 100px;
height: 100px;
background-color: pink;
}
.yin{
display: block;
}
</style>
</head>
<body>
<button id="but1">顯示</button>
<button id="but2">隐藏</button>
<div id="d"></div>
<script>
//3. 點選按鈕,div進行顯示和隐藏(兩個按鈕) -- 預定義類名
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var d = document.getElementById("d");
but1.onclick = function(){
d.className = "xian";
}
but2.onclick = function(){
d.className = "yin";
}
</script>
</body>
</html>
5. 點選按鈕,div進行顯示和隐藏(一個按鈕) -- 預定義類名 + innerText屬性
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<button id="but">顯示</button>
<div id="d"></div>
<script>
//4. 點選按鈕,div進行顯示和隐藏(一個按鈕) -- 預定義類名 + innerText屬性
var but = document.getElementById("but");
var d = document.getElementById("d");
but.onclick = function(){
if(but.innerText == "顯示"){
d.className = "show";
but.innerText = "隐藏";
}else{
d.className = "";
but.innerText = " 顯示 ";
}
}
</script>
</body>
</html>
6. 點選按鈕,循環切換圖檔 -- src屬性
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="but">切換</button>
<br>
<img id="tu" src="imgs/1.jpg" alt="">
<script>
var but = document.getElementById("but");
var tu = document.getElementById("tu");
var i = 0;
var arr = ["imgs/1.jpg",'imgs/01.jpg',"imgs/2.jpg","imgs/02.jpg"];
but.onclick = function(){
i++;
if(i == 4){
i = 0;
}
tu.src = arr[i];
}
</script>
</body>
</html>
7.點選按鈕修改p标簽的内容 -- innerText屬性
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="but">點選更換</button>
<p id="prc">我是P标簽</p>
<script>
// 1. 點選按鈕修改p标簽的内容 -- innerText屬性
var but = document.getElementById("but");
var prc = document.getElementById("prc");
but.onclick = function(){
prc.innerText = "更改後的P";
}
</script>
</body>
</html>
8點選按鈕,同時修改多個p标簽的内容
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="but">更改</button>
<p>我是p标簽</p>
<p>我是p标簽</p>
<p>我是p标簽</p>
<p>我是p标簽</p>
<p>我是p标簽</p>
<p>我是p标簽</p>
<script>
//1. 點選按鈕,同時修改多個p标簽的内容
var but = document.getElementById("but");
// 這是數組
var ps = document.getElementsByTagName("p");
but.onclick = function(){
for(var i = 0 ; i < ps.length ;i++){
ps[i].innerText = "更改";
}
}
</script>
</body>
</html>
9. 給多個按鈕注冊點選事件
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>
//2. 給多個按鈕注冊點選事件
var buts = document.getElementsByTagName("button");
for(var i= 0; i < buts.length;i++){
buts[i].onclick = function(){
alert("哈哈");
}
}
</script>
</body>
</html>
10. 隔行變色
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<p>我是P标簽</p>
<script>
//3. 隔行變色
var ps = document.getElementsByTagName("p");
for(var i = 0 ; i <ps.length ;i++){
if(i%2==0){
ps[i].className = "red";
}else{
ps[i].className = "green";
}
}
</script>
</body>
</html>
11. 給多個按鈕注冊點選事件,點選的那個變成紅色
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg{
background-color: pink;
}
</style>
<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>
//1. 給多個按鈕注冊點選事件,點選的那個變成紅色
var buts = document.getElementsByTagName("button");
for(var i = 0 ;i<buts.length ; i++){
buts[i].onclick = function(){
// 指向目前的按鈕
this.className = "bg";
}
}
</script>
</body>
</html>