【JavaScript】函数—可重用的代码块

标签：mes   学习记录   top   absolute   order   round   取图   message   text   

以下内容为学习记录，可以参考 MDN 原文。

环境

• vscode 1.46
• Microsoft Edge 83

展示信息的方法

function displayMessage() {
 
}

html 模板

Display message box

  

css 样式

js 逻辑

    const btn = document.querySelector(‘button‘);

    btn.onclick = function () {
      displayMessage(‘Brian: Hi there, how are you today?‘, ‘chat‘);
    };

    function displayMessage(msgText, msgType) {
      const html = document.querySelector(‘html‘);

      const panel = document.createElement(‘div‘);
      panel.setAttribute(‘class‘, ‘msgBox‘);
      html.appendChild(panel);

      const msg = document.createElement(‘p‘);
      msg.textContent = msgText;
      panel.appendChild(msg);

      const closeBtn = document.createElement(‘button‘);
      closeBtn.textContent = ‘x‘;
      panel.appendChild(closeBtn);

      closeBtn.onclick = function () {
        panel.parentNode.removeChild(panel);
      }

      if (msgType === ‘warning‘) {
        msg.style.backgroundImage = ‘url(icons/warning.png)‘;
        panel.style.backgroundColor = ‘red‘;
      } else if (msgType === ‘chat‘) {
        msg.style.backgroundImage = ‘url(icons/chat.png)‘;
        panel.style.backgroundColor = ‘aqua‘;
      } else {
        msg.style.paddingLeft = ‘20px‘;
      }
    }

如果想获取图片和源码，可以点击这里。

【JavaScript】函数—可重用的代码块

标签：mes   学习记录   top   absolute   order   round   取图   message   text   

原文地址：https://www.cnblogs.com/jiangbo44/p/13296611.html