回帖中禁止出现的内容，违者将被直接永久禁止访问，删除ID处理：1.违反法律法规，包括但不限于出现带有政治、色情、暴恐信息等内容；2.恶意攻击内容，包括但不限于：恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等；3.广告、推广内容，尤其出现带有病毒、恶意代码、广告链接等内容，包括但不限于：QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等；4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

查看: 985|回复: 0

JS动态进度条示例代码

[复制链接]

升平网络工作室

8092 主题	8127 帖子	9396 积分

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 9396

发表于 2020-8-24 09:44:44 | 显示全部楼层 |阅读模式

<head>
<style>
*{
margin: 0;
padding: 0;
}
#progress{
width: 100%;
height: 11px;
background: #eee;
}
#bar{
width: 1%;
height: 10px;
margin-top: 1px;
background: #00f;
}
</style>
</head>
<body>
<div id="progress">
<div id="bar"></div>
</div>
<div><h3 id="text-progress">0%</h3></div>
</body>
<script>
function action(){
var iSpeed=1;
obj=setInterval(function(){
iSpeed+=1;
if(iSpeed>=100){ // 设置达到多少进度后停止
clearInterval(obj);
window.location.href="?api=shouyinyuan&t="+parseInt(new Date().getTime()/1000);
}
bar.style.width=iSpeed+'%';
document.getElementById('text-progress').innerHTML=iSpeed+'%';
},1000); // 1s后函数执行一次
}
action();
</script>
</html>

复制代码

打赏鼓励一下！

打赏

使用道具举报

返回列表

回帖中禁止出现的内容，违者将被直接永久禁止访问，删除ID处理：1.违反法律法规，包括但不限于出现带有政治、色情、暴恐信息等内容；2.恶意攻击内容，包括但不限于：恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等；3.广告、推广内容，尤其出现带有病毒、恶意代码、广告链接等内容，包括但不限于：QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等；4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

新用户