《深夜食堂》小案例，带你理解HTML/CSS/JS的各司其职

已注销
143 阅读5分钟 
兄弟们啊，好久不见，有段时间没更新了，有没有想我啊哈哈哈

今天，要讲的是一个前端小案例，通过这个案例可以有助于更加理解HTML/CSS/JS的各司其职。带你进入前端新世界。

一、版本一

image.png

点击🌞后，切换成夜晚模式

image.png

点击🌜后，切换为白天模式

  • 这个小案例很简单，大家可以先自己动手实现一下。下面的代码是我的实现方案一：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深夜食堂</title>
  <style>
    body, html {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-weight: 700;
    }
    body {
      padding: 10px;
      box-sizing: border-box;
    }
    div.pic img {
      width: 100%;
    }
    .btn {
      float: right;
      font-size: 2rem;
      border: none;
      background: transparent;
    }
  </style>
</head>
<body>
  <header>
    <button class="btn">🌞</button>
    <h1 class="title">深夜食堂</h1>
  </header>
  <main>
    <div class="pic">
      <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
    </div>
    <div class="description">
      <p>
        这是一间营业时间从午夜十二点到早上七点的特殊食堂。
        这里的老板，不太爱说话，却总叫人吃得热泪盈眶。
        在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；
        轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；
        乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；
        一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。
        食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。
        每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返。
      </p>
    </div>
  </main>
  <script>
    const btn = document.querySelector('.btn')
    btn.addEventListener('click',(e) => {
      const body = document.body
      if(e.target.innerHTML === '🌞') {
        body.style.backgroundColor = 'black'
        body.style.color = 'white'
        e.target.innerHTML = '🌜'
      } else {
        body.style.backgroundColor = 'white'
        body.style.color = 'black'
        e.target.innerHTML = '🌞'
      }
    })
  </script>
</body>
</html>
  • 方案一，使用JS去操作CSS，代码也有点繁琐，跟着我的步伐看方案二。

二、版本二

image.png

点击🌞后，切换成夜晚模式

image.png

点击🌜后，切换为白天模式（代码做了小优化，加了一个CSS过渡效果，实现功能一样）

方案二的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深夜食堂</title>
  <style>
    body, html {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-weight: 700;
    }
    body {
      padding: 10px;
      box-sizing: border-box;
    }
    div.pic img {
      width: 100%;
    }
    .btn {
      float: right;
      font-size: 2rem;
      border: none;
      background: transparent;
    }
    .btn::after {
      content: '🌞';
    }
    body.night {
      background-color: black;
      color: white;
      transition: all 1s;
    }
    body.night .btn::after {
      content: '🌜';
    }
  </style>
</head>
<body>
  <header>
    <button class="btn"></button>
    <h1 class="title">深夜食堂</h1>
  </header>
  <main>
    <div class="pic">
      <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
    </div>
    <div class="description">
      <p>
        这是一间营业时间从午夜十二点到早上七点的特殊食堂。
        这里的老板，不太爱说话，却总叫人吃得热泪盈眶。
        在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；
        轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；
        乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；
        一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。
        食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。
        每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返。
      </p>
    </div>
  </main>
  <script>
    const btn = document.querySelector('.btn')
    btn.addEventListener('click',(e) => {
      const body = document.body
      if(body.className !== 'night') {
        body.className = 'night'
      } else {
        body.className = ''
      }
    })
  </script>
</body>
</html>
  • 可以看出来JS代码减少了，先定义好了CSS样子，点击事件后直接改变样式类名即可，这个实现方案是大多数人使用的，还是比较友好的。
  • 先透露一下，方案三是纯HTML与CSS实现的噢。（不要惊讶，代码马上呈现）

三、版本三

  • 实现的功能和样子一模一样，就不截图了。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深夜食堂</title>
  <style>
    body, html {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-weight: 700;
    }
    body {
      box-sizing: border-box;
    }
    .content {
      height: 100%;
      padding: 10px;
    }
    div.pic img {
      width: 100%;
    }
    .btn {
      float: right;
      font-size: 2rem;
      border: none;
      background: transparent;
    }
    #modeCheckBox {
      display: none;
    }
    #modeCheckBox:checked + .content {
      background-color: black;
      color: white;
      transition: all 1s;
    }
    .btn {
      font-size: 2rem;
      float: right;
    }
    .btn::after {
      content: '🌞';
    }
    #modeCheckBox:checked + .content .btn::after {
      content: '🌜';
    }
  </style>
</head>
<body>
  <input type="checkbox" id="modeCheckBox">
  <div class="content">
    <header>
      <label for="modeCheckBox" class="btn"></label>
      <h1 class="title">深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
          这是一间营业时间从午夜十二点到早上七点的特殊食堂。
          这里的老板，不太爱说话，却总叫人吃得热泪盈眶。
          在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；
          轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；
          乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；
          一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。
          食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。
          每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返。
        </p>
      </div>
    </main>
  </div>
</body>
</html>
  • 啧啧啧，还真是一行JS代码都没有呢。看到这里可能会有小伙伴有疑惑，我来给大家点一点，大家马上就知道了。
  1. 首先，看body代码中多出来一行<input type="checkbox" id="modeCheckBox">（这不就是个复选框嘛）先给它隐藏了

image.png

  1. 然后通过这行<label for="modeCheckBox" class="btn"></label>将之前的button替换掉。妙啊，这个click事件一下子就变成了复选框的选中取消，那样式怎么切换的呢？
  2. CSS伪类选择器与兄弟选择器可发挥了关键作用啊

image.png

image.png

  1. 哇塞，CSS还可以这样玩，好神奇啊。大家快快动手试一试，这个小案例动起手来才有意思。

四、总结

看到这里，也许有人会说，方法二不是也实现了吗？我会第二种就好了，这第三种不重要。

确实，这只是个小案例罢了，工作中可以学会第二种就很棒了

但是，我想通过这个小案例让大家在下班休闲之后，可以多多思考，想一想自己之前的代码还可以优化嘛？真的做到了HTML/CSS/JS各司其职嘛？

可以通过小案例来放松放松。

  • 《深夜食堂》这个小案例，告诉我们：应当避免不必要的由JS直接操作样式，CSS也可以表示状态噢
  • 其次，纯展示类交互要寻求零JS方法
  • 好了，HTML/CSS/JS的各司其职也是这样的了
avatar
文章
阅读
粉丝