js的三種彈出式消息提醒：js提示框代碼

這個功能的實現主要使用了jsonp跨域訪問, 然後通過回調函數來將搜索到的關聯內容顯示出來 。

JSONP(JSONwith Padding)是一個非官方的協議，它允許在伺服器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

回調函數：當一個函數作為另一個函數的參數時，那麼這個函數就是回調函數。

效果如下

代碼如下

<script type="text/javascript">
      var txt = document.getElementById('text');
      var oUl = document.getElementById('list');
      var oBtn = document.getElementById('btn');

      txt.onkeyup = function () {
        oUl.innerHTML = '';
        oUl.style.display = 'none';
        var val = txt.value;
        var oScript = document.createElement('script'); //動態創建script標籤
        oScript.src =
          'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' +
          val +
          '&cb=callback';
        //添加鏈接及回調函數
        document.body.appendChild(oScript); //添加script標籤
        document.body.removeChild(oScript); //刪除script標籤
      };
      //回調函數

      function callback(data) {
        if (data.s && data.s.length) {
          const res = data.s;
          res.forEach(function (value) {
            var oLi = document.createElement('li');
            oLi.innerHTML =
              '<a style="display:inline-block;width:100%" href="https://www.baidu.com/s?wd=' +
              value +
              '">' +
              value +
              '</a>';
            oUl.appendChild(oLi);
          });

          oUl.style.display = 'block';
        }
      }
      //點擊跳轉到百度頁面，並搜索其中內容
      oBtn.onclick = function () {
        var val = txt.value;
        location.href = 'http://www.baidu.com.cn/s?wd=' + val + '&cl=3';
      };
    </script>