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

更新時間：2021年08月25日 09:30:21 作者：ITandYT

這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)隱藏顯示圖片，JS實現(xiàn)點擊切換圖片效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

我先說一下要求：

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

2.當(dāng)點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當(dāng)點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來

3.當(dāng)點擊換的時候,圖片會變成另外一張,當(dāng)再次點擊的時候,圖片又會變回來,

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

這就是要求,下面來看代碼:

<!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)按鈕文字為隱藏時,圖片隱藏
   img.style.opacity = 0;
   //同時,按鈕文字變成現(xiàn)實 下面同理
  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>

就是這么簡單，你們學(xué)會了嗎？

您可能感興趣的文章:

相關(guān)文章

event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別？event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對象的定位屬性值為relative
2011-10-10
JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法
這篇文章主要介紹了JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法,實例分析了javascript獲取本地時間及動態(tài)顯示的技巧,并對實現(xiàn)代碼進行了較為詳盡的分析說明,需要的朋友可以參考下
2015-02-02
解決WordPress使用CDN后博文無法評論的錯誤
這篇文章主要介紹了解決WordPress使用CDN后博文無法評論的錯誤的方法,同時提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以參考下
2015-12-12
JS實現(xiàn)可以用鍵盤方向鍵控制的動畫
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)可以用鍵盤方向鍵控制的動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JS中Eval解析JSON字符串的一個小問題
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧，下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題，需要的朋友參考下吧
2016-02-02
js類中的公有變量和私有變量
實例分析js類中的公有和私有變量
2008-07-07
javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下
2013-09-09
微信小程序canvas繪制圓角base64圖片的實現(xiàn)
這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
微信小程序和百度的語音識別接口詳解
這篇文章主要介紹了微信小程序和百度的語音識別接口詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
this[] 指的是什么內(nèi)容討論
this[] 指的是什么內(nèi)容討論...
2007-03-03