Плавно смена показаний.
setInterval(function() {
document.getElementById('number').innerHTML = numY;
}, 200);
Каждые 200мс отправляются данные numY на html страницу в id = number. Данные numY могут сразу изменится например с 1000 до 2000. Подскажите пожалуйста как плавно показывать это возрастание или убывание, с шагом в 10, скорость в 200мс. |
|
анимация числа js
dima85,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
color: #FFFFFF;
font-size: 24px;
line-height: 100px;
text-align: center;
}
.Red{
background-color: Red;
}
</style>
</head>
<body>
<div class="hot Red" id="number"></div>
<script>
var d = performance.now(),
from = numY = 0,
elem = document.querySelector('#number');
requestAnimationFrame(function e(a) {
a = (a - d) / 200;
1 < a && (a = 1);
elem.innerHTML = from + (numY - from) * a | 0;
1 == a && (d = performance.now(), from = numY);
requestAnimationFrame(e)
})
setInterval(function() {
numY = (100 + Math.random()*3000|0);
}, 1000);
</script>
</body>
</html>
|
var timePassed = 1000;
setInterval(function() {
//document.getElementById('number').innerHTML = numY;
testnym(numY);
}, 200);
function testnym(name) {
var timer = setInterval(function() {
if (timePassed <= name) {
timePassed = timePassed + 50;
}
if (timePassed >= name) {
timePassed = timePassed - 50;
}
document.getElementById('number').innerHTML = timePassed + '-'+name;
clearInterval(timer);
}, 200);
}
Спасибо Рони за ссылки. Вот что у меня получилось. Теперь данные плавно шагают с 1000 до numY. Например дошли до 1300 и numY поменялось на 1100, должен идти плавный отсчет обратно до 1100. Даже если testnym нужно было идти дальше, счетчик должен остановится и идти в обратном направление. Как вам мой код? Может это все можно было сделать в первом setInterval? что бы не плодить их? На телефоне почему-то не работает и в Chrome и в Firefox ТЕМА ЗАКРЫТА, ВСЕ СДЕЛАЛ,. |
| Часовой пояс GMT +3, время: 14:51. |