如何使用JavaScript加载可视化来控制进度元素？
[英]How can I control a progress element using JavaScript for Loading visualization?
问题描述
I need help with adding a loader to my HTML document. 
我需要帮助在HTML文档中添加加载器。 Here's the page without the loader: 这是没有加载器的页面：
<!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>
I found this bit of code in HTML5, but don't know how to make JavaScript manipulate this tag: 我在HTML5中找到了这段代码，但不知道如何让JavaScript操作这个标记：
<progress id="loader" value="0" max="100"></progress>
If you know how, let me know. 如果你知道怎么做，请告诉我。
1 个解决方案
解决方案1
0 已采纳 2017-01-31 21:28:42
Get a reference to the progress element (eg using document.getElementById() ) and then update the value property, which maps to the attribute of the same name. 获取对progress元素的引用（例如，使用document.getElementById（） ），然后更新value属性，该属性映射到同名的属性。 See the snippet below for a demonstration, where setInterval() is used to call a function every second to update the value. 请参阅下面的代码段以获取演示，其中setInterval（）用于每秒调用一个函数来更新值。
The code below waits until the DOM is ready by adding an event listener (using document.addEventListener() ) to add a callback when the event DOMContentLoaded happens. 下面的代码通过添加事件侦听器（使用document.addEventListener（） ）等待DOM准备就绪，以便在事件DOMContentLoaded发生时添加回调。 That way it doesn't try to access elements in the DOM (eg the progress element) before it is ready. 这样，它就不会在准备好之前尝试访问DOM中的元素（例如progress元素）。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.