JS模拟的进度条

进度条实现

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS和JavaScript实现的动态进度条示例。该进度条能够根据设定的时间逐步填充，展示了基本的前端计时和DOM操作技巧。通过定时器控制进度条的更新频率，实现了流畅的动画效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>progress</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

</style>

    startProgress:function(){
     if(this.times > this.loopTimes){
      alert("Jump to another page");
      clearTimeout(this.timer);
      this.timer=0;
     }
     else
     {
      this.SetProgress('RealStatus','timeNum1');
      this.timer = setTimeout(function(){progress.startProgress();}, this.interval);
     }
    }
};

function uiOnload(){
progress.init(353,60,200);
progress.startProgress();
}

window.onload = uiOnload;
//]]>
</script>
</head>
<body>
<div class="ProgBar"><div id="RealStatus"></div></div><label id="timeNum1" style="width:50px;">   </label>second
</body>
</html>