Question

我正在使用Laravel作为框架，我将日期存储在数据库中，如下所示：

07/16/2014例如

那么我怎样才能创建一个倒数计时器到这个日期。 ???

帮助/示例非常感谢。

Answer 1

<!DOCTYPE html>

<html lang="pl">

<head>

<script>
    function counter(field, time) {

        // access to html element
        var counter_field = document.getElementById(field);

        // destination date/time
        var date_stop = time; //new Date(2013,6,7,0,0,0,0);

        // call counting function every second (1000 ms)
        var counting_loop = setInterval(counting, 1000);

        // counting function
        function counting() 
        {
            // current date/time
            var date_now = new Date();

            // text 
            var text = "THE END";

            if( date_stop == null ) {
                var text = "- you forget date/time -";
            } else {

                // convert miliseconds to seconds
                var diff = Math.round((date_stop-date_now)/1000);

                // still in future
                if( (0 < diff) ) 
                {
                    // convert diff to days, hours, minutes, seconds

                    // seconds
                    var seconds = diff % 60;
                    diff = (diff-seconds) / 60;
                    if( seconds < 10 ) seconds = "0" + seconds;

                    // minutes
                    var minutes = diff % 60;
                    diff = (diff-minutes) / 60;
                    if( minutes < 10 ) minutes = "0" + minutes;

                    // hours
                    var hours = diff % 24;
                    diff = (diff-hours) / 24;
                    if( hours < 10 ) hours = "0" + hours;

                    // days
                    var days = diff;
                    if( days < 10 ) days = "0" + days;

                    // convert to text
                    text = " <b>days</b> "+days+" <b>hours</b> "+hours+":"+minutes+":"+seconds;
                } else {
                    // removing counter
                    counter_field.parentElement.removeChild(counter_field);
                    // 
                    // here put code to remove element from view
                    // 
                    unsetInterval(counting_loop);
                }
            }

            // put text into html
            counter_field.innerHTML = text;         
        }
    }

    window.onload = function() 
    {
        counter("field_1", new Date(2014,5,27,16,0,0,0));
        counter("field_2", new Date(2014,6,27,21,0,0,0));
    }
</script>

</head>

<body>

2014.06.27 16:00:00 = <span id="field_1"></span><br/>
2014.07.27 21:00:00 = <span id="field_2"></span><br/>

</body>

</html>

倒计时器像wowcher / ebay

1 个答案: