使用Javascript提取系统时间以显示倒计时

时间:2013-12-05 13:51:03

标签: javascript html

我正在尝试使用html中的javascript从浏览器中提取系统时间并显示倒计时到未来的日期,但它只是不起作用。我有代码展示,如果有人可以帮我解决我在这里做错了什么,我将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Chapter 9-1 Midwest Bridal Expo</title>
    <script type="text/javascript">
        <!--Hide from old browsers
        function countDown() {
            var today = new Date()
            var dayofweek = today.toLocaleString()
            dayLocate = dayofweek.indexOf(" ")
            weekDay = dayofweek.substring(0, dayLocate)
            newDay = dayofweek.substring(dayLocate)
            dateLocate = newDay.indexOf(",")
            monthDate = newDay.substring(0, dateLocate + 1)
            yearLocate = dayofweek.indexOf("2014")
            year = dayofweek.substr(yearLocate, 4)

            var bridalExpo = new Date("February 12, 2014")
            var daysToGo = bridalExpo.getTime() - today.getTime()
            var daysToBridalExpo = Math.ceil(daysToGo / (1000 * 60 * 60 * 24))

            displayCountDown.innerHTML = "<p style='font-size:12pt; font-family:Helvetica;'>Today is " + weekDay + " " + monthDate + " " + year + ". We have " + daysToBridalExpo + " days until the Midwest Bridal Expo.</p>"
        }

        function scrollColor() {
            styleObject = document.getElementsByTagName('html')[0].style
            styleObject.scrollbarFaceColor = "#ffde5b"
            styleObject.scrollbarTrackColor = "ffba00"
        }

        function loadInfo(myForm) {
            var menuSelect = myForm.Menu.selectedIndex
            var menuUrl = myForm.Menu.options[menuSelect].value + ".html"
            window.location = menuUrl
        }

        function copyRight() {
            var lastModDate = document.lastModified
            var lastModDate = lastModDate.substring(0, 10)
            displayCopyright.innerHTML = "<p style='font-size:12pt; font-family:Helvetica;'>Today is " + weekDay + " " + monthDate + " " + year + ". We have " + daysToBridalExpo + " days until the Midwest Bridal Expo.</p>"
        }
        //-->
    </script>
    <style type="text/css">
        .center {
            text-align:center;
        }
        img {
            border:0px;
        }
        .left-align {
            width: 50%;
            left: 0;
        }
        .right-align {
            width: 50%;
            right: 0;
            text-align: right;
        }
        table {
            width: 80%;
            margin-right: 10%;
            margin-left: 10%;
        }
        td {
            padding: 5px;
        }
    </style>
</head>
<body onLoad="scrollColor(); countDown(); copyRight()">
    <div class="center">
        <p>
            <img src="chapter9-1banner.jpg" width="747" height="160" alt="Bridal Expo Banner">
        </p>
        <p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">Midwest Bridal Expo</p>
        <img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="hr">
        <div id="displayCountDown"></div>
        <img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="horizonal rule">
    </div>
    <table class="centerTable">
        <tr>
            <td colspan="2">
                <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Planning your summer or fall wedding</p>
                <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Midwest Bridal Expo opens in Michigan on February 12, 2014 at the Ford Convention Center. This Expo is for all couples planning to get married in the next year, with an emphasis on those planning a summer or fall wedding. We have assembled a group of experts from all areas of wedding planning to help you plan your perfect day.</p>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">What awaits you</p>
                <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Our full day of events include seminars with keynote speakers, one-on-one sessions with professional wedding planners, and various vendors from bakers to photographers with experience at all levels of wedding planning. You will be able to sample wedding cakes, see photo galleries by acclaimed photographers, and meet with hall rental representatives. And do not forget to discuss whether you want a live band or a DJ to provide music at that all-important reception.</p>
                <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">When you arrive, be sure to register for the grand prize drawing. Many of the individual vendors will also have raffles at their booths for special prizes, like free wedding cakes, free limo service, or free bouquets for the bride.</p>
            </td>
        </tr>
        <tr>
            <td class="right-align">
                <img src="393px-Wedding_cake_with_pillar_supports,_2009.jpg" width="197" height="300" alt="" style="background-color: #7f1100">
            </td>
            <td class="left-align">
                <img src="Western_wedding_dress_in_Taiwan.jpg" width="226" height="300" alt="" style="background-color: #7f1100">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <form id="announceMenu">
                    <p style="font-weight:bolder">For more information about the Expo:
                        <select name="Menu" onChange="loadInfo(this.form)">
                            <option>Select a topic</option>
                            <option value="chapter09vendor">Vendor List</option>
                            <option value="chapter09schedule">Schedule</option>
                            <option value="chapter09tips">Wedding Tips</option>
                        </select>
                    </p>
                </form>
            </td>
            <tr>
                <td colspan="2">
                    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Ticket Information: <span style="font-family: 'Times New Roman', Times, serif; font-size: 10pt">For ticket reservations </span><span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">call 555-555-5555 x2205. Early bird ticket holders get a 10% discount..</span>
                    </p>
                </td>
            </tr>
    </table>
    <p></p>
    <div id="displayCopyright"></div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

有很多jQuery插件可以做到这一点。第一个Google结果就是这个:http://keith-wood.name/countdown.html但也有其他结果。你应该能够找到一个可以做任何你想要的倒计时,如果你需要一些自定义逻辑,你也应该能够添加它。

答案 1 :(得分:0)

变量daysToBridalExpocountDown范围内声明,因此您无法使用copyRight()函数,尝试在countDown之前声明它并删除var在分配价值时。

var daysToBridalExpo;
function countDown() {
...
  daysToBridalExpo = Math.ceil(daysToGo / (1000 * 60 * 60 * 24));
}