Question

我必须使用像http://flipclockjs.com/faces/counter这样的反制效果对于我的404页面，其中每个数字应该多次翻转然后停止到404编号

提前谢谢

＆＃13;

<script type="text/javascript">
    var clock; 
	$(document).ready(function() { 
		// Instantiate a counter
		clock = new FlipClock($('.clock'), 900, {
			clockFace: 'Counter',
			//autoStart: true,
			countdown: false,
		});
		clock.setCountdown(true);
		clock.stop(function () {
			// this (optional) callback will fire after the clock stops
			clock.setTime(404);
		});
	});
</script>

＆＃13;

<link rel="stylesheet" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>

＆＃13;

Answer 1

看看这个：D

 $(document).ready(function() {
  // Instantiate a counter
  var clock = $('.clock').FlipClock(390, {
    clockFace: 'Counter'
  });
 var incrementer = 0;
  setTimeout(function() {
    setInterval(function() {
      incrementer++;
      clock.time.time =Math.floor( Math.random() * (404 - 100)) + 100;
      if (incrementer == 20){
        clock.time.time = 403
      }
       if (incrementer <= 20){
       clock.increment();
       }
      
        
    }, 600);
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Counter</h1>
  <div class="clock"></div>
</body>

</html>

使用FlipClock js对404页面的计数器效果

1 个答案: