2016-05-05 2 views
0

я должен использовать обратный эффект, как http://flipclockjs.com/faces/counter для моей 404 страницы, где каждый номер должен получить переворачивать несколько раз, а затем остановиться на 404 числаВстречное эффект на 404 страницы с помощью FlipClock JS

Спасибо заранее

<script type="text/javascript"> 
 
    var clock; 
 
\t $(document).ready(function() { 
 
\t \t // Instantiate a counter 
 
\t \t clock = new FlipClock($('.clock'), 900, { 
 
\t \t \t clockFace: 'Counter', 
 
\t \t \t //autoStart: true, 
 
\t \t \t countdown: false, 
 
\t \t }); 
 
\t \t clock.setCountdown(true); 
 
\t \t clock.stop(function() { 
 
\t \t \t // this (optional) callback will fire after the clock stops 
 
\t \t \t clock.setTime(404); 
 
\t \t }); 
 
\t }); 
 
</script>
<link rel="stylesheet" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
<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> \t \t

+0

Что вы имеете в виду флип несколько раз? какие цифры следует перевернуть? –

+0

@Stacklearner: Мне нужно перевернуть номер с 999 по 404 – WebStarter

ответ

0

Проверьте это: 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>

+0

Но все номера должны получить флип и остановиться до 404 – WebStarter

+0

обновленный скрипт, вы можете нажать на код запуска и проверить – LazyDeveloper

+0

Спасибо за ваш повтор, номер перевернулся, но когда номер 404 кажется, что он появляется с низкой скоростью – WebStarter