Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/394.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用Javascript提取系统时间以显示倒计时_Javascript_Html - Fatal编程技术网

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

使用Javascript提取系统时间以显示倒计时,javascript,html,Javascript,Html,我试图在html中使用javascript从浏览器中提取系统时间,并显示未来日期的倒计时,但它不起作用。我有代码要显示,如果有人能帮我解决我在这里做错了什么,我将不胜感激 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Chapter 9-1 Midwest Bridal Expo</title> <script type=

我试图在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>

有许多jQuery插件可以做到这一点。谷歌的第一个结果是:但也有其他结果。您应该能够找到一个可以执行几乎任何类型的倒计时的函数,如果您需要一些自定义逻辑,您也应该能够将其添加进去。

变量daysToBridalExpo是在倒计时范围内声明的,因此您不能使用它的版权函数,请尝试在倒计时之前声明它,并在赋值时删除var

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

我需要能够用JS来做这件事,因为这是一个类项目,你不应该说它不起作用,而应该确切地告诉你它在做什么,你认为它不起作用。这是我在firebug引用中遇到的错误错误错误:daysToBridalExpo未定义…ont family:Helvetica;'>今天是+工作日++月日++年+。我们有+da。。。第9-1.html章第41行