0

我访问我的网站它开始时间倒计时,但问题是当我重新加载页面时间倒计时已被重置。问题是什么以及如何解决。

现场演示链接——http ://bdtunes4u.com/un/full/

01-索引

    <!doctype html>

    <html>

    <head>
    <title>Coming SooN - A Premium Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="css/custom.css" media="screen" />
    <link type="text/css" rel="stylesheet" href="css/responsive.css" media="screen" />
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google font -->
    <link href='http://fonts.googleapis.com/css?family=Fjalla+One|Archivo+Narrow|Oswald:400,700' rel='stylesheet' type='text/css'>


    <!-- Import JavaScript -->
    <script type="text/javascript" src="js/subscribe.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/clock.js"></script> 
       <script type="text/javascript" src="http://www.convert-unix-time.com/scripts.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            JBCountDown({
                secondsColor : "#B9C2C3",
                secondsGlow  : "none",

                minutesColor : "#FDC800",
                minutesGlow  : "none",

                hoursColor   : "#44A5A8",
                hoursGlow    : "none",

                daysColor    : "#5CA1BF",
                daysGlow     : "none",

                startDate   : "1369396800",
                endDate     : "1369483200",
                now         : "1369446865 "
                });
            });
    </script>

</head>

<body>

    <div class="over_bg">

        <div class="clearfix"></div>
        <div class="wrapper">

            <div class="top">

                <h2>THIS WEBSITE IS UNDER CONSTRUCTION!</h2>

                <h4>WE WILL GET BACK TO...</h4>         

            </div>

            <div class="clock">

                <div class="clock_days">
                    <canvas id="canvas_days" height="190px" width="190px" id="canvas_days"></canvas>
                    <div class="text" style=" background:url(img/4.png) no-repeat;">
                        <p class="val">0</p>
                        <p class="type_days">Days</p>
                    </div>
                </div>
                <div class="clock_hours">
                    <canvas height="190px" width="190px" id="canvas_hours"></canvas>
                    <div class="text" style=" background:url(img/3.png) no-repeat;">
                        <p class="val">0</p>
                        <p class="type_hours">Hours</p>
                    </div>
                </div>
                <div class="clock_minutes">
                    <canvas height="190px" width="190px" id="canvas_minutes"></canvas>
                    <div class="text" style=" background:url(img/2.png) no-repeat;">
                        <p class="val">0</p>
                        <p class="type_minutes">Minutes</p>
                    </div>
                </div>
                <div class="clock_seconds">
                    <canvas height="190px" width="190px" id="canvas_seconds"></canvas>
                    <div class="text" style=" background:url(img/1.png) no-repeat;">
                        <p class="val">0</p>
                        <p class="type_seconds">Seconds</p>
                    </div>
                </div>

            </div><!-- clock -->



            <div class="sign-up">

                <h3>Please subscribe to get notified, When we launch!</h3>

                <div id="notification">

                    <div id="notificationForm">

                        <form id="notify" name="notify" action="#">

                            <input class="email " type="text" name="email" id="email" value="Enter Your Email Address" onfocus="clearText(this)" onblur="clearText(this)">
                            <span class="ajaxLoadImg" style="display: none;"><img src="images/loadingBar.gif" alt="loadingBar"></span>                              
                            <!-- Uncomment to use normal png button image -->                               
                            <div class="clearfix"></div>
                            <button class="notificationFormSubmit btn btn-info btn-block " value="" name="Submit">Submit</button>

                        </form>

                    </div>

                    <!-- The div where the user will see the error/success message when submitting the form. -->

                    <div id="formMessage">

                        <div class="userMessage" style="display: none;"></div>

                    </div>

                </div>              

            </div><!-- Sign Up -->

        </div><!-- Wrapper -->  

    </div>

</body>

</html>

02--

function JBCountDown(settings) {
    var glob = settings;

    function deg(deg) {
        return (Math.PI/180)*deg - (Math.PI/180)*90
    }

    glob.total   = Math.floor((glob.endDate - glob.startDate)/86400);
    glob.days    = Math.floor((glob.endDate - glob.now ) / 86400);
    glob.hours   = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
    glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60) ;
    glob.seconds = 60 - Math.floor((glob.endDate - glob.now) % 86400 % 3600 % 60);

    if (glob.now >= glob.endDate) {
        return;
    }

    var clock = {
        set: {
            days: function(){
                var cdays = $("#canvas_days").get(0);
                var ctx = cdays.getContext("2d");
                ctx.clearRect(0, 0, cdays.width, cdays.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.daysColor;

                ctx.shadowBlur    = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.daysGlow;

                ctx.arc(95,95,80, deg(0), deg((360/glob.total)*(glob.total - glob.days)));
                ctx.lineWidth = 12;
                ctx.stroke();
                $(".clock_days .val").text(glob.days);
            },

            hours: function(){
                var cHr = $("#canvas_hours").get(0);
                var ctx = cHr.getContext("2d");
                ctx.clearRect(0, 0, cHr.width, cHr.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.hoursColor;

                ctx.shadowBlur    = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.hoursGlow;

                ctx.arc(95,95,80, deg(0), deg(15*glob.hours));
                ctx.lineWidth = 12;
                ctx.stroke();
                $(".clock_hours .val").text(24 - glob.hours);
            },

            minutes : function(){
                var cMin = $("#canvas_minutes").get(0);
                var ctx = cMin.getContext("2d");
                ctx.clearRect(0, 0, cMin.width, cMin.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.minutesColor;

                ctx.shadowBlur    = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.minutesGlow;

                ctx.arc(95,95,80, deg(0), deg(6*glob.minutes));
                ctx.lineWidth = 12;
                ctx.stroke();
                $(".clock_minutes .val").text(60 - glob.minutes);
            },
            seconds: function(){
                var cSec = $("#canvas_seconds").get(0);
                var ctx = cSec.getContext("2d");
                ctx.clearRect(0, 0, cSec.width, cSec.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.secondsColor;

                ctx.shadowBlur    = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.secondsGlow;

                ctx.arc(95,95,80, deg(0), deg(6*glob.seconds));
                ctx.lineWidth = 12;
                ctx.stroke();

                $(".clock_seconds .val").text(60 - glob.seconds);
            }
        },

        start: function(){
            /* Seconds */
            var cdown = setInterval(function(){
                if ( glob.seconds > 59 ) {
                    if (60 - glob.minutes == 0 && 24 - glob.hours == 0 && glob.days == 0) {
                        clearInterval(cdown);

                        /* Countdown is complete */

                        return;
                    }
                    glob.seconds = 1;
                    if (glob.minutes > 59) {
                        glob.minutes = 1;
                        clock.set.minutes();
                        if (glob.hours > 23) {
                            glob.hours = 1;
                            if (glob.days > 0) {
                                glob.days--;
                                clock.set.days();
                            }
                        } else {
                            glob.hours++;
                        }
                        clock.set.hours();
                    } else {
                        glob.minutes++;
                    }
                    clock.set.minutes();
                } else {
                    glob.seconds++;
                }
                clock.set.seconds();
            },1000);
        }
    }
    clock.set.seconds();
    clock.set.minutes();
    clock.set.hours();
    clock.set.days();
    clock.start();
}
4

1 回答 1

0

我认为这个 URL 会对你有所帮助。看一下这个。

http://www.keith-wood.name/countdown.html

于 2013-05-25T04:17:40.047 回答