Как использовать цикл while для анимации и отображения итогов - PullRequest
Новая
       0

Как использовать цикл while для анимации и отображения итогов

0 голосов
/ 27 сентября 2018

Я пытаюсь оживить общую сумму от ввода от пользователя.После того, как пользователь введет некоторые числа, общее число оживляется от 0 до общего количества.Я немного запутался после прочтения различных книг и подумал, что StackOverflow - лучший способ попрактиковаться в моем javaScript.Пожалуйста, скажите мне, где я ошибаюсь в своем коде.

Код выглядит следующим образом: 

<body>
<div>
    <label for="price">Price:</label>
    <input type="text" id="price" name="price">
    <br>
    <label for="Quantity">Quantity:</label>
    <input type="text" id="quantity" name="quantity">
    <br>
    <label for="Amount">Amount:</label>
    <input type="text" id="amount" name="amount">
</div>
<script>
var price = document.getElementById("price").value;
var quantity = document.getElementById("quantity").value;
var amount = price * quantity;
var length;

function updateAmount(){
  while(amount = 0; amount <= amount.length; amount++){
    document.getElementById("amount").value;
}

setInterval(updateAmount, 10);

Я немного запутался, как вы можете видеть из моего кода.Если бы вы могли направить меня в правильном направлении, я был бы признателен.

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018 
function updateAmount(){
  while(amount = 0; amount <= amount.length; amount++){
    document.getElementById("amount").value;
}

Вы забыли присвоить значение элемента суммы 

document.getElementById("amount").value = amount;

И если вы хотите увидеть изменение суммы на самом деле, вам нужно будет установить установленный интервал при обновлении входного значения,как то так: 

function updateAmount(){
      while(amount = 0; amount <= amount.length; amount++){
        setInterval(function(){
           document.getElementById("amount").value = amount;
        }, 300)

    }
0 голосов
/ 27 сентября 2018

Я бы посоветовал изучить requestAnimationFrame и уравнения ослабления .Они очень помогут при работе с анимацией.

Я создал пример JSFiddle , чтобы показать вам requestAnimationFrame и упрощающие уравнения в игре.

HTML 

<div>
    <label for="price">Price:</label>
    <input type="number" id="price" name="price">
    <label for="Quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity">
    <label for="Amount">Amount:</label>
    <div id="amount"></div>
</div>

JS 

var priceInput = document.querySelector("#price");
var quantityInput = document.querySelector("#quantity");
var amountDiv = document.querySelector("#amount");

priceInput.addEventListener('keyup', update);
quantityInput.addEventListener('keyup', update);


var aid = null; // request animation id
var startTime = 0;
var duration = 1000; // in milliseconds
var amount = 0;
var begin = 0;
var change = 0;

function update() {
    if (aid !== null) {
        cancelAnimationFrame(aid);
    }

    var price = parseFloat(priceInput.value || 0);
    var quantity = parseInt(quantityInput.value || 0);
    startTime = performance.now();
    begin = amount;
    change = (price * quantity) - begin;
    aid = requestAnimationFrame(step);
}

function step(ts) {
    aid = requestAnimationFrame(step);
    var elapsed = ts - startTime;
    if (elapsed < duration) {
        amount = easeOutQuad(elapsed, begin, change, duration);
        amountDiv.innerHTML = amount.toFixed(2);
    }
    else {
        cancelAnimationFrame(aid);
        amountDiv.innerHTML = (begin + change).toFixed(2);
    }
}

// t = time
// b = begin
// c = change
// d = duration
function easeOutQuad(t, b, c, d) {
    return -c * (t /= d) * (t - 2) + b;
}
0 голосов
/ 27 сентября 2018

Вы используете как цикл while (который будет работать синхронно до завершения без задержки), так и setInterval.Вы захотите покончить с частью цикла while. 

var displayedAmount = 0;
var updateInterval = setInterval(updateAmount, 10)

function updateAmount() {
  if (displayedAmount >= amount) {
     clearInterval(updateInterval);
     return;
  }

  displayedAmount++;
  document.getElementById("amount").value = displayedAmount;
}

Лучший подход, который будет работать лучше, - это использовать кадры анимации.Определите скорость изменения, которую вы хотите, например: 

const changePerMillisecond = 0.001; // 1 dollar? per second

... или: 

const changePerMillisecond = total / 5000; // Animation always takes 5 seconds

... и затем вы можете использовать этот цикл анимации:

const startTime = Date.now();
let displayedAmount = 0;
function animateValue() {
  const timeTranspired = Date.now() - startTime;
  displayedAmount = Math.min(value, timeTranspired * changePerMillisecond);
  document.getElementById("amount").value = displayedAmount.toFixed(2);

  if (displayedAmount < amount) 
    requestAnimationFrame(animateValue);
}

requestAnimationFrame(animateValue);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...