数字滚动条具有无限循环，直到按下停止按钮

时间：2015-11-17 08:19:27

标签： javascript php jquery loops onclick

看看这个小提琴http://jsfiddle.net/vuofxovb/1/

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
 .square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  /* = width for a 1:1 aspect ratio */
  margin: 1.66%;
  background-color: #1E1E1E;
  overflow: hidden;
}
.content {
  position: absolute;
  height: 90%;
  /* = 100% - 2*5% padding */
  width: 90%;
  /* = 100% - 2*5% padding */
  padding: 5%;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
/*  For list */

ul {
  text-align: left;
  margin: 5% 0 0;
  padding: 0;
  list-style-position: inside;
}
li {
  margin: 0 0 0 5%;
  padding: 0;
}
body {
  font-size: 20px;
  font-family: 'Lato', verdana, sans-serif;
  color: #fff;
  text-align: center;
  background: #ECECEC;
}
p {
  margin: 0;
  padding: 0;
  text-align: left;
}
.numbers {
  font-weight: 900;
  font-size: 75px;
}
.text {
  font-weight: 900;
  font-size: 25px;
}
＆＃13; 
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text">
        START
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">

      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text">
        STOP
      </div>
    </div>
  </div>
</div>


<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        1
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        2
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        3
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        4
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        5
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        6
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        7
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        8
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        9
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我在3 x 3网格中有9个数字。顶行左侧是“开始”按钮，右侧是“停止”按钮，中间是空白方块。当点击START时，我希望在中间方块有一个计数器在无限循环中运行。这个中间正方形将数字放在3 x 3网格中（随机排序 - 不是正确的升序或降序）。单击“停止”按钮将停止循环。我尝试在少数javascripts和php论坛中找到一个解决方案，但无法找到会在同一个DIV中增加数字的东西

3 个答案:

答案 0 :(得分：2)

试试这个： - 

 var count = 0,interval;

   // Start the timer
    $(".start").click(function(){
    var result = $(".result");
        interval = setInterval(function(){
        $(".result").html(count++);
        },100); // 100 milliseconds
    });

    // Stop the timer 
    $(".stop").click(function(){
    clearInterval(interval);
    });

Fiddle

答案 1 :(得分：2)

使用每隔x毫秒调用一次函数的setInterval。

使用数组（1到9）进行随机播放，因此您可以将数字随机化而不重复。我使用了外部库underscore.js，但还有很多其他方法可以做到这一点。

然后使用clearInterval停止： -

您的工作代码： -

＆＃13;
＆＃13; 
var interval;
var counter = 0;
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

$('.start').click(function() {
  interval = setInterval(function() {
    numbers = _.shuffle(numbers);
    $('.table-cell.counter').html(counter++);
    $('.table-cell.numbers').each(function(index) {
      $(this).html(numbers[index]);
    });
  }, 500);
});

$('.stop').click(function() {
  clearInterval(interval);
});
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
 .square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  /* = width for a 1:1 aspect ratio */
  margin: 1.66%;
  background-color: #1E1E1E;
  overflow: hidden;
}
.content {
  position: absolute;
  height: 90%;
  /* = 100% - 2*5% padding */
  width: 90%;
  /* = 100% - 2*5% padding */
  padding: 5%;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
/*  For list */

ul {
  text-align: left;
  margin: 5% 0 0;
  padding: 0;
  list-style-position: inside;
}
li {
  margin: 0 0 0 5%;
  padding: 0;
}
body {
  font-size: 20px;
  font-family: 'Lato', verdana, sans-serif;
  color: #fff;
  text-align: center;
  background: #ECECEC;
}
p {
  margin: 0;
  padding: 0;
  text-align: left;
}
.numbers {
  font-weight: 900;
  font-size: 75px;
}
.text {
  font-weight: 900;
  font-size: 25px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text start">
        START
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell counter">

      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text stop">
        STOP
      </div>
    </div>
  </div>
</div>


<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        1
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        2
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        3
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        4
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        5
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        6
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        7
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        8
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        9
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

  

感谢您的解决方案。我想问这个柜台还在继续   增量超过9.理想情况下，当它达到9时，它应该回来   1.还有一件事我忘了提及。是否有可能改变   网格中与停止的数字匹配的数字的颜色？例如。   如果停止后的数字为4，则数字为4   格子应该变成黄色，下次当我再次开始时，4应该   从阵列中消失。因此，当我点击开始9次时，全部   网格中的颜色应该变为黄色，然后应该是“开始”按钮   发一条消息＆＃34;所有号码都已完成......＆＃34;感谢

＆＃13;
＆＃13; 
var interval;
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

$('.start').click(function() {
  interval = setInterval(function() {
    if (numbers.length) {
      numbers = _.shuffle(numbers);
      $('.table-cell.counter').html(numbers[0]);
    }
  }, 500);
});

$('.stop').click(function() {
  clearInterval(interval);
  numbers.shift(0);
  $('.table-cell.numbers').each(function() {
    var number = parseInt($(this).html());
    $(this).toggleClass('selected', numbers.indexOf(number) == -1);
  });
  if (!numbers.length) {
    $('.table-cell.start').html('All numbers done....').addClass('selected');
  }
});
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
 .square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  /* = width for a 1:1 aspect ratio */
  margin: 1.66%;
  background-color: #1E1E1E;
  overflow: hidden;
}
.content {
  position: absolute;
  height: 90%;
  /* = 100% - 2*5% padding */
  width: 90%;
  /* = 100% - 2*5% padding */
  padding: 5%;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
/*  For list */

ul {
  text-align: left;
  margin: 5% 0 0;
  padding: 0;
  list-style-position: inside;
}
li {
  margin: 0 0 0 5%;
  padding: 0;
}
body {
  font-size: 20px;
  font-family: 'Lato', verdana, sans-serif;
  color: #fff;
  text-align: center;
  background: #ECECEC;
}
p {
  margin: 0;
  padding: 0;
  text-align: left;
}
.numbers {
  font-weight: 900;
  font-size: 75px;
}
.selected {
  color: yellow;
}
.text {
  font-weight: 900;
  font-size: 25px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text start">
        START
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell counter">

      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell text stop">
        STOP
      </div>
    </div>
  </div>
</div>


<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        1
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        2
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        3
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        4
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        5
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        6
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        7
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        8
      </div>
    </div>
  </div>
</div>
<div class="square">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        9
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我并不是说听起来很粗鲁，但你应该学会自己研究这些简单的事情，你会得到更好更快的结果。

以下是有关时间的一些信息，http://www.w3schools.com/js/js_timing.asp

基本示例：

var timer_id;

function onTick() {
    console.log("tick");
}

function start() {
    timer_id = setInterval( onTick, 1000); // 1000 milliseconds = 1 second interval
}

function stop() {
    if( timer_id)
        clearInterval( timer_id);
}

这只是解释了如何处理时间问题。 onTick将每秒调用一次，直到调用stop（）。只需在html中的onClick事件中放入start（）和stop（），在onTick中，您将需要更新计时器的内容。

相关问题
最新问题