Question

我在显示网站计时器时遇到问题。计时器应出现在两个平行杆之间，它们之间没有任何东西。此外，页面底部的链接不会将我带到正确的页面。事实上，页面不会出现问题。到目前为止，这是我的代码：

<!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.LocaleString()
    dayLocate = dayofweek.indexOf(" ")
    weekDay = dayofweek.substring(0, dayLocate)
    newDay = dayofweek.substring(dayLocate)
    dateLocate = newDay.indexOf(",")
    monthDate = newDay.substring(0, dateLocate+1)
    yearLocate = dayofweek.indexOf("2015")
    year = dayofweek.substr(yearLocate, 4)

    var bridalExpo = new Date("February 12, 2015")
    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.scrollFaceColor="#ffde5d"
    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:8pt; font-weight:bold;'> The URL of this document is "+document.URL+"<br/>Midwest Bridal Expo"+"<br/> This document was last modified "+lastModDate+".</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>

Answer 1

您的代码中存在一些错误：

HTML中的评论采用以下格式：而非<--Hide from old browsers
indexOf()方法使用大写字母O，而不是dayLocate = dayofweek.indexof(" ")。请注意，因为javascript区分大小写。

要使用innerHTML()元素属性，您需要在使用document.getElementById("id");之前获取对此元素的引用

var displayCountDown = document.getElementById('displayCountDown');
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>";

onload必须为小写; <body onLoad = "scrollColor(); countDown(); copyRight()">

我使用了这段代码，虽然我不知道这是否是您想要的最终结果，但似乎有效。

<!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("2015")
    year = dayofweek.substr(yearLocate, 4)
    alert("This webpage was constructed by jaj033")


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

    var displayCountDown = document.getElementById('displayCountDown');
    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:8pt; font-weight:bold;'>The URL of this document is "+document.URL+"<br/>Midwest Bridal Expo"+"<br/>This document was last modified "+lastModDate+"</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" border="1">
  <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>

HTML如何使用javascript显示计时器？

1 个答案: