个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 10:20:24 25 4
gpt4 key购买 nike

我在显示网站计时器时遇到问题。计时器应该出现在两个没有任何东西的平行杆之间。另外，页面底部的链接没有将我带到正确的页面。事实上，问题在于页面无法到达任何地方。这是到目前为止我的代码:

<!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>

最佳答案

您的代码中有一些错误:

  1. HTML 中的注释格式为:<!-- comment -->不是<--Hide from old browsers

  2. indexOf()方法是大写的 O，而不是 dayLocate = dayofweek.indexof(" ") 。请小心，因为 JavaScript 区分大小写。

  3. 要使用 innerHTML() element 属性，您需要先使用 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>";

  4. 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>

关于javascript - HTML 如何使用 JavaScript 显示计时器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29662447/

25 4 0
文章推荐： javascript - 为什么这个对象字面量会导致语法错误？
文章推荐： javascript - 在其他 php 文件中使用 Javascript 显示表单结果
文章推荐： javascript - 使用TestUtils模拟ReactJS表单标签不会触发 `onSubmit`
文章推荐： javascript - 清除 JavaScript 闭包的快捷语法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com