用javascript书写下面题目:HTML5开发loading 图标

在 HTML5 中使用 JavaScript 开发 loading 图标的方法如下:

1. 在 HTML 中添加一个 div 元素作为 loading 图标的容器:

<div id="loading-icon"></div>

2. 使用 CSS 定义 loading 图标的样式:

#loading-icon {
  width: 50px;
  height: 50px;
  border: 2px solid #ccc;
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

3. 使用 JavaScript 控制 loading 图标的显示和隐藏:

// 显示 loading 图标
function showLoadingIcon() {
  document.getElementById('loading-icon').style.display = 'block';
}

// 隐藏 loading 图标
function hideLoadingIcon() {
  document.getElementById('loading-icon').style.display = 'none';
}

这样, 当需要显示 loading 图标时, 可以调用 showLoadingIcon() 函数; 当加载完成时, 可以调用 hideLoadingIcon() 函数来隐藏 loading 图标。

注意: 这只是一个简单的示例, 在实际开发中可能需要更复杂的处理方式。