0

所以我希望能够每秒更改一个 div 宽度，但是我当前使用的代码似乎不起作用

<script type="text/javascript">

    $("#progress").css("width", "55%");

</script>

<div id="progress"></div>

我已在 CSS 中将“进度”div 设置为 1px。

#progress {
position: relative;
background: url('prog1.jpg') repeat-x;
height: 100%;
border: 1px solid #145b8c;
border-radius: 5px;
margin-left: -1px;
margin-top: -1px;
width: 1px;
}

任何帮助，将不胜感激。

4

7 回答 7

2

有2个解决方案。

  1. 使用document.ready函数。
  2. 在加载 html 后放置 JavaScript。

代码：

 $(function (){
     $("#progress").css("width", "55%");
 });

您的解决方案不起作用，因为有时该元素未加载，因此无法更改。Document.ready 在整个文档被加载时执行。当 ready 事件中的代码被执行时，你可以确定每个 html 元素都被加载了。

要每秒更改一次代码，您需要使用 setInterval 函数

 setInterval(function() {
  // Do something every 1 second
 }, 1000);

每秒变化 + 5px 的示例

$(function (){

     var counter = 1;
     setInterval(function() {
      counter = (counter + 5) % 100;
      $("#progress").css("width", counter + "%");
     }, 1000);
 });

观看工作演示

于 2013-06-26T10:36:50.783 回答
1

将您的代码包装在文档就绪处理程序中

 $(function(){
    $("#progress").css("width", "55%");
 });
于 2013-06-26T10:33:50.040 回答
1

我不确定您如何/在何处执行该 jQuery 代码。如果它真的像你指定的那样，那么到它执行时，你的 div 还不存在。相反，请在文档加载后尝试执行它：

$(document).ready(function() {
    $("#progress").css("width", "55%");
});
于 2013-06-26T10:35:08.283 回答
0

这可能是解决方案：http: //jsfiddle.net/balintbako/kNgg7/（它停在100，但你可以调整）

HTML

<div id="main">
    <div id="progress"></div>
</div>

JS

function progress(speed) {
    setInterval(function() {
        $("#progress").animate({
            width: "+=" + speed
        });
        if ($("#progress").width < 100) {
            progress(speed);
        }
    }, 1000);
}

progress(1);
于 2013-06-26T10:43:34.283 回答
0

如果我正确理解了问题，那么答案是添加：

显示：内联；到 ID #progress

希望能帮助到你..

于 2013-06-26T10:40:57.987 回答
0

您也可以将该代码用于 onload 函数，或者使用准备好的处理程序，就像其他朋友评论的那样。

html:

<body onload="init()">

Javascript：

function init() {
    $("#progress").css("width", "55%");
}
于 2013-06-26T10:36:40.400 回答
0

获取当前宽度并更新它并使用setInterval和clearInterval

参考这个答案： http ://stackoverflow.com/questions/7164090/jquery-run-click-function-every-x-seconds

我还建议Progressbar它是否适合您

<script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }

    setTimeout( progress, 3000 );
  });
  </script>
于 2013-06-26T10:37:03.883 回答