本文共 999 字，大约阅读时间需要 3 分钟。

使用 DOM 对象与计时器实现点击“启动”执行，点击“停止”停止

通过 JavaScriptुकस 技术，可以利用 DOM 对象与计时器实现页面元素的动态更新。本文将详细讲解如何利用 setInterval 和 clearInterval 方法来控制页面内容的更新。

实现目标

工作原理

代码实现

   
   
    
使用 DOM 对象与计时器实现点击"启动"执行，点击"停止"停止
    
   
    
        
    
        
    
        
        
        
    
        
    
        启动   
        停止
        
    
        
    
        
    
        
    
        
    
        启动   
        停止
        
    
        
    
    
   

2. JavaScript 实现

let time;
let num = 0;
function start() {
    stop();
    time = setInterval(() => {
        document.getElementById("t1").textContent = num++;
    }, 1000);
}
function stop() {
    clearInterval(time);
}

功能说明

3. 点击“启动”按钮后

   • 调用 stop() 来确保当前定时器已停止
   • 启动新的 setInterval 定时器，每秒间隔更新一次
   • 页面元素 "#t1" 内容会不断递增数值

4. 点击“停止”按钮后

   • 立即调用 clearInterval 终止当前定时器
   • 页面更新将立即停止

###]

通过以上方法，可以轻松实现页面内容的定时更新功能。无论是通过 a 标签控制还是 button 按钮，都可以实现想要的效果。