Форум

serebann · #1 (**permalink**) 22.12.2015, 10:28

Помогите пож. освоил немного php, но мне больше понравился javascript
PHP пока в сторону.
Мне необходимо сделать так чтобы:

При нажатии на кнопку начинало генерироваться число от 0 до 1000
Число должно крутиться в цикле от 0 до 1000 пока пользователь не отпустит кнопку.

Результат с генерированного числа на момент отпускания кнопки должен выводиться на экран.
Желательно чтоб цикл генерации числа был виден пользователям в процессе.

Могу реализовать просто генерацию числа на php но мне это не подходит.

рони · #2 (**permalink**) 22.12.2015, 12:36

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>

serebann · #3 (**permalink**) 22.12.2015, 14:52

Ну а можно просто с генерировать случайное число в интервале от 0 до 1000

И на этом всё, сипасибо.

рони · #4 (**permalink**) 22.12.2015, 15:09

serebann,
setTimeout,Math.random, clearTimeout

serebann · #5 (**permalink**) 22.12.2015, 15:26

По подробнее пожалуйста.

рони · #6 (**permalink**) 22.12.2015, 17:58

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>

serebann · #7 (**permalink**) 22.12.2015, 19:32

Большое спасибо.

serebann · #8 (**permalink**) 24.12.2015, 18:19

Поставил перед собой другую задачу.
Я хочу чтоб через каждые 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>

рони · #9 (**permalink**) 24.12.2015, 18:22

serebann,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

serebann · #10 (**permalink**) 24.12.2015, 18:30

Сообщение от рони

serebann,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Готово, отформатировал, не знал раньше как это делается.

Форум

Справочник

Discord чат

Курсы javascript