JS怎么在Loading中加上时间

您好，感谢您使用 ChitGPT 进行对话。关于您的问题，我可以为您提供一下代码示例：

// 获取 loading 元素
let loading = document.getElementById("loading");
// 定义变量记录开始时间
let startTime = new Date().getTime();

// 定义定时器，每500毫秒更新一次时间
let timer = setInterval(function() {
  // 计算当前时间与开始时间的差值
  let currentTime = new Date().getTime();
  let diffTime = currentTime - startTime;
  // 转换为秒数
  let seconds = Math.floor(diffTime / 1000);

  // 更新 loading 文本内容
  loading.innerHTML = "Loading..." + seconds + "秒";

  // 停止定时器，当加载完成后
  if (finish) {
    clearInterval(timer);
  }
}, 500);

这段代码会在加载过程中，每隔500毫秒更新一次 loading 的文本内容，显示当前加载已经进行了多久时间。您只需要将其中的 `loading` 替换为您的 loading 元素的 ID 即可。希望能对您有所帮助。

相关问题

Promise.all中加上loading

在使用Promise.all方法时，如果需要在所有的promise都完成之前显示loading状态，可以通过在Promise.all的参数中添加一个新的promise来实现。该新的promise用于显示loading状态，当所有的promise都完成后，该promise会被resolve，然后可以隐藏loading状态。

代码示例：

async function onSubmit() {
  // 显示loading状态
  showLoading();

  // 使用Promise.all，并添加一个新的promise来显示loading状态
  const [res, cus, code] = await Promise.all([
    getStoken(this.getLoginParams()),
    getCustomerId(this.getCusParams()),
    this.wrapLogin(),
    new Promise((resolve) => setTimeout(resolve, 2000)), // 添加新的promise来显示loading状态，设置一个延迟时间来模拟异步操作
  ]);

  // 隐藏loading状态
  hideLoading();

  // 其他逻辑代码...
}

// 其他相关代码...

图片在加载过程中显示loading

当图片正在加载时，可以显示一个loading图标来提醒用户图片正在加载。这可以通过在<img>标签中添加一个onload事件和一个onerror事件来实现。在onload事件中，可以隐藏loading图标并显示图片；在onerror事件中，可以显示一个错误信息或者重试按钮。

例如，可以这样写代码：

<div>
  <img src="path/to/image.jpg" onload="onImageLoad()" onerror="onImageError()">
  <div id="loading" style="display: block;">Loading...</div>
  <div id="error" style="display: none;">Failed to load image.</div>
  <button id="retry" style="display: none;" onclick="retryImage()">Retry</button>
</div>

<script>
function onImageLoad() {
  document.getElementById("loading").style.display = "none";
  document.getElementById("error").style.display = "none";
  document.getElementById("retry").style.display = "none";
}

function onImageError() {
  document.getElementById("loading").style.display = "none";
  document.getElementById("error").style.display = "block";
  document.getElementById("retry").style.display = "block";
}

function retryImage() {
  document.getElementById("loading").style.display = "block";
  document.getElementById("error").style.display = "none";
  document.getElementById("retry").style.display = "none";
  document.getElementsByTagName("img")[0].src = "path/to/image.jpg";
}
</script>

在上面的代码中，图片加载时会显示loading图标，如果加载成功则隐藏loading图标并显示图片，如果加载失败则隐藏loading图标并显示错误信息和重试按钮。点击重试按钮会重新加载图片。