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

﹏ヽ暗。殇╰゛Y 2024-03-17 23:31 70阅读 0赞

### 重点： ###

#### 用到计时函数 ####

####  DOM操作修改html属性 ####

#### DOM操作修改文本内容 ####

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

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

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

### **一.计时函数** ###

1.  **计时器是一种用于周期性执行代码的机制。在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项目：**

![8a82c41a831a4f08bc5a6600e097d4d7.png][]

<%@ 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>
    
        
    	<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>
    
        
    	<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">
    		
    		<div id="div3" style="width: 1px;"></div>
       </div>
       
       
       <div id="progress"></div>
       
    </body>
    </html>

### **四.****结果** ###

![642d4ec2282745d2855ddbb1a3872160.png][]

![3476893af7c64ba48557b18b804db434.png][]

[8a82c41a831a4f08bc5a6600e097d4d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2836a4ac24fd4c96bd8dfbcbc6cd1747.png
[642d4ec2282745d2855ddbb1a3872160.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/48fff04e66924e238e6e3f40a7d2f9bf.png
[3476893af7c64ba48557b18b804db434.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/05056bed6ca9498d8961bc58fb1b6ed4.png