原生javascript模仿win8等待提示圆圈进度条

让我来详细讲解一下“原生javascript模仿win8等待提示圆圈进度条”的完整攻略。

1. 初始HTML结构

首先，在HTML中定义一个div容器作为等待提示圆圈进度条的载体，如下所示：

<div id="spinner"></div>

2. CSS样式

接着，我们需要定义CSS样式来实现圆形线条的旋转动画效果。下面是示例CSS代码：

#spinner {
  width: 40px;
  height: 40px;
  position: relative;
}
#spinner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #0084ff;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

CSS代码的解释如下：

• #spinner 定义div容器的样式，包括宽度、高度、相对定位等；
• #spinner:before 定义div容器的旋转效果，通过CSS3动画属性来实现；
• @keyframes spin 定义动画的关键帧，即从0%旋转到360%的过程。

3. Javascript代码

最后，我们需要使用Javascript代码来控制等待提示圆圈进度条的显示和隐藏。下面是示例Javascript代码：

// 显示等待提示圆圈进度条
function showSpinner() {
  document.getElementById("spinner").style.display = "block";
}

// 隐藏等待提示圆圈进度条
function hideSpinner() {
  document.getElementById("spinner").style.display = "none";
}

Javascript代码的解释如下：

• showSpinner() 函数用于显示等待提示圆圈进度条，通过设置display属性为block来实现；
• hideSpinner() 函数用于隐藏等待提示圆圈进度条，通过设置display属性为none来实现。

示例说明

下面是两个示例，分别演示了如何在按钮点击事件中使用等待提示圆圈进度条。

示例1

<button onclick="showSpinner(); setTimeout(hideSpinner, 3000);">点击开始</button>

此示例中，当用户点击按钮时，showSpinner()函数会被调用，等待提示圆圈进度条会显示出来，然后通过setTimeout()函数3秒钟后自动调用hideSpinner()函数隐藏等待提示圆圈进度条。

示例2

function submitForm() {
  showSpinner();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      hideSpinner();
      // 处理服务器返回的数据
    }
  };
  xhr.open("POST", "/example/formdata.php");
  xhr.send(new FormData(document.getElementById("myform")));
}

此示例中，当用户提交表单时，submitForm()函数会被调用，等待提示圆圈进度条会显示出来。然后使用XMLHttpRequest对象向服务器发送POST请求，当获取到服务器返回的数据时，通过判断readyState和status属性是否满足条件，来执行回调函数并进行相应的处理。最后，在回调函数中调用hideSpinner()函数，隐藏等待提示圆圈进度条。