【问题标题】:Countdown from Database (date)数据库倒计时(日期)
【发布时间】:2015-10-03 15:01:39
【问题描述】:

所以我想做的是根据mysql的日期进行倒计时,并使其在实时模式下下降而无需刷新。

代码:

<?php 
    $date = strtotime($row_tournaments['date']);
    $remaining = $date - time();
    $days_remaining = floor($remaining / 86400);
    $hours_remaining = floor(($remaining % 86400) / 3600);
    $minutes_remaining = floor(($remaining % 3600) / 60);
    $seconds_remaining = ($remaining % 60);
    echo "<p>$days_remaining <span style='font-size:.3em;'>dias</span> $hours_remaining <span style='font-size:.3em;'>horas</span> $minutes_remaining <span style='font-size:.3em;'>minutos</span> $seconds_remaining <span style='font-size:.3em;'>segundos</span></p>";
?>

这很好,但我需要刷新,这样我才能看到时间正在减少。

$date = strtotime($row_tournaments['date']);

这是从数据库中获取日期,格式为:

2015-10-11 08:15:31

【问题讨论】:

  • 你看过这里的例子吗? stackoverflow.com/search?q=javascript+countdown 例如,stackoverflow.com/questions/1191865/… 有许多不同的答案,可以根据您的需要进行修改。
  • 我已经尝试过搜索并使用其他一些代码,但我仍然无法做到,我什至在获得帮助之前用谷歌搜索它:S。无论如何 ty 的小费。肿块。
  • 所以你要发布一些你尝试过的代码,但那没有用。还是您希望我们为您提供免费代码?如果你不想表现出你的努力,你总是可以花钱请人来做这项工作。
  • @Bruno 您能否发布您尝试过的其他代码以及为什么它不起作用?
  • "+counter.getHours()+" horas "+counter.getMinutes()+" minutos "+counter.getSeconds()+" segundos"; },1000);

标签: javascript php mysql date countdown


【解决方案1】:

var initialTime = 194801;//Place here the total of seconds you receive on your PHP code. ie: var initialTime = <? echo $remaining; ?>;

var seconds = initialTime;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds+ "segundos";
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
    }
}
var countdownTimer = setInterval('timer()', 1000);
&lt;span id="countdown" class="timer"&gt;&lt;/span&gt;

【讨论】:

  • 哦,非常感谢,但我的日期格式是:2015-10-11 08:15:31 如何将其转换为秒并粘贴到那里?! var 初始时间 = 172801;
  • 您在几秒钟内就已经在您的 $remaining PHP 变量 var initialTime = &lt;? echo $remaining; ?&gt;; 上拥有了它...请参阅我的答案中 initialTime 变量旁边的评论示例
  • 只有一件事可以在你的代码中设置样式,比如增加字体大小?!
  • 当然,您可以在document.getElementById('countdown').innerHTML = 部分放入您想要的任何html 代码,就像您在php echo 代码行中的样式一样,只需将php 变量替换为javascript 变量即可跨度>
  • 我已经设计了它并且它工作正常,但我想知道这是否可能。所以我在数据库中有两个日期,一个是 2015 年 2 月 10 日,另一个是 2015 年 5 月 10 日,我想做的是因为 2015 年 2 月 10 日已经过去了,我希望那个计数器自动开始计算到 5 天/10/2015 我试图弄清楚但不能让它工作。它显示自 2015 年 2 月 10 日以来的负数已经过去。感谢您的支持。
【解决方案2】:

最好只在 mysql db 中插入结束时间,并将变量分配给类似 dis 的变量

    $sql = "SELECT endtime FROM post";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$Row = (mysqli_fetch_assoc($result));
$th = $Row['endtime'];    
}
echo $th
?> 

然后使用您的 javascript 运行类似 dis 的倒计时

//let get todays date here
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $th; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();

var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    //document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
    document.getElementById('dday').innerHTML = days;
    document.getElementById('dhour').innerHTML =hours;
    document.getElementById('dmin').innerHTML =minutes;
    document.getElementById('dsecond').innerHTML =remainingSeconds;



    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
    }
}
var countdownTimer = setInterval('timer()', 1000);

然后给它分配一个 div id="倒计时"

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-12-02
    • 2021-02-03
    • 1970-01-01
    • 2020-09-04
    • 1970-01-01
    • 1970-01-01
    • 2011-10-31
    相关资源
    最近更新 更多