推扬网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
推扬网 门户 你问我答 查看内容

js怎么实现进度条!

2020-7-13 17:52| 发布者: admin| 查看: 36| 评论: 0

摘要: lt318025的回答 就是要用setInterval setTimeout慢慢的改变div的宽,好像一点一点涨到100%for(var i=0;i100;i++){for(var j=0;j10000;j++){var width = $(#progressBar).width();width+=1;$(#progressBar).width(wi ...

lt318025的回答

就是要用setInterval setTimeout
慢慢的改变div的宽,好像一点一点涨到100%

for(var i=0;i<100;i++)
{
for(var j=0;j<10000;j++)
{
var width = $("#progressBar").width();
width+=1;
$("#progressBar").width(width);
//这样不行 是因为for循环在很短的时间内执行完毕你根本看不出来

}
}

Baby_原來的回答

<!DOCTYPE "> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>进度条</title> 
<style type="text/css"> 
  body{ 
    text-align:center; 
  } 
  .graph{ 
    width:450px; 
    border:1px solid #F8B3D0; 
    height:25px; 
  } 
  #bar{ 
        display:block; 
        background:#FFE7F4; 
        float:left; 
        height:100%; 
        text-align:center; 
    } 
    #barNum{ 
        position:absolute; 
    } 
</style> 
<script type="text/javascript"> 
function $(obj){ //封装方法,相当于jQuery
    return document.getElementById(obj); 

function go(){ 
    $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
    $("bar").innerHTML = $("bar").style.width; 
    if($("bar").style.width == "100%"){ 
        window.clearInterval(bar); //进度为100时清除定时器
    } 

var bar = window.setInterval("go()",50); //设置定时器
window.onload = function(){ 
    bar; 

</script> 
</head> 
<body> 
<div class="graph"> 
<strong id="bar" style="width:1%;"></strong> 
</div> 
</body> 
</html>

欧阳_寒涵的回答

程序后台运行只能用ajax向前台一次性输出结果。

鲜花

握手

雷人

路过

鸡蛋

最新评论

热门推荐
最新资讯

QQ|广告服务|投稿要求|禁言标准|版权说明|免责声明|手机版|小黑屋|推扬网 ( 粤ICP备18134897号 )|网站地图

GMT+8, 2021-5-14 17:51 , Processed in 0.169487 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

返回顶部