《亮剑》经典剧情：HTML5+CSS3模拟平安县城群聊揭秘-谁开的炮？

前端

2023-11-13 20:42:59

HTML5 和 CSS3 实现《亮剑》平安县城群聊，重温经典战役

背景

《亮剑》中，平安县城一役是该剧中的经典战役之一。李云龙的独立团奉命夺回日军占领的平安县城，战斗异常激烈。在这场战役中，一条微信消息改变了战局，摧毁了日军的炮兵阵地，助力李云龙取得胜利。

模拟实现

借助 HTML5 和 CSS3，我们可以模拟实现这场精彩的微信群聊，重温经典剧情。

代码实现

HTML

<div id="chatroom">
  <div class="message">
    <div class="sender">李云龙</div>
    <div class="content">谁开的炮？</div>
  </div>
  <div class="message">
    <div class="sender">老百姓</div>
    <div class="content">日军的炮兵阵地在平安县城北边的山头上。</div>
  </div>
  <div class="message">
    <div class="sender">李云龙</div>
    <div class="content">收到，命令炮兵连向日军的炮兵阵地开火。</div>
  </div>
  <div class="message">
    <div class="sender">炮兵连</div>
    <div class="content">收到，正在执行命令。</div>
  </div>
</div>

CSS

#chatroom {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
}

.sender {
  font-weight: bold;
}

.content {
  margin-top: 5px;
}

JavaScript

var chatroom = document.getElementById('chatroom');

var liYunLong = {
  name: '李云龙',
  content: '谁开的炮？'
};

var oldMan = {
  name: '老百姓',
  content: '日军的炮兵阵地在平安县城北边的山头上。'
};

var liYunLong2 = {
  name: '李云龙',
  content: '收到，命令炮兵连向日军的炮兵阵地开火。'
};

var artilleryCompany = {
  name: '炮兵连',
  content: '收到，正在执行命令。'
};

var messages = [liYunLong, oldMan, liYunLong2, artilleryCompany];

for (var i = 0; i < messages.length; i++) {
  var message = messages[i];

  var divMessage = document.createElement('div');
  divMessage.classList.add('message');

  var divSender = document.createElement('div');
  divSender.classList.add('sender');
  divSender.innerHTML = message.name;

  var divContent = document.createElement('div');
  divContent.classList.add('content');
  divContent.innerHTML = message.content;

  divMessage.appendChild(divSender);
  divMessage.appendChild(divContent);

  chatroom.appendChild(divMessage);
}