Каждую секунду прибавлять число без перезагрузки страницы

Question

Есть число, которое записано в переменную php. Например,

$y = 0.026;

Также есть

$x = 124.345.

Необходимо взять $x и ровно раз в секунду прибавлять к нему $y, так, чтобы пользователь наблюдал, как непрерывно увеличивается сумма без перезагрузки страницы.

Мне это необходимо чисто ради визуального эффекта.

Answer 1

Не шарю в пхп, но на клиенте можно поступить вот таким образом. А тут уже пляши от ситуации. Я тз полного не вижу, но именно визуально - вот код ниже.

const d = document.getElementById('c');
let counter = 0;

setInterval(() => {
  counter += 1;
  d.textContent = counter;
}, 1000);

<div id="c">0</div>

Answer 2

<?php
$y = 0.026;
$x = 124.345;
?>
<div id="elem"></div>
<script language="JavaScript">
    window.onload = function () {
        let param1 = '<?php echo $y; ?>';
        let param2 = '<?php echo $x; ?>';
        let div = document.getElementById('elem');
        div.value = param2;

        function time() {
            let val = +div.value;
            console.log(val);
            let result = Math.ceil((+val + +param1)*1000)/1000;
            div.value = result;
            div.innerText = result;
        }
        setInterval(time,1000);
    }
</script>

Answer 3

let x, y;
let interval = null;

function addYtoResult(){
  x += y;
  document.getElementById('result').textContent = x.toFixed(6);
}

document.getElementById('start').addEventListener('click', e => {
  x = document.getElementById('x').value*1;
  y = document.getElementById('y').value*1;
  interval = setInterval(addYtoResult, 1000);
  e.target.disabled = true;
});

document.getElementById('stop').addEventListener('click', () => {
  clearInterval(interval);
  document.getElementById('start').disabled = false;
});

X: <input type="number" id="x">
Y: <input type="number" id="y">
<hr>
<div id="result" style="padding: 10px; border: 2px solid gray; margin: 10px"></div>

<input type="button" value="Начать это безумие" id="start">
<input type="button" value="Остановить!!!!" id="stop">

Answer 4

let x = document.getElementById('x'),
  y = document.getElementById('y');

setInterval(() => {
  y.textContent = Number(y.textContent) + Number(x.textContent);
}, 1000)

y:
<p id='y'>0.026</p>
x:
<p id="x">124.345</p>

Answer 5

Всем спасибо! Вот что получилось в итоге:

<?php
$x =  0.0004;
$x2 = number_format($x, 6, '.','');
$y = 0.0000075;
?>

<p id="c"><?=$x2?></p>

<script language="JavaScript">

    const d = document.getElementById('c');

    let x = "<?=$x?>";
    x = Number(x);

    let y = "<?=$y?>";
    y = Number(y);

    setInterval(() => {
        x += y;
    d.textContent = x.toFixed(6);
    }, 1000);

</script>

А еще свой вариант сделал после просмотра уроков по js:

<script language="JavaScript">

    let x = "<?=$x?>";
    x = Number(x);

    let y = "<?=$y?>";
    y = Number(y);

    setInterval("accruals()", 1000);

    function accruals() {
        x += y;
        document.getElementById('c').innerHTML = x.toFixed(6);
    }

</script>

а ещё можно это сделать с помощью рекурсии с задержкой в 1 секунду :)

setTimeout();

БЛОГ НА HUSL

Каждую секунду прибавлять число без перезагрузки страницы

Ответы (5 шт):