代码之家 › 专栏 › 技术社区 › joshmoto

使用每个循环之间的延迟来运行jquery

jquery

joshmoto · 技术社区 · 7 年前

下面是我正在使用的 $.each 环游世界 seconds

// remove class regex
$.fn.removeClassRegEx = function(regex) {
  var classes = $(this).attr('class');
  if (!classes || !regex) return false;
  var classArray = [];
  classes = classes.split(' ');
  for (var i = 0, len = classes.length; i < len; i++)
    if (!classes[i].match(regex)) classArray.push(classes[i]);
  $(this).attr('class', classArray.join(' '));
};

var seconds = [
  ['0', '1'],
  ['0', '2'],
  ['0', '3'],
  ['0', '4'],
  ['0', '5'],
  ['0', '6'],
  ['0', '7'],
  ['0', '8'],
  ['0', '9'],
  ['1', '0'],
];

$.each(seconds, function(sec, num) {

  setTimeout(function() {

    $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
    $('.s-1 > DIV').addClass('n-' + num[0]);
    $('.s-2 > DIV').addClass('n-' + num[1]);

  }, 1000);

});

.clock {
  padding: 40px;
  margin: 40px auto;
  width: calc(40px*8);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .8rem;
  color: #e83e8c;
}

.clock .h-1,
.clock .h-2,
.clock .m-1,
.clock .m-2,
.clock .s-1,
.clock .s-2 {
  margin-bottom: 0px;
  width: 50%;
  float: left;
  position: relative;
}

.clock .h-1:before,
.clock .h-2:before,
.clock .m-1:before,
.clock .m-2:before,
.clock .s-1:before,
.clock .s-2:before {
  content: "";
  padding-top: 150%;
  display: block;
}

.clock .h-1>DIV,
.clock .h-2>DIV,
.clock .m-1>DIV,
.clock .m-2>DIV,
.clock .s-1>DIV,
.clock .s-2>DIV {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.clock TIME {
  /* clock */
  float: left;
  width: calc(40px);
  height: calc(40px);
  display: block;
  background: #eeeeee;
  border-radius: 50%;
  position: relative;
  /* the hands */
}

.clock TIME SPAN {
  position: absolute;
}

.clock TIME:before,
.clock TIME:after {
  border-radius: 1%;
  content: "";
  display: block;
  width: 2px;
  height: 50%;
  background: #424242;
  left: 50%;
  position: absolute;
  transform: translateX(-1px);
  transform-origin: center bottom;
  transition: all 1s;
}

.n-0 .t-01:before{transform:rotate(180deg)}.n-0 .t-01:after{transform:rotate(90deg)}.n-0 .t-02:before{transform:rotate(270deg)}.n-0 .t-02:after{transform:rotate(90deg)}.n-0 .t-03:before{transform:rotate(270deg)}.n-0 .t-03:after{transform:rotate(90deg)}.n-0 .t-04:before{transform:rotate(270deg)}.n-0 .t-04:after{transform:rotate(180deg)}.n-0 .t-05:before{transform:rotate(360deg)}.n-0 .t-05:after,.n-0 .t-06:before{transform:rotate(180deg)}.n-0 .t-06:after{transform:rotate(90deg)}.n-0 .t-07:before{transform:rotate(270deg)}.n-0 .t-07:after{transform:rotate(180deg)}.n-0 .t-08:before{transform:rotate(360deg)}.n-0 .t-08:after{transform:rotate(180deg)}.n-0 .t-09:before{transform:rotate(360deg)}.n-0 .t-09:after{transform:rotate(180deg)}.n-0 .t-10:before{transform:rotate(360deg)}.n-0 .t-10:after{transform:rotate(180deg)}.n-0 .t-11:before{transform:rotate(360deg)}.n-0 .t-11:after{transform:rotate(180deg)}.n-0 .t-12:before{transform:rotate(360deg)}.n-0 .t-12:after{transform:rotate(180deg)}.n-0 .t-13:before{transform:rotate(360deg)}.n-0 .t-13:after{transform:rotate(180deg)}.n-0 .t-14:before{transform:rotate(360deg)}.n-0 .t-14:after{transform:rotate(180deg)}.n-0 .t-15:before{transform:rotate(360deg)}.n-0 .t-15:after{transform:rotate(180deg)}.n-0 .t-16:before{transform:rotate(360deg)}.n-0 .t-16:after{transform:rotate(180deg)}.n-0 .t-17:before{transform:rotate(360deg)}.n-0 .t-17:after{transform:rotate(180deg)}.n-0 .t-18:before{transform:rotate(90deg)}.n-0 .t-18:after{transform:rotate(0)}.n-0 .t-19:before{transform:rotate(270deg)}.n-0 .t-19:after{transform:rotate(0)}.n-0 .t-20:before{transform:rotate(360deg)}.n-0 .t-20:after{transform:rotate(180deg)}.n-0 .t-21:before{transform:rotate(90deg)}.n-0 .t-21:after{transform:rotate(0)}.n-0 .t-22:before{transform:rotate(270deg)}.n-0 .t-22:after{transform:rotate(90deg)}.n-0 .t-23:before{transform:rotate(270deg)}.n-0 .t-23:after{transform:rotate(90deg)}.n-0 .t-24:before{transform:rotate(270deg)}.n-0 .t-24:after{transform:rotate(0)}.n-1 .t-01:before{transform:rotate(180deg)}.n-1 .t-01:after{transform:rotate(90deg)}.n-1 .t-02:before{transform:rotate(270deg)}.n-1 .t-02:after{transform:rotate(90deg)}.n-1 .t-03:before{transform:rotate(270deg)}.n-1 .t-03:after{transform:rotate(180deg)}.n-1 .t-04:after,.n-1 .t-04:before{transform:rotate(225deg)}.n-1 .t-05:before{transform:rotate(360deg)}.n-1 .t-05:after{transform:rotate(90deg)}.n-1 .t-06:before{transform:rotate(270deg)}.n-1 .t-06:after{transform:rotate(180deg)}.n-1 .t-07:before{transform:rotate(360deg)}.n-1 .t-07:after{transform:rotate(180deg)}.n-1 .t-08:after,.n-1 .t-08:before,.n-1 .t-09:after,.n-1 .t-09:before{transform:rotate(225deg)}.n-1 .t-10:before{transform:rotate(360deg)}.n-1 .t-10:after{transform:rotate(180deg)}.n-1 .t-11:before{transform:rotate(360deg)}.n-1 .t-11:after{transform:rotate(180deg)}.n-1 .t-12:after,.n-1 .t-12:before,.n-1 .t-13:after,.n-1 .t-13:before{transform:rotate(225deg)}.n-1 .t-14:before{transform:rotate(360deg)}.n-1 .t-14:after{transform:rotate(180deg)}.n-1 .t-15:before{transform:rotate(360deg)}.n-1 .t-15:after{transform:rotate(180deg)}.n-1 .t-16:after,.n-1 .t-16:before{transform:rotate(225deg)}.n-1 .t-17:before{transform:rotate(180deg)}.n-1 .t-17:after{transform:rotate(90deg)}.n-1 .t-18:before{transform:rotate(270deg)}.n-1 .t-18:after{transform:rotate(0)}.n-1 .t-19:before{transform:rotate(360deg)}.n-1 .t-19:after{transform:rotate(90deg)}.n-1 .t-20:before{transform:rotate(270deg)}.n-1 .t-20:after{transform:rotate(180deg)}.n-1 .t-21:before{transform:rotate(90deg)}.n-1 .t-21:after{transform:rotate(0)}.n-1 .t-22:before{transform:rotate(270deg)}.n-1 .t-22:after{transform:rotate(90deg)}.n-1 .t-23:before{transform:rotate(270deg)}.n-1 .t-23:after{transform:rotate(90deg)}.n-1 .t-24:before{transform:rotate(270deg)}.n-1 .t-24:after{transform:rotate(0)}.n-2 .t-01:before{transform:rotate(180deg)}.n-2 .t-01:after{transform:rotate(90deg)}.n-2 .t-02:before{transform:rotate(270deg)}.n-2 .t-02:after{transform:rotate(90deg)}.n-2 .t-03:before{transform:rotate(270deg)}.n-2 .t-03:after{transform:rotate(90deg)}.n-2 .t-04:before{transform:rotate(270deg)}.n-2 .t-04:after{transform:rotate(180deg)}.n-2 .t-05:before{transform:rotate(360deg)}.n-2 .t-05:after{transform:rotate(90deg)}.n-2 .t-06:before{transform:rotate(270deg)}.n-2 .t-06:after{transform:rotate(90deg)}.n-2 .t-07:before{transform:rotate(270deg)}.n-2 .t-07:after{transform:rotate(180deg)}.n-2 .t-08:before{transform:rotate(360deg)}.n-2 .t-08:after{transform:rotate(180deg)}.n-2 .t-09:before{transform:rotate(90deg)}.n-2 .t-09:after{transform:rotate(180deg)}.n-2 .t-10:before{transform:rotate(270deg)}.n-2 .t-10:after{transform:rotate(90deg)}.n-2 .t-11:before{transform:rotate(360deg)}.n-2 .t-11:after{transform:rotate(270deg)}.n-2 .t-12:before{transform:rotate(360deg)}.n-2 .t-12:after{transform:rotate(180deg)}.n-2 .t-13:before{transform:rotate(360deg)}.n-2 .t-13:after{transform:rotate(180deg)}.n-2 .t-14:before{transform:rotate(90deg)}.n-2 .t-14:after{transform:rotate(180deg)}.n-2 .t-15:before{transform:rotate(270deg)}.n-2 .t-15:after{transform:rotate(90deg)}.n-2 .t-16:before{transform:rotate(270deg)}.n-2 .t-16:after{transform:rotate(0)}.n-2 .t-17:before{transform:rotate(360deg)}.n-2 .t-17:after{transform:rotate(180deg)}.n-2 .t-18:before{transform:rotate(90deg)}.n-2 .t-18:after{transform:rotate(0)}.n-2 .t-19:before{transform:rotate(270deg)}.n-2 .t-19:after{transform:rotate(90deg)}.n-2 .t-20:before{transform:rotate(270deg)}.n-2 .t-20:after{transform:rotate(180deg)}.n-2 .t-21:before{transform:rotate(90deg)}.n-2 .t-21:after{transform:rotate(0)}.n-2 .t-22:before{transform:rotate(270deg)}.n-2 .t-22:after{transform:rotate(90deg)}.n-2 .t-23:before{transform:rotate(270deg)}.n-2 .t-23:after{transform:rotate(90deg)}.n-2 .t-24:before{transform:rotate(270deg)}.n-2 .t-24:after{transform:rotate(0)}.n-3 .t-01:before{transform:rotate(180deg)}.n-3 .t-01:after{transform:rotate(90deg)}.n-3 .t-02:before{transform:rotate(270deg)}.n-3 .t-02:after{transform:rotate(90deg)}.n-3 .t-03:before{transform:rotate(270deg)}.n-3 .t-03:after{transform:rotate(90deg)}.n-3 .t-04:before{transform:rotate(270deg)}.n-3 .t-04:after{transform:rotate(180deg)}.n-3 .t-05:before{transform:rotate(360deg)}.n-3 .t-05:after{transform:rotate(90deg)}.n-3 .t-06:before{transform:rotate(270deg)}.n-3 .t-06:after{transform:rotate(90deg)}.n-3 .t-07:before{transform:rotate(270deg)}.n-3 .t-07:after{transform:rotate(180deg)}.n-3 .t-08:before{transform:rotate(360deg)}.n-3 .t-08:after{transform:rotate(180deg)}.n-3 .t-09:before{transform:rotate(90deg)}.n-3 .t-09:after{transform:rotate(180deg)}.n-3 .t-10:before{transform:rotate(270deg)}.n-3 .t-10:after{transform:rotate(90deg)}.n-3 .t-11:before{transform:rotate(360deg)}.n-3 .t-11:after{transform:rotate(270deg)}.n-3 .t-12:before{transform:rotate(360deg)}.n-3 .t-12:after{transform:rotate(180deg)}.n-3 .t-13:before{transform:rotate(360deg)}.n-3 .t-13:after{transform:rotate(90deg)}.n-3 .t-14:before{transform:rotate(270deg)}.n-3 .t-14:after{transform:rotate(90deg)}.n-3 .t-15:before{transform:rotate(270deg)}.n-3 .t-15:after{transform:rotate(180deg)}.n-3 .t-16:before{transform:rotate(360deg)}.n-3 .t-16:after,.n-3 .t-17:before{transform:rotate(180deg)}.n-3 .t-17:after{transform:rotate(90deg)}.n-3 .t-18:before{transform:rotate(270deg)}.n-3 .t-18:after{transform:rotate(90deg)}.n-3 .t-19:before{transform:rotate(270deg)}.n-3 .t-19:after{transform:rotate(0)}.n-3 .t-20:before{transform:rotate(360deg)}.n-3 .t-20:after{transform:rotate(180deg)}.n-3 .t-21:before{transform:rotate(90deg)}.n-3 .t-21:after{transform:rotate(0)}.n-3 .t-22:before{transform:rotate(270deg)}.n-3 .t-22:after{transform:rotate(90deg)}.n-3 .t-23:before{transform:rotate(270deg)}.n-3 .t-23:after{transform:rotate(90deg)}.n-3 .t-24:before{transform:rotate(270deg)}.n-3 .t-24:after{transform:rotate(0)}.n-4 .t-01:before{transform:rotate(90deg)}.n-4 .t-01:after{transform:rotate(180deg)}.n-4 .t-02:before{transform:rotate(270deg)}.n-4 .t-02:after{transform:rotate(180deg)}.n-4 .t-03:after,.n-4 .t-03:before,.n-4 .t-04:after,.n-4 .t-04:before{transform:rotate(225deg)}.n-4 .t-05:before{transform:rotate(360deg)}.n-4 .t-05:after{transform:rotate(180deg)}.n-4 .t-06:before{transform:rotate(360deg)}.n-4 .t-06:after{transform:rotate(180deg)}.n-4 .t-07:after,.n-4 .t-07:before,.n-4 .t-08:after,.n-4 .t-08:before{transform:rotate(225deg)}.n-4 .t-09:before{transform:rotate(360deg)}.n-4 .t-09:after{transform:rotate(180deg)}.n-4 .t-10:before{transform:rotate(360deg)}.n-4 .t-10:after,.n-4 .t-11:before{transform:rotate(180deg)}.n-4 .t-11:after{transform:rotate(90deg)}.n-4 .t-12:before{transform:rotate(270deg)}.n-4 .t-12:after{transform:rotate(180deg)}.n-4 .t-13:before{transform:rotate(360deg)}.n-4 .t-13:after{transform:rotate(180deg)}.n-4 .t-14:before{transform:rotate(360deg)}.n-4 .t-14:after{transform:rotate(90deg)}.n-4 .t-15:before{transform:rotate(270deg)}.n-4 .t-15:after{transform:rotate(0)}.n-4 .t-16:before{transform:rotate(360deg)}.n-4 .t-16:after{transform:rotate(90deg)}.n-4 .t-17:before{transform:rotate(360deg)}.n-4 .t-17:after{transform:rotate(90deg)}.n-4 .t-18:before{transform:rotate(270deg)}.n-4 .t-18:after{transform:rotate(90deg)}.n-4 .t-19:before{transform:rotate(270deg)}.n-4 .t-19:after{transform:rotate(180deg)}.n-4 .t-20:before{transform:rotate(90deg)}.n-4 .t-20:after{transform:rotate(180deg)}.n-4 .t-21:after,.n-4 .t-21:before,.n-4 .t-22:after,.n-4 .t-22:before{transform:rotate(225deg)}.n-4 .t-23:before{transform:rotate(90deg)}.n-4 .t-23:after{transform:rotate(0)}.n-4 .t-24:before{transform:rotate(270deg)}.n-4 .t-24:after{transform:rotate(0)}.n-5 .t-01:before{transform:rotate(90deg)}.n-5 .t-01:after{transform:rotate(180deg)}.n-5 .t-02:before{transform:rotate(270deg)}.n-5 .t-02:after{transform:rotate(90deg)}.n-5 .t-03:before{transform:rotate(270deg)}.n-5 .t-03:after{transform:rotate(90deg)}.n-5 .t-04:before{transform:rotate(270deg)}.n-5 .t-04:after{transform:rotate(180deg)}.n-5 .t-05:before{transform:rotate(360deg)}.n-5 .t-05:after{transform:rotate(180deg)}.n-5 .t-06:before{transform:rotate(90deg)}.n-5 .t-06:after{transform:rotate(180deg)}.n-5 .t-07:before{transform:rotate(270deg)}.n-5 .t-07:after{transform:rotate(90deg)}.n-5 .t-08:before{transform:rotate(360deg)}.n-5 .t-08:after{transform:rotate(270deg)}.n-5 .t-09:before{transform:rotate(360deg)}.n-5 .t-09:after{transform:rotate(180deg)}.n-5 .t-10:before{transform:rotate(360deg)}.n-5 .t-10:after{transform:rotate(90deg)}.n-5 .t-11:before{transform:rotate(270deg)}.n-5 .t-11:after{transform:rotate(90deg)}.n-5 .t-12:before{transform:rotate(270deg)}.n-5 .t-12:after{transform:rotate(180deg)}.n-5 .t-13:before{transform:rotate(360deg)}.n-5 .t-13:after{transform:rotate(90deg)}.n-5 .t-14:before{transform:rotate(270deg)}.n-5 .t-14:after{transform:rotate(90deg)}.n-5 .t-15:before{transform:rotate(270deg)}.n-5 .t-15:after{transform:rotate(180deg)}.n-5 .t-16:before{transform:rotate(360deg)}.n-5 .t-16:after,.n-5 .t-17:before{transform:rotate(180deg)}.n-5 .t-17:after{transform:rotate(90deg)}.n-5 .t-18:before{transform:rotate(270deg)}.n-5 .t-18:after{transform:rotate(90deg)}.n-5 .t-19:before{transform:rotate(270deg)}.n-5 .t-19:after{transform:rotate(0)}.n-5 .t-20:before{transform:rotate(360deg)}.n-5 .t-20:after{transform:rotate(180deg)}.n-5 .t-21:before{transform:rotate(360deg)}.n-5 .t-21:after{transform:rotate(90deg)}.n-5 .t-22:before{transform:rotate(270deg)}.n-5 .t-22:after{transform:rotate(90deg)}.n-5 .t-23:before{transform:rotate(270deg)}.n-5 .t-23:after{transform:rotate(90deg)}.n-5 .t-24:before{transform:rotate(270deg)}.n-5 .t-24:after{transform:rotate(0)}.n-6 .t-01:before{transform:rotate(90deg)}.n-6 .t-01:after{transform:rotate(180deg)}.n-6 .t-02:before{transform:rotate(270deg)}.n-6 .t-02:after{transform:rotate(90deg)}.n-6 .t-03:before{transform:rotate(270deg)}.n-6 .t-03:after{transform:rotate(90deg)}.n-6 .t-04:before{transform:rotate(270deg)}.n-6 .t-04:after{transform:rotate(180deg)}.n-6 .t-05:before{transform:rotate(360deg)}.n-6 .t-05:after{transform:rotate(180deg)}.n-6 .t-06:before{transform:rotate(90deg)}.n-6 .t-06:after{transform:rotate(180deg)}.n-6 .t-07:before{transform:rotate(270deg)}.n-6 .t-07:after{transform:rotate(90deg)}.n-6 .t-08:before{transform:rotate(360deg)}.n-6 .t-08:after{transform:rotate(270deg)}.n-6 .t-09:before{transform:rotate(360deg)}.n-6 .t-09:after{transform:rotate(180deg)}.n-6 .t-10:before{transform:rotate(360deg)}.n-6 .t-10:after{transform:rotate(90deg)}.n-6 .t-11:before{transform:rotate(270deg)}.n-6 .t-11:after{transform:rotate(90deg)}.n-6 .t-12:before{transform:rotate(270deg)}.n-6 .t-12:after{transform:rotate(180deg)}.n-6 .t-13:before{transform:rotate(360deg)}.n-6 .t-13:after,.n-6 .t-14:before{transform:rotate(180deg)}.n-6 .t-14:after{transform:rotate(90deg)}.n-6 .t-15:before{transform:rotate(270deg)}.n-6 .t-15:after{transform:rotate(180deg)}.n-6 .t-16:before{transform:rotate(360deg)}.n-6 .t-16:after{transform:rotate(180deg)}.n-6 .t-17:before{transform:rotate(360deg)}.n-6 .t-17:after{transform:rotate(180deg)}.n-6 .t-18:before{transform:rotate(360deg)}.n-6 .t-18:after{transform:rotate(90deg)}.n-6 .t-19:before{transform:rotate(270deg)}.n-6 .t-19:after{transform:rotate(0)}.n-6 .t-20:before{transform:rotate(360deg)}.n-6 .t-20:after{transform:rotate(180deg)}.n-6 .t-21:before{transform:rotate(360deg)}.n-6 .t-21:after{transform:rotate(90deg)}.n-6 .t-22:before{transform:rotate(270deg)}.n-6 .t-22:after{transform:rotate(90deg)}.n-6 .t-23:before{transform:rotate(270deg)}.n-6 .t-23:after{transform:rotate(90deg)}.n-6 .t-24:before{transform:rotate(270deg)}.n-6 .t-24:after{transform:rotate(0)}.n-7 .t-01:before{transform:rotate(180deg)}.n-7 .t-01:after{transform:rotate(90deg)}.n-7 .t-02:before{transform:rotate(270deg)}.n-7 .t-02:after{transform:rotate(90deg)}.n-7 .t-03:before{transform:rotate(270deg)}.n-7 .t-03:after{transform:rotate(90deg)}.n-7 .t-04:before{transform:rotate(270deg)}.n-7 .t-04:after{transform:rotate(180deg)}.n-7 .t-05:before{transform:rotate(360deg)}.n-7 .t-05:after{transform:rotate(90deg)}.n-7 .t-06:before{transform:rotate(270deg)}.n-7 .t-06:after{transform:rotate(90deg)}.n-7 .t-07:before{transform:rotate(270deg)}.n-7 .t-07:after{transform:rotate(180deg)}.n-7 .t-08:before{transform:rotate(360deg)}.n-7 .t-08:after{transform:rotate(180deg)}.n-7 .t-09:after,.n-7 .t-09:before,.n-7 .t-10:after,.n-7 .t-10:before{transform:rotate(225deg)}.n-7 .t-11:before{transform:rotate(360deg)}.n-7 .t-11:after{transform:rotate(180deg)}.n-7 .t-12:before{transform:rotate(360deg)}.n-7 .t-12:after{transform:rotate(180deg)}.n-7 .t-13:after,.n-7 .t-13:before,.n-7 .t-14:after,.n-7 .t-14:before{transform:rotate(225deg)}.n-7 .t-15:before{transform:rotate(360deg)}.n-7 .t-15:after{transform:rotate(180deg)}.n-7 .t-16:before{transform:rotate(360deg)}.n-7 .t-16:after{transform:rotate(180deg)}.n-7 .t-17:after,.n-7 .t-17:before,.n-7 .t-18:after,.n-7 .t-18:before{transform:rotate(225deg)}.n-7 .t-19:before{transform:rotate(360deg)}.n-7 .t-19:after{transform:rotate(180deg)}.n-7 .t-20:before{transform:rotate(360deg)}.n-7 .t-20:after{transform:rotate(180deg)}.n-7 .t-21:after,.n-7 .t-21:before,.n-7 .t-22:after,.n-7 .t-22:before{transform:rotate(225deg)}.n-7 .t-23:before{transform:rotate(90deg)}.n-7 .t-23:after{transform:rotate(0)}.n-7 .t-24:before{transform:rotate(270deg)}.n-7 .t-24:after{transform:rotate(0)}.n-8 .t-01:before{transform:rotate(90deg)}.n-8 .t-01:after{transform:rotate(180deg)}.n-8 .t-02:before{transform:rotate(270deg)}.n-8 .t-02:after{transform:rotate(90deg)}.n-8 .t-03:before{transform:rotate(270deg)}.n-8 .t-03:after{transform:rotate(90deg)}.n-8 .t-04:before{transform:rotate(270deg)}.n-8 .t-04:after{transform:rotate(180deg)}.n-8 .t-05:before{transform:rotate(360deg)}.n-8 .t-05:after{transform:rotate(180deg)}.n-8 .t-06:before{transform:rotate(90deg)}.n-8 .t-06:after{transform:rotate(180deg)}.n-8 .t-07:before{transform:rotate(270deg)}.n-8 .t-07:after{transform:rotate(180deg)}.n-8 .t-08:before{transform:rotate(360deg)}.n-8 .t-08:after{transform:rotate(180deg)}.n-8 .t-09:before{transform:rotate(360deg)}.n-8 .t-09:after{transform:rotate(180deg)}.n-8 .t-10:before{transform:rotate(360deg)}.n-8 .t-10:after{transform:rotate(90deg)}.n-8 .t-11:before{transform:rotate(270deg)}.n-8 .t-11:after{transform:rotate(0)}.n-8 .t-12:before{transform:rotate(360deg)}.n-8 .t-12:after{transform:rotate(180deg)}.n-8 .t-13:before{transform:rotate(360deg)}.n-8 .t-13:after,.n-8 .t-14:before{transform:rotate(180deg)}.n-8 .t-14:after{transform:rotate(90deg)}.n-8 .t-15:before{transform:rotate(270deg)}.n-8 .t-15:after{transform:rotate(180deg)}.n-8 .t-16:before{transform:rotate(360deg)}.n-8 .t-16:after{transform:rotate(180deg)}.n-8 .t-17:before{transform:rotate(360deg)}.n-8 .t-17:after{transform:rotate(180deg)}.n-8 .t-18:before{transform:rotate(360deg)}.n-8 .t-18:after{transform:rotate(90deg)}.n-8 .t-19:before{transform:rotate(270deg)}.n-8 .t-19:after{transform:rotate(0)}.n-8 .t-20:before{transform:rotate(360deg)}.n-8 .t-20:after{transform:rotate(180deg)}.n-8 .t-21:before{transform:rotate(360deg)}.n-8 .t-21:after{transform:rotate(90deg)}.n-8 .t-22:before{transform:rotate(270deg)}.n-8 .t-22:after{transform:rotate(90deg)}.n-8 .t-23:before{transform:rotate(270deg)}.n-8 .t-23:after{transform:rotate(90deg)}.n-8 .t-24:before{transform:rotate(270deg)}.n-8 .t-24:after{transform:rotate(0)}.n-9 .t-01:before{transform:rotate(90deg)}.n-9 .t-01:after{transform:rotate(180deg)}.n-9 .t-02:before{transform:rotate(270deg)}.n-9 .t-02:after{transform:rotate(90deg)}.n-9 .t-03:before{transform:rotate(270deg)}.n-9 .t-03:after{transform:rotate(90deg)}.n-9 .t-04:before{transform:rotate(270deg)}.n-9 .t-04:after{transform:rotate(180deg)}.n-9 .t-05:before{transform:rotate(360deg)}.n-9 .t-05:after{transform:rotate(180deg)}.n-9 .t-06:before{transform:rotate(90deg)}.n-9 .t-06:after{transform:rotate(180deg)}.n-9 .t-07:before{transform:rotate(270deg)}.n-9 .t-07:after{transform:rotate(180deg)}.n-9 .t-08:before{transform:rotate(360deg)}.n-9 .t-08:after{transform:rotate(180deg)}.n-9 .t-09:before{transform:rotate(360deg)}.n-9 .t-09:after{transform:rotate(180deg)}.n-9 .t-10:before{transform:rotate(360deg)}.n-9 .t-10:after{transform:rotate(90deg)}.n-9 .t-11:before{transform:rotate(270deg)}.n-9 .t-11:after{transform:rotate(0)}.n-9 .t-12:before{transform:rotate(360deg)}.n-9 .t-12:after{transform:rotate(180deg)}.n-9 .t-13:before{transform:rotate(360deg)}.n-9 .t-13:after{transform:rotate(90deg)}.n-9 .t-14:before{transform:rotate(270deg)}.n-9 .t-14:after{transform:rotate(90deg)}.n-9 .t-15:before{transform:rotate(270deg)}.n-9 .t-15:after{transform:rotate(180deg)}.n-9 .t-16:before{transform:rotate(360deg)}.n-9 .t-16:after{transform:rotate(180deg)}.n-9 .t-17:before{transform:rotate(90deg)}.n-9 .t-17:after{transform:rotate(180deg)}.n-9 .t-18:before{transform:rotate(270deg)}.n-9 .t-18:after{transform:rotate(90deg)}.n-9 .t-19:before{transform:rotate(270deg)}.n-9 .t-19:after{transform:rotate(0)}.n-9 .t-20:before{transform:rotate(360deg)}.n-9 .t-20:after{transform:rotate(180deg)}.n-9 .t-21:before{transform:rotate(360deg)}.n-9 .t-21:after{transform:rotate(90deg)}.n-9 .t-22:before{transform:rotate(270deg)}.n-9 .t-22:after{transform:rotate(90deg)}.n-9 .t-23:before{transform:rotate(270deg)}.n-9 .t-23:after{transform:rotate(90deg)}.n-9 .t-24:before{transform:rotate(270deg)}.n-9 .t-24:after{transform:rotate(0)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">

  <div class="seconds">
    <div class="s-1">
      <div class="n-0">
        <time class="t-01"></time>
        <time class="t-02"></time>
        <time class="t-03"></time>
        <time class="t-04"></time>
        <time class="t-05"></time>
        <time class="t-06"></time>
        <time class="t-07"></time>
        <time class="t-08"></time>
        <time class="t-09"></time>
        <time class="t-10"></time>
        <time class="t-11"></time>
        <time class="t-12"></time>
        <time class="t-13"></time>
        <time class="t-14"></time>
        <time class="t-15"></time>
        <time class="t-16"></time>
        <time class="t-17"></time>
        <time class="t-18"></time>
        <time class="t-19"></time>
        <time class="t-20"></time>
        <time class="t-21"></time>
        <time class="t-22"></time>
        <time class="t-23"></time>
        <time class="t-24"></time>
      </div>
    </div>
  </div>

  <div class="s-2">
    <div class="n-1">
      <time class="t-01"></time>
      <time class="t-02"></time>
      <time class="t-03"></time>
      <time class="t-04"></time>
      <time class="t-05"></time>
      <time class="t-06"></time>
      <time class="t-07"></time>
      <time class="t-08"></time>
      <time class="t-09"></time>
      <time class="t-10"></time>
      <time class="t-11"></time>
      <time class="t-12"></time>
      <time class="t-13"></time>
      <time class="t-14"></time>
      <time class="t-15"></time>
      <time class="t-16"></time>
      <time class="t-17"></time>
      <time class="t-18"></time>
      <time class="t-19"></time>
      <time class="t-20"></time>
      <time class="t-21"></time>
      <time class="t-22"></time>
      <time class="t-23"></time>
      <time class="t-24"></time>
    </div>
  </div>
</div>

</div>

4 回复 | 直到 7 年前

Abin Thaha 7 年前

https://jsfiddle.net/abinthaha/62wuzvx3/28/

getValue();
var interval = setInterval(function() {
    getValue();
}, 1000);

function getValue() {
    var date = new Date();
    val = date.getSeconds();
    val = parseInt(val) + 1;
    val = getSec(val);
    setValue(val);
}

function setValue(val) {
        $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
        $('.s-1 > DIV').addClass('n-' + parseInt(val / 10));
        $('.s-2 > DIV').addClass('n-' + parseInt(val % 10));
}

function getSec(num) {
    if (num < 10 || num == 0) {
        num = '0' + num;
    } else if (num >= 60) {
        num = num % 60;
    }
    return num;
}

Jacob Mellin 7 年前

setTimeout 是非阻塞的。它只指定一个回调函数在指定的时间后被调用,但是在它之后的任何代码都将被立即执行,而不管指定的延迟是什么。

设置超时 (不是它的回调)不会阻止循环的执行,所有 设置超时 语句紧跟在一起执行,因此延迟不会错开。

sec 循环回调的参数 设置超时 :

$.each(seconds, function(sec, num) {

  setTimeout(function() {

    $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
    $('.s-1 > DIV').addClass('n-' + num[0]);
    $('.s-2 > DIV').addClass('n-' + num[1]);

  }, (sec+1)*1000);

});

J中间:[ https://jsfiddle.net/j76bwrpv/2/ 1

Thiago Guelfi 7 年前

尝试将setTimeOut放在循环末尾:

$.each(seconds, function(sec, num) {

    $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
    $('.s-1 > DIV').addClass('n-' + num[0]);
    $('.s-2 > DIV').addClass('n-' + num[1]);

   setTimeout(function() {}, 1000);

});

chintuyadavsara 7 年前

这可能会帮助你,非常简单的柜台,这里是工作 demo

// remove class regex
$.fn.removeClassRegEx = function(regex) {
    var classes = $(this).attr('class');
    if (!classes || !regex) return false;
    var classArray = [];
    classes = classes.split(' ');
    for (var i = 0, len = classes.length; i < len; i++)
        if (!classes[i].match(regex)) classArray.push(classes[i]);
    $(this).attr('class', classArray.join(' '));
};

var seconds = [
    ['0', '1'],
    ['0', '2'],
    ['0', '3'],
    ['0', '4'],
    ['0', '5'],
    ['0', '6'],
    ['0', '7'],
    ['0', '8'],
    ['0', '9'],
    ['1', '0'],
];

var i = 0;                     

function myLoop () {           
   setTimeout(function () {    

      i++;               
       console.log(i);//  increment the counter
     $('.s-2 > DIV').removeClassRegEx('n-');

    $('.s-2 > DIV').addClass('n-' + i);
      if (i < 10) {   

         myLoop();            
      }

   }, 1000)
}

myLoop();