欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)隱藏顯示圖片 JS實(shí)現(xiàn)點(diǎn)擊切換圖片效果

 更新時(shí)間：2021年08月25日 09:30:21   作者：ITandYT  
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)隱藏顯示圖片，JS實(shí)現(xiàn)點(diǎn)擊切換圖片效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天要說(shuō)的內(nèi)容,看標(biāo)題就都能知道了，所有知識(shí)點(diǎn)一覽無(wú)遺啊，!咱們今天的東西，是純純的原生JS代碼。

我先說(shuō)一下要求：

1.有兩個(gè)按鈕,內(nèi)容為顯示,和換,

2.當(dāng)點(diǎn)擊顯示的時(shí)候,按鈕文字變成隱藏,同時(shí)圖片顯示出來(lái),同理,當(dāng)點(diǎn)擊隱藏的時(shí)候,按鈕文字變成顯示,圖片隱藏起來(lái)

3.當(dāng)點(diǎn)擊換的時(shí)候,圖片會(huì)變成另外一張,當(dāng)再次點(diǎn)擊的時(shí)候,圖片又會(huì)變回來(lái),

4.當(dāng)圖片隱藏的時(shí)候,圖片不可變換

這就是要求,下面來(lái)看代碼:

<!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 (){
   //判斷按鈕文字內(nèi)容
 if(btn.innerText == "隱藏"){
   //當(dāng)按鈕文字為隱藏時(shí),圖片隱藏
   img.style.opacity = 0;
   //同時(shí),按鈕文字變成現(xiàn)實(shí) 下面同理
  btn.innerText = "顯示";
 }else{
  img.style.opacity = 1;

  btn.innerText = "隱藏";
 }
 });

 var imgs = ["11.jpg","12.jpg"];
 //給"換"添加點(diǎn)擊事件
 btu.addEventListener("click",function (){
  if(btn.innerText == "隱藏"){
  if(xia < 1){
   xia++;
  }else{
   xia = 0;
  }
  img.src = imgs[xia];
 }else{
  alert("圖片隱藏，不能切換");
 }
 
});
 
</script>

</html>

就是這么簡(jiǎn)單，你們學(xué)會(huì)了嗎 ？

相關(guān)文章

最新評(píng)論