Таймер обратного отсчета, дата с БД?

Question

[pw0ned]

Всем привет.
Как реализовать таймер обратного отсчета, например минуты и секунды, но при этом чтобы их можно было указать в админке в определенном поле ?

Comments

[ProjectSoft]

т. е. вы не можете передать на веб страницу запись из DB, как переменную для запуска таймера?
Честно говоря я вам рассказал логику.

[pw0ned]

ProjectSoft, это я понимаю как сделать, но в JS как реализовать чтобы эта переменная с php читалась?

[pw0ned]

ProjectSoft, видимо я что-то не понимаю :D

[ProjectSoft]

pw0ned,

var stsrtTime = /* здесь что-то из DB в формате int */ж
/*
Далее запуск счётчика 
*/

Если вызов счётчика в отдельном файле, то позаботится о присутствии глобальной переменной для JS.

[rPman]

pw0ned, в зависимости от стиля вашего кода, если он по старинке, вы можете прямо в php, в том месте где у вас на странице javascript написать:

<?php
// блаблабла
?>
<script>
var stsrtTime = <?php echo $phpStartTime; ?>;
</script>
// блаблабла
?>

либо вы делаете ajax get запрос из javascript к специальной страничке для таких запросов, которая возвращает текст, состоящий из этого числа. Второй вариант идеологически вернее, но нужно понимать что на каждый чих так делать не надо, лучше в один запрос собрать сразу кучу переменных и пусть он вернет тот же json который уже в javascript спокойно читается

[Антон Р.]

https://www.w3schools.com/howto/howto_js_countdown.asp

[pw0ned]

ProjectSoft,

<?php

require_once 'admin/connection.php';

$result = mysql_query('SELECT * FROM time WHERE 1');
$row = mysql_fetch_assoc($result);
$count = $row['time'];

?>

<script>

// Set the date we're counting down to
var countDownDate = <?php echo $count; ?>;
//var countDownDate = new Date("November 5, 2020 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

не правильно? дату получаю с бд когда делаю echo в php, но в js не воркает

[ProjectSoft]

pw0ned, если есть ссылка на пациента - лучше её.
Я могу только ванговать, что у вас в var countDownDate = <?php echo $count; ?>;
И соответственно смотреть консоль

Answer 1

[Виктор К]

Если я верно понял, ты хочешь хранить в бд дату, которую может указать админ, а после, при выводе ее на странице пользователя, js скрипт должен начинать обратный отсчет? Если, да, то примерно так)

https://jsfiddle.net/vuldozer/7yq2xotL/

Из php отрендерить дату можно в любом читаемом виде, например так: date('Y-m-d H:i:s');

Comments

[pw0ned]

да, все именно так.
у меня проблема в том сейчас, как это значение с БД передать в JS, посредством пхп я получаю свою нужную дату с таблицы

<?php

require_once 'admin/connection.php';

$result = mysql_query('SELECT * FROM time WHERE 1');
$row = mysql_fetch_assoc($result);
$count = $row['time'];

echo $count;

?>

а вот на стороне JS, на примере того кода что ты скинул, я не знаю как сделать её отображение на странице :(

[Виктор К]

Тебе бы начать с каких-то азов, судя по всему.
Файл php c выводом должен быть примерно таким

<?php

require_once 'admin/connection.php';

$result = mysql_query('SELECT * FROM time WHERE 1');
$row = mysql_fetch_assoc($result);
$date= $row['time'];//вот в этой переменной дата
//здесь нужно преобразовать дату из time в читаемый формат, так как я указал выше, если требуется
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HTML5</title>

 </head>
 <body>
  <div id="target"><?php echo $date ?></div>
//сам вывод
 </body>
</html>

в любое место страницы вставь js код из фидла выше, и все заработает

[pw0ned]

Виктор К, до сих пор не разобрался, видимо мы не так один одного поняли)
сам вывод даты с БД я сделать могу, дело в том что JS не делает обратного отсчета (

[Виктор К]

pw0ned, кидай код страницы целиком. Прямо файл пхп кидай, который страницу генерит

[pw0ned]

Виктор К,

<?php

require_once 'admin/connection.php';

$result = mysql_query('SELECT * FROM time WHERE 1');
$row = mysql_fetch_assoc($result);
$date= $row['time'];

?>


            <span style="font-size: 16px;"><b>Ends in:</b>&nbsp <span id="target" style="font-size: 18px;"></span></span> 
                <br><br>
             <span style="font-size: 16px;"><b>You Save:</b>&nbsp <span style="font-size: 16px; color: #B12704;">$125.00 (25%)</span></span> 
        
      

    <script>
var target_date = new Date("2019-08-06").getTime(); // установить дату обратного отсчета из php
var days, hours, minutes, seconds; // переменные для единиц времени
 
var countdown = document.getElementById("target");
 
setInterval(function () { getCountdown(); }, 1000);
 
function getCountdown(){
 
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    days = pad( parseInt(seconds_left / 86400) );
    seconds_left = seconds_left % 86400;
   console.log(seconds_left);
    hours = pad( parseInt(seconds_left / 3600) );
    seconds_left = seconds_left % 3600;
           
    minutes = pad( parseInt(seconds_left / 60) );
    seconds = pad( parseInt( seconds_left % 60 ) );
 

    countdown.innerHTML = "<span>д:" + days + "</span> - <span>ч:" + hours + "</span> - <span>м:" + minutes + "</span> - <span>с:" + seconds + "</span>"; 
}
 
function pad(n) {
    return (n < 10 ? '0' : '') + n;
}
</script>

[Виктор К]

pw0ned, единственное, что я могу придумать, это что у тебя ошибка в php. Во первых не используй старые mysql функции - используй https://www.php.net/manual/ru/book.mysqli.php
Во вторых. У тебя сейчас дата зашита в коде

var target_date = new Date("2019-08-06").getTime();

Когда ты удостоверишься, что из php все нормально получается, вместо этой строки должна быть такая

var target_date = new Date("<?php echo  $date?>").getTime();