js 点击按钮弹出查询中…三秒后显示查询结果

点击按钮后，弹出个框，显示查询支付状况中…，三秒后，提示为未查询到支付账单，请支付，主要的逻辑是这样的，至于中间可以加一些后端请求的代码进去，这里就省略了。

html代码为：

<button data-v-b863db80="" type="button" class="el-button btn-info el-button--button" style="margin-top: 2%;" onClick="">
<span>支付成功请点击.... </span>
</button>

js代码：

function showPaymentStatus() {
  var modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.width = '300px';
  modal.style.height = '100px';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.backgroundColor = 'white';
  modal.style.borderRadius = '5px';
  modal.style.display = 'flex';
  modal.style.justifyContent = 'center';
  modal.style.alignItems = 'center';
  modal.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)';

  var message = document.createElement('p');
  message.innerText = '查询支付状况中';
  message.style.color = '#333';
  
  var dotWrapper = document.createElement('div');
  dotWrapper.style.display = 'flex';
  dotWrapper.style.marginTop = '-9px';
  dotWrapper.style.marginLeft = '10px';

  for (var i = 0; i < 3; i++) {
    var dot = document.createElement('div');
    dot.style.backgroundColor = '#ccc';
    dot.style.width = '10px';
    dot.style.height = '10px';
    dot.style.borderRadius = '50%';
    dot.style.marginRight = '5px';
    dot.style.animation = 'dot-loading 0.6s ' + i * 0.2 + 's infinite';
    dot.style.animationTimingFunction = 'linear';
    dotWrapper.appendChild(dot);
  }

  modal.appendChild(message);
  modal.appendChild(dotWrapper);
  document.body.appendChild(modal);

  // 随机2到5秒后显示未查询到支付账单
  var delay = Math.floor(Math.random() * 4) + 2;
  setTimeout(function() {
    message.innerText = '未查询到支付账单，请支付';
    dotWrapper.style.display = 'none';
    setTimeout(function() {
      modal.remove();
    }, 3000);
  }, delay * 1000);
}

css动画加载代码：

@keyframes dot-loading {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.7); /* 缩小70% */
    }
    100% {
      transform: scale(1);
    }
  }