0.4 JavaScript APIs
2023-08-13 本文已影响0人
冰菓_
DOM基本使用方法
<body>
<button id="abc">点击事件</button>
<span class="a">hhhh</span>
<span class="a">hhhh</span>
<span class="a">hhhh</span>
<span class="a">hhhh</span>
<script>
const elementById = document.getElementById("abc");
elementById.innerText = "点击"
const elementsByClassName = document.getElementsByClassName("a");
for (let x=0 ; x < elementsByClassName.length ;x ++) {
document.write(x)
elementsByClassName[x].innerText = "aaaaaa"
}
let of = document.querySelectorAll("span");
</script>
</body>
获取元素的节点,属性和方法,文本节点
事件
<button id="btn">
点击事件
</button>
<script>
//直接在元素属性中设置
const btn = document.getElementById("btn");
//通过指定属性调用回调函数
// btn.onclick = function () {
// alert("点击......")
// }
//事件监听
btn.addEventListener("click",function () {
alert("点击...s...")
})
</script>
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.out{
margin: 50px auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
//获取图片
const img = document.getElementsByClassName("img-jpg")[0];
//获取button
const pre_button = document.getElementById("pre");
const next_button = document.getElementById("next");
const info = document.getElementsByClassName("info");
arr = [
"照片.jpg",
"照片1.jpg",
"照片2.jpg",
"照片3.jpg"
]
let Num = 0
info.textContext = `总共${arr.length} 当期${Num}`
pre_button.onclick =function () {
Num++
if (Num >= arr.length -1) {Num = arr.length}
img.src = arr[Num]
alert("......")
}
info.textContext = `总共${arr.length} 当期${Num}`
next_button.onclick =function () {
Num --
if (Num <= 0) {Num = 0}
img.src = arr[Num]
}
}
</script>
</head>
<body>
<div class="out">
<p class="info">总共M 当期N</p>
<div class="img-jpg">
<img src="照片.jpg" alt="pc">
</div>
<button id="pre">往前</button>
<button id="next">下一个</button>
</div>
</body>
</html>
图片切换
