gpt4 book ai didi

javascript - 如何在 jQuery 中将计时器与无限循环链接起来?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:05:25 26 4
gpt4 key购买 nike

我正在尝试构建一个与计时器相关联的进度条。例如,每秒会增加 1% 的条宽。现在,我将进入可以单击按钮并开始进行的部分,但这纯粹是任意的。我怎样才能用 jQuery 获得某种无限循环来每秒更新条形图?另一个问题可能更基本?如何使用按钮停止条形图的前进?

两个问题

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancy Timer </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/jquery-1.7.2.js"></script>
</head>



<body>


<script type="text/javascript">
$(document).ready( function ( $ ) {
last=$('ul.events li:last div').css('border', '1px solid red');


function foo(e) {
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
};

$("#timer").bind({
'click': foo,
});




})


</script>


<div id="wrapper">
<a href="#" id="timer">START</a>

<ul class="events">
<!-- <li style="width: 42.48%; left: 57.2%;">Design &amp; Typography <em>(2007 - 2009)</em></li> -->
<li><div class="bar" style="width: 30%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div> </li>
<li><div class="bar" style="width: 55%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
<li><div class="bar" style="width: 45%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
<li><div class="bar" style="width: 10%; left: 0;">Drawing </div></li>
</ul> <!-- end .events -->
</div>



</body>
</html>

最佳答案

听起来您正在寻找 setInterval .

var timerId = setInterval(function() {
// code you want to execute every second here
}, 1000);
// 1 second = 1000 milliseconds.

然后当您不再希望代码每秒都运行时,您可以这样做:

clearInterval(timerId);

关于javascript - 如何在 jQuery 中将计时器与无限循环链接起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9929885/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com