专业编程基础技术教程

网站首页 > 基础教程 正文

40岁大叔学习编程之 JavaScript 藏美女

ccvgpt 2024-10-12 13:58:53 基础教程 5 ℃

需求： 在一个网页上展示美女照片，然后点击按钮 把美女藏起来，

实现思路：就是设置展示美女的标签 img 设置样式 display为none;就可以了。比如代码： newImg.style.display = "none"， newImg 就是通过标签获取到 img 标签这个元素 document.getElementsByTagName("img")[0]，如果你老婆走了，再点击按钮 让美女出来，就设置 newImg.style.display = "block"就可以了。

40岁大叔学习编程之 JavaScript 藏美女


源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>显示和隐藏图片</title>
  </head>
  <body>
    <button id="btn">隐藏</button>
    <br />
    <img src="images/img01.jpg" id="new" />
    <script type="text/javascript">
      // 1.获取事件源
      var obtn = document.getElementById("btn")
      var newImg = document.getElementsByTagName("img")[0]
      // var isShow = true;
      // 2.绑定事件
      obtn.onclick = function () {
        // 3.事件驱动程序
        if (obtn.innerHTML === "隐藏") {
          newImg.style.display = "none"
          obtn.innerHTML = "显示"
          // isShow = false;
        } else {
          newImg.style.display = "block"
          obtn.innerHTML = "隐藏"
          // isShow = true;
        }
      }
    </script>
  </body>
</html>

美女照片自己找

把，我就不放这了哦。

Tags：

猜你喜欢

最近发表
标签列表