2013-03-22 7 views
0

я использовал код, подобный пост в Random Number Effect In Jquery .. и результат http://jsfiddle.net/ZDsMa/94/ ...Animated случайное число не работает

Теперь я пишу полный код HTML и JQuery в одном файле PHP (index.php) и разместить на мой сервер ...

<html> 
<title>Randomize Number</title> 
<head> 
<style type="text/css"> 
#output { 
    margin: 20px; 
    padding: 20px; 
    background: gray; 
    border-radius: 10px; 
    font-size: 80px; 
    width: 160px; 
    color: red; 
} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
var output, started, duration, desired; 
// Constants 
duration = 5000; 
desired = '50'; 

// Initial setup 
output = $('#output'); 
started = new Date().getTime(); 

// Animate! 
animationTimer = setInterval(function() { 
    // If the value is what we want, stop animating 
    // or if the duration has been exceeded, stop animating 
    if (output.text().trim() === desired || new Date().getTime() - started > duration) { 
     console.log('animating'); 
     // Generate a random string to use for the next animation step 
     output.text('' + Math.floor(Math.random() * 990) 

     ); 

    } else { 
     console.log('animating'); 
     // Generate a random string to use for the next animation step 
     output.text('' + Math.floor(Math.random() * 990) 

     ); 
    } 
}, 1000); 

</script> 
</head> 
<body> 
<div id="output">-</div>      
</body> 
</html> 

анимированный случайное число не отображается (JScript не работает, только коробка с '-' characher/CSS)

Что случилось с моим кодом?

ответ

0

Вам нужно обернуть код, который взаимодействует с DOM в $(document).ready() обратного вызова:

$(document).ready(function() { 
    ... 
}) 
+0

я не понимаю, Blender, где я должен поместить код "$ (документ) .ready()" выше .. ?? – andry

+0

@andry: http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function – Blender

1

Вам просто нужно, чтобы убедиться, что ваш код запускается на выполнение после страницы отображаются. Попробуйте окружив его с:

... 
<script> 
$(function() { 
    var output, started, duration, desired; 
    // Constants 
    duration = 5000; 

    ... 

    }, 1000); 
}); 
</script> 
... 

Вы можете найти более подробную информацию здесь jQuery.ready().

+0

thanx @ grenny..после работы хорошо .. – andry

0

использование привет этот код Javascript он работает

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
var output, started, duration, desired; 
// Constants 
duration = 5000; 
desired = '50'; 

// Initial setup 
output = $('#output'); 
started = new Date().getTime(); 

// Animate! 
animationTimer = setInterval(function() { 
    // If the value is what we want, stop animating 
    // or if the duration has been exceeded, stop animating 
    if (output.text().trim() === desired || new Date().getTime() - started > duration) { 
     console.log('animating'); 
     // Generate a random string to use for the next animation step 
     output.text('' + Math.floor(Math.random() * 990) 

     ); 

    } else { 
     console.log('animating'); 
     // Generate a random string to use for the next animation step 
     output.text('' + Math.floor(Math.random() * 990) 

     ); 
    } 
}, 1000); 
}) 
Смежные вопросы