今天要說的內容,看標題就都能知道了!所有知識點一覽無遺啊!咱們今天的東西,是純純的原生JS代碼,
我先說一下要求,
1.有兩個按鈕,內容為顯示,和換,
2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來
3.當點擊換的時候,圖片會變成另外一張,當再次點擊的時候,圖片又會變回來,
4.當圖片隱藏的時候,圖片不可變換
這就是要求,下面來看代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>換圖片</title>
</head>
<body>
<button id="btn">隱藏</button>
<button id="btu">換</button>
<img src="11.jpg" id="img" width="300px" />
</body>
<script>
var btn = document.getElementById("btn");
var btu = document.getElementById("btu");
var img = document.getElementById("img");
var xia = 0;
btn.addEventListener("click",function (){
//判斷按鈕文字內容
if(btn.innerText == "隱藏"){
//當按鈕文字為隱藏時,圖片隱藏
img.style.opacity = 0;
//同時,按鈕文字變成現實 下面同理
btn.innerText = "顯示";
}else{
img.style.opacity = 1;
btn.innerText = "隱藏";
}
});
var imgs = ["11.jpg","12.jpg"];
//給"換"添加點擊事件
btu.addEventListener("click",function (){
if(btn.innerText == "隱藏"){
if(xia < 1){
xia++;
}else{
xia = 0;
}
img.src = imgs[xia];
}else{
alert("圖片隱藏，不能切換");
}
});
</script>
</html>
就是這么簡單,你們學會了嗎?
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
