正文

如何用JavaScript实现弹框并显示进度条教程

/0 浏览量
0708

在这个教程中，我们将学习如何使用JavaScript创建一个带有进度条的弹框。这个弹框可以用来模拟长时间运行的进程，比如文件上传或数据加载。我们将使用原生JavaScript和CSS来实现这个功能。

准备工作

在开始之前，请确保你的浏览器支持JavaScript和CSS。以下是我们将要使用的一些基本元素：

  • div：用于创建弹框和进度条。
  • span：用于显示进度百分比。
  • button：用于触发弹框和进度条。

创建弹框和进度条

首先，我们需要在HTML中添加一些基本的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条弹框教程</title>
<style>
  /* 弹框样式 */
  .modal {
    display: none; /* 默认不显示 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 确保在最上层 */
    left: 0;
    top: 0;
    width: 100%; /* 全屏宽度 */
    height: 100%; /* 全屏高度 */
    overflow: auto; /* 允许滚动 */
    background-color: rgba(0,0,0,0.4); /* 背景半透明 */
  }

  /* 进度条容器样式 */
  .progress-container {
    width: 100%;
    background-color: #ddd;
  }

  /* 进度条样式 */
  .progress-bar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
  }

  /* 弹框内容样式 */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 居中显示 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 宽度 */
  }

  /* 关闭按钮样式 */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>
</head>
<body>

<!-- 弹框 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是一个进度条弹框。</p>
    <div class="progress-container">
      <div class="progress-bar" id="progressBar"></div>
    </div>
  </div>
</div>

<!-- 触发按钮 -->
<button id="myBtn">打开弹框</button>

<script>
// JavaScript代码将在这里编写
</script>

</body>
</html>

添加JavaScript逻辑

接下来，我们需要在JavaScript中添加逻辑来控制弹框的显示和进度条的更新。

// 获取弹框元素
var modal = document.getElementById("myModal");

// 获取关闭按钮元素
var span = document.getElementsByClassName("close")[0];

// 获取进度条元素
var progressBar = document.getElementById("progressBar");

// 当用户点击按钮时打开弹框
document.getElementById("myBtn").onclick = function() {
  modal.style.display = "block";
  startProgress();
}

// 当用户点击关闭按钮时关闭弹框
span.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击弹框以外的区域时关闭弹框
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 开始进度条动画
function startProgress() {
  var width = 1;
  var id = setInterval(frame, 10); // 每10毫秒更新一次进度条

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      progressBar.style.width = width + '%';
      progressBar.textContent = width * 1  + '%';
    }
  }
}

总结

通过以上步骤，我们已经创建了一个带有进度条的弹框。这个弹框会在用户点击按钮时显示，进度条会逐渐填充，直到达到100%。当用户点击关闭按钮或弹框以外的区域时，弹框会关闭。

这个教程展示了如何使用原生JavaScript和CSS来创建一个简单的进度条弹框。你可以根据需要调整样式和逻辑，以适应不同的应用场景。

-- 展开阅读全文 --