进度条：计时函数、DOM操作修改html属性、DOM操作修改文本内容

@纯牛奶

于 2023-07-21 16:53:28 发布

阅读量1.9k

点赞数 2

分类专栏： JavaWeb 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_45686922/article/details/131855502

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

重点：

用到计时函数

DOM操作修改html属性

DOM操作修改文本内容

思路：用计时器函数每间隔一段时间就增加一些进度条长度，刚开始进度条有其他全部属性就是长度为0px，经过计时器函数每一次都增加其长度就出现了增长情况。

（实现动态更新进度条而不刷新整个页面，可以使用JavaScript来操作DOM元素，通过修改相关元素的样式或属性来实现进度条的更新效果，可以使用setTimeout或setInterval函数来定时更新进度条，并通过相应的逻辑计算进度百分比并更新相应的样式或属性。）

这种方法称为异步更新，因为它不需要刷新整个页面，只更新需要更新的部分，从而提供更流畅和实时的用户体验。同时，这也避免了每次增加进度条都会导致页面刷新的问题。

一.计时函数

计时器是一种用于周期性执行代码的机制。在JavaScript中，可以使用setInterval()函数创建计时器，并使用clearInterval()函数来结束计时器。

使用setInterval()函数创建一个计时器，并传入要执行的函数以及时间间隔作为参数。例如：

var tm = setInterval(myFunction, 1000);

这行代码将每隔1秒（1000毫秒）调用myFunction()函数一次。

2.在计时器函数中定义要执行的代码逻辑。该代码将在定时间隔内重复执行。

若要手动结束计时器，可以使用clearInterval()函数并传入计时器的引用作为参数。例如：

clearInterval(tm);

这行代码将停止计时器的执行。

需要注意的是，计时器的标识符（例如tm）必须被存储起来，以便后续能够引用并清除计时器。否则，在无法引用计时器的情况下，将无法结束它的执行。

二.DOM操作

DOM（Document Object Model）是一种用于访问和操作 HTML 和 XML 文档的编程接口。通过使用 DOM 操作，可以修改 HTML 元素的属性和文本内容。

DOM 操作修改HTML属性的基本步骤如下：

使用 document.getElementById() 方法或其他 DOM 查询方法获取要修改的元素。

例如：var element = document.getElementById("myElement");

使用其中一个属性来修改元素的属性值。

例如：element.setAttribute("attributeName", "attributeValue");

这里的 "attributeName" 是要修改或添加的属性名，而 "attributeValue" 是要设置的属性值。

也可以直接通过点号.来访问元素的属性，并直接为其赋值。

例如：element.attributeName = "attributeValue";

根据需要，可以重复步骤 2 来修改更多的属性。

DOM 操作修改文本内容的基本步骤如下：

使用 document.getElementById() 方法或其他 DOM 查询方法获取包含文本的元素。

例如：var element = document.getElementById("myElement");

使用 innerText 或 textContent 属性修改元素的文本内容。innerText 和 textContent 属性的行为略有不同。innerText 属性会忽略元素中的样式和脚本，只显示纯文本内容。而 textContent 属性会保留原始的标签结构和空白字符，将文本作为节点的内容进行处理。

例如：element.innerText = "New text content";

需要注意的是：

使用 setAttribute() 方法可以修改或添加 HTML 属性。这适用于任何 HTML 元素。

使用点号.来直接访问属性是在访问 JavaScript 对象上的属性，对应的是 JavaScript 中定义的属性，而非 HTML 属性。这样的属性和方法是特定于元素的或 DOM 对象的，并不适用于所有 HTML 元素。

使用 innerText 或 textContent 可以修改元素内部的文本内容。其中，innerText 会将文本作为纯文本显示（就是忽略hml样式），而 textContent 会保留原始的标签结构和空白字符（会保留样式）。

三.代码

动态web项目：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

    <!-- CSS Styles -->
	<style type="text/css">
        #div3 {
            border-radius: 5px;  /* 圆角边框 */
            top: 100px;  /* 上边距 */
            height: 20px;  /* 高度 */
            width: 1px;  /* 宽度 */
            background-color: #1afa29;  /* 背景颜色 */
        }
        
        #progress {
            margin:0px auto;  /* 居中显示 */
            border-radius: 5px;  /* 圆角边框 */
            width: 1px;  /* 宽度，这个如果不设置宽度，div就不会居中 */
        }
        
	</style>

    <!-- JavaScript -->
	<script type="text/javascript">
        // 创建计时器，调用 adw 函数来更新进度条和进度数字
        var js3 = setInterval(adw,15);
        
        function adw() {
            var i = 0;
            var div3 = document.getElementById("div3");//可以通过 id ("div3")属性获取到相应的 HTML 元素对象
            var new_width = div3.style.width;
            
            // 提取当前宽度值，去除单位 px
            var new_width_value = new_width.substring(0,new_width.lastIndexOf('px'));
            
            i = new_width_value;
            
            // 将宽度值增加 1px
            new_width_value = (parseInt(new_width_value) + parseInt(1)) + 'px';
            div3.style.width = new_width_value;
            
            // 更新进度数字
            document.getElementById("progress").innerText = Math.floor((parseInt(new_width_value) / 500) * 100) + "%";
            
            // 达到指定宽度后停止计时器
            if(i == 500){
                clearInterval(js3);
            }
        }  
	</script>
</head>
<body>
    <!-- 进度条容器 -->
	<div style="margin:0px auto; border-radius: 5px; width: 500px; background-color:red">
		<!-- 一个带有 id="div3" 的 div 元素，用作进度条 -->
		<div id="div3" style="width: 1px;"></div>
   </div>
   
   <!-- 用于显示进度数字的元素 -->
   <div id="progress"></div>
   
</body>
</html>