Нажатие кнопки = генерация числа, отпускание кнопки = остановка генерации числа.
Помогите пож. освоил немного php, но мне больше понравился javascript
PHP пока в сторону. Мне необходимо сделать так чтобы: При нажатии на кнопку начинало генерироваться число от 0 до 1000 Число должно крутиться в цикле от 0 до 1000 пока пользователь не отпустит кнопку. Результат с генерированного числа на момент отпускания кнопки должен выводиться на экран. Желательно чтоб цикл генерации числа был виден пользователям в процессе. Могу реализовать просто генерацию числа на php но мне это не подходит. |
анимация числа на js
serebann,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.time{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
padding: 4px 8px;
font-size: 24px;
border-radius: 4px;
}
</style>
</head>
<body>
<input id="go" name="" type="button" value="go" >
<span class="time">0</span>
<script>
function timer(b) {
var c = true;
return {
stop: function() {
c = false
},
play: function() {
var d = performance.now();
c = true;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 < a && (a = 1);
b.elem.innerHTML = b.from + (b.to - b.from) * a | 0;
c && 1 == a && (d = performance.now());
c && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 0,
to : 1000,
duration: 5 * 1000,
elem : span
});
but.addEventListener('mousedown', anim.play);
but.addEventListener('mouseup', anim.stop);
</script>
</body>
</html>
|
Ну а можно просто с генерировать случайное число в интервале от 0 до 1000
И на этом всё, сипасибо. |
serebann,
setTimeout,Math.random, clearTimeout |
По подробнее пожалуйста.
|
анимация случайного числа в диапазоне от и до на js
serebann,
:)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.time{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
padding: 4px 8px;
font-size: 24px;
border-radius: 4px;
text-align: center;
width: 60px;
}
</style>
</head>
<body>
<input id="go" name="" type="button" value="go" >
<div class="time">0</div>
<script>
function timer(b) {
var c = true;
return {
stop: function() {
c = false
},
play: function() {
var d = performance.now();
c = !0;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 < a && (a = 1);
c && 1 == a && (d = performance.now(),b.elem.innerHTML = b.from + (b.to - b.from + 1) * Math.random() | 0);
c && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 0,
to : 1000,
duration: 40,
elem : span
});
but.addEventListener('mousedown', anim.play);
but.addEventListener('mouseup', anim.stop);
</script>
</body>
</html>
|
Большое спасибо.
|
Поставил перед собой другую задачу.
Я хочу чтоб через каждые 10 секунд генерировалось случайное число в диапозоне от 0 до 10000 Результат с генерированного числа записывался в переменную sum , а после чтоб автоматически запускалась анимация. Генерация числа должна происходить в фоновом режиме. Начинаю по не многу вникать в javascript, но я только второй день изучаю его. Вот материал с которым я работаю:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#path {
outline: 1px solid #E8C48E;
width: 810px;
height: 20px;
}
</style>
<script src="https://js.cx/libs/animate.js"></script>
</head>
<body>
<div id="path">
<div id="brick"></div>
</div>
<script>
var sum = 400;
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
var bounceEaseOut = makeEaseOut(bounce);
brick.onclick = function() {
animate({
duration: 5000,
timing: bounceEaseOut,
draw: function(progress) {
brick.style.left = progress * sum + 'px';
}
});
};
</script>
</body>
</html>
|
serebann,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Сделал так что теперь анимация срабатывает при загрузке страницы, но не могу с генерировать число и поставить 10 секундный интервал запуска генерации числа.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#path {
outline: 1px solid #E8C48E;
width: 810px;
height: 20px;
}
</style>
<script src="https://js.cx/libs/animate.js"></script>
</head>
<body>
<div id="path">
<div id="brick"></div>
</div>
<script>
var sum = 500;
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
var bounceEaseOut = makeEaseOut(bounce);
if (sum > 0) {
animate({
duration: 5000,
timing: bounceEaseOut,
draw: function(progress) {
brick.style.left = progress * sum + 'px';
}
});
};
</script>
</body>
</html>
|
C генерацией числа тоже разобрался, осталось сделать десяти секундный интервал запуска генерации числа.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#path {
outline: 1px solid #E8C48E;
width: 810px;
height: 20px;
}
</style>
<script src="https://js.cx/libs/animate.js"></script>
</head>
<body>
<div id="path">
<div id="brick"></div>
</div>
<script>
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
var sum = ( randomInteger(1, 800) );
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
var bounceEaseOut = makeEaseOut(bounce);
if (sum > 0) {
animate({
duration: 5000,
timing: bounceEaseOut,
draw: function(progress) {
brick.style.left = progress * sum + 'px';
}
});
};
</script>
</body>
</html>
|
serebann,
медитируйте ... вместо 10000 сделано 810
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#path {
outline: 1px solid #E8C48E;
width: 810px;
height: 20px;
}
</style>
<script>
function animate(options) {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction от 0 до 1
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;
// текущее состояние анимации
var progress = options.timing(timeFraction)
options.draw(progress);
requestAnimationFrame(animate);
if(timeFraction == 1) {
start = performance.now();
options.callback();
}
});
}
</script>
</head>
<body>
<div id="path">
<div id="brick"></div>
</div>
<script>
var sum = 400;
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
var bounceEaseOut = makeEaseOut(bounce);
(function() {
animate({
duration: 5000,
timing: bounceEaseOut,
draw: function(progress) {
brick.style.left = progress * sum + 'px';
},
callback : function() {
sum =(810+1) * Math.random() | 0;
}
});
}());
</script>
</body>
</html>
|
Экрана просто не хватает на 10000, поэтому сделал 800 для форума.
Но буду генерировать 10000 и делить на 10 для анимации. Спасибо ещё раз.:dance: |
Я всё же не понимаю где изменить код, чтоб после остановки анимации отсчитывалось 10 секунд и начиналось всё заново, сейчас после остановки анимации сразу начинается всё с начало а мне нужно 10 секунд на размышление)
Поискал в коде но не нашёл Просто вы изменили мой примитивный код, и поэтому мне понятный на правильный, свой. |
serebann,
может так вам проще будет
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#path {
outline: 1px solid #E8C48E;
width: 810px;
height: 20px;
}
</style>
<script>
function animate(options) {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction от 0 до 1
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;
// текущее состояние анимации
var progress = options.timing(timeFraction)
options.draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
if (timeFraction == 1) {
options.callback && options.callback();
}
});
}
</script>
</head>
<body>
<div id="path">
<div id="brick"></div>
</div>
<script>
var sum = 400;
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
var bounceEaseOut = makeEaseOut(bounce);
(function go() {
animate({
duration: 5000,
timing: bounceEaseOut,
draw: function(progress) {
brick.style.left = progress * sum + 'px';
},
callback : function() {
sum =(810+1) * Math.random() | 0;
window.setTimeout(go,10000)
}
});
}());
</script>
</body>
</html>
|
Да так гораздо проще, я тоже пробовал использовать setTimeout но как то коряво получалось, т.е. никак.
Отлично, буду двигаться дальше.:) |
А где собственно функция генерации числа, я хочу её вывести на экран после каждой остановки анимации.
Похоже вы её иначе как то с генерировали нежели так: function randomInteger(min, max) { var rand = min + Math.random() * (max + 1 - min); rand = Math.floor(rand); return rand; } var sum = ( randomInteger(0, 800) ); https://learn.javascript.ru/task/random-int-min-max |
serebann,
:blink: строка 71 |
Не догадался переменную sum поискать))
|
| Часовой пояс GMT +3, время: 17:24. |