javascript - 如何使用 JavaScript 控制进度元素进行加载可视化？-6ren

javascript - 如何使用 JavaScript 控制进度元素进行加载可视化？

转载作者：行者123 更新时间：2023-11-28 05:03:21

25

4

我需要帮助将加载程序添加到我的 HTML 文档中。这是没有加载器的页面:

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
  </head>
  <body bgcolor="#FFFFFF">
    <script>
      /*
      
      Script goes here for the loader.
      I think I might have an idea, I could use the "load" event.
      
      */
    </script>
    <style>
      
      h1 {
        color: green;
        font: 24px Courier;
      }
      
      .css-format-class {
        color: red;
        font: 16px Arial;
      }
      
    </style>
    <center>
      <h1>My Simple Webpage</h1>
    </center>
    <br>
    <p class="css-format-class">I wish I could add a loader GIF onto this page...</p>
    <!--I need a loader somewhere in this webpage...-->
    <!--If you know the solution, please feel free to comment.-->
  </body>
</html>

我在 HTML5 中找到了这段代码，但不知道如何让 JavaScript 操作这个标签:

<progress id="loader" value="0" max="100"></progress>

如果你知道怎么做，请告诉我。

最佳答案

获取 progress element 的引用(例如使用 document.getElementById() )，然后更新 value 属性，该属性映射到同名的属性。请参阅下面的演示片段，其中 setInterval()用于每秒调用一个函数来更新值。

下面的代码通过添加事件监听器(使用 document.addEventListener() )等待 DOM 准备就绪，以便在事件 DOMContentLoaded 发生时添加回调发生。这样它就不会在准备好之前尝试访问 DOM 中的元素(例如进度元素)。

var progress, date, interval;
// wait until DOM has been loaded to perform DOM Manipulations
document.addEventListener('DOMContentLoaded', function() {
  date = Date.now(); //current timestamp since UNIX epoch

  //get a reference to the progress element using its id attribute
  progress = document.getElementById('loader');
  interval = setInterval(updateProgress, 1000);
});
function updateProgress() {
    msg.innerHTML = 'begin updateProgress() - progress.value = '+progress.value + "<br>" + msg.innerHTML;
    if (progress.value >= 100) {
      //stop running this function after value reaches 100 (percent)
      clearInterval(interval);
    }
    var newDate = Date.now();
    var milliseconds = newDate - date;

    var seconds = Math.floor(milliseconds / 1000);
    loader.value += seconds;
  }

<progress id="loader" value="15" max="100"></progress>
<div id="msg" style="max-height:100px;overflow-y: auto"></div>

关于javascript - 如何使用 JavaScript 控制进度元素进行加载可视化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41967578/

25

4

0

文章推荐： javascript - 在 Semanticui 中禁用可调光关闭事件

文章推荐： c++ - Entries() 未在映射中输入

文章推荐： c++ - 在 SLL 中查找负值

iOS 可视化
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。
可视化—AntVG6高亮相邻节点的两种方式
目录内置的高亮节点自定义高亮自定义高亮时保持原始颜色总结案例完整代码通过官方文档，可知高
可视化—gojs超多超实用经验分享(三)
目录 32.go.Palette 一排放两个 33.go.Palette 基本用法 34.创建自己指向自己的连线 35.设置不同的 groupTemplate 和
可视化—gojs超多超实用经验分享(四)
目录 41.监听连线拖拽结束后的事件 42.监听画布的修改事件 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作) 44.监听节点鼠标
python爬虫天气预报可视化
织梦初秋那是一个宜人的初秋午后，阳光透过窗户洒在书桌上，我轻轻地拂去被阳光映照出的尘屑，伸了个懒腰。哎呀，这个世界真是奇妙啊，想到什么就能用代码实现，就像笔尖上点燃的火花。思索的起点我一直对天气
python爬虫天气预报可视化
曲径通幽，古木参天时光匆匆，不经意间已是2023年的秋季。我身处在这个充满朝气和变革的时代，每天都充满了新的科技突破和创新。而当我想起曾经努力学习的Python编程语言时，心中涌动着一股热情，渴望将
Kibana 可视化 - 自定义图例标签
我有一个堆积条形图，由一个 bool 字段分割。这会导致图例显示为两种颜色(很酷!)但图例具有以下值:true 和 false。对于读者来说，什么是真或假意味着什么是没有上下文的。在这种情况下，字段
r - R中的简单马尔可夫链(可视化)
我想在 R 中做一个简单的一阶马尔可夫链。我知道有像 MCMC 这样的包，但找不到一个以图形方式显示它的包。这甚至可能吗？如果给定一个转换矩阵和一个初始状态，那将会很好，人们可以直观地看到通过马尔可夫
statistics - 可视化 - Tableau
我是 tableau 的新手，我有以下可视化，这是链接: My visualization 我的问题是我不知道如何在一个仪表板中添加多个仪表板作为选项卡。在我的可视化中，有三个仪表板“Nota tot
audio - 通过音量和BPM控制视频输入/可视化
我建立类似自动VJ程序的东西。我有2个网络摄像头发出的2个incomig视频信号和一些可视化效果(目前2个，但我想要更多)。我有一个以dB为单位的传入音频信号音量，以bpm为单位。我需要的是视频输出的
iphone - 可视化:最好的方法？
我需要可视化的东西，并想要求一些提示和教程。或者使用哪种技术(Cocos2D、OpenGL、Quartz，...) 这里有人在 iOS 设备上做过可视化吗？它是关于移动物体、褪色、粒子等等…… 任何
graph - 可视化 - 与项目值成比例的圆圈大小
我对 Graphviz 越来越熟悉，想知道是否可以生成如下所示的图表/图表(不确定你叫它什么)。如果没有，有人知道什么是好的开源框架吗？ (首选，C++，Java 或 Python)。最佳答案根据
ios - 可视化 UIStackView？
问题很简单——我真的很喜欢用 UIStackView 来组织 UI。但是，我在测试应用程序中看不到 UIStackView 边界。当 UI 元素不是预期的时候，我需要花很多时间来调试。在网上搜索，我找
c++ - 对象指针数组的内存结构(可视化)
例如，我可以通过以下方式分配内存时的情况: Position* arr1 = new Position[5]; Position 是我程序中的一个类，它描述了具有 x 和 y 值的位置点。堆栈上会有
Python NLTK 可视化
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 5 年前。
xml - XSD 可视化？
我最近一直在处理许多半复杂的 XSD，我想知道:有哪些更好的工具可以处理 XML 模式？有没有图形工具？独立的或基于 Eclipse 的是理想的选择，因为我们不是 .net 商店。最佳答案我找到
可视化—AntVG6紧凑树实现节点与边动态样式、超过X条展示更多等实用小功能
通过一段时间的使用和学习，对G6有了更一步的经验，这篇博文主要从以下几个小功能着手介绍，文章最后会给出完整的demo代码。目录 1. 树图的基本布局和
点云转深度图：转化，保存，可视化
三维数据的获取方式 RGBD相机和深度图代码展示：在pcl中，把点云转为深度图，并保存和可视化三维数据的获取方式在计算机视觉和遥感领域，点云可以通过四种主要的技术获得，（1）根据图像衍生而得，
r - 可视化 iGraph 和标签对齐
代码 library(igraph) g <- graph.tree(n = 2 ^ 3 - 1, children = 2) node_labels <- c("", "Group A", "Gro
python - 可视化 DASK 任务图
我正在关注 this tutorial并创建了一个这样的图表: from dask.threaded import get from operator import add dsk = { 'x

首页

博学

6Ren·AI

商城

javascript - 如何使用 JavaScript 控制进度元素进行加载可视化？