JavaScript函数,用于在<div>容器</div>中显示动态消息

时间:2014-01-24 21:51:09

标签: javascript html css

我一直在做这个课堂练习一段时间,我无法弄清楚它是什么。首先,我一遍又一遍地挖掘我的书,没有找到任何有用的答案。然后我把它从地狱里掏出来,这是一个疯狂的追逐,而不是再次体验。此外,我不希望任何人认为我只是在找人做我的工作。我合法地需要一些帮助和指导。

我需要展示的是什么;

  1. 用于在容器中显示动态消息的JavaScript函数。
  2. 用于更改滚动条颜色的JavaScript函数。
  3. JavaScript函数,使用下拉列表链接到新网页。
  4. JavaScript函数,用于显示上次修改网页的日期以及容器中的版权信息。
  5. 以下是我到目前为止验证它时收到此消息:

    * 第26行,第30列:文档类型不允许使用元素“h1”     displayDate.innerHTML =“今天是”+ weekDay +“”+ monthDate +“”+年+“。我们...... ✉ 上面提到的元素是在不允许的上下文中找到的。这可能意味着您有错误的嵌套元素 - 例如“body”部分中的“style”元素而不是“head”内部 - 或者两个重叠的元素(不允许)。

    错误第44行,第34列:文档类型不允许使用元素“h6” displayCopyRight.innerHTML =“此文档的网址为”+ document.URL +“&lt; ... ✉ 上面提到的元素是在不允许的上下文中找到的。这可能意味着您有错误的嵌套元素 - 例如“body”部分中的“style”元素而不是“head”内部 - 或者两个重叠的元素(不允许)。

    <!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Oakwood Elementary School</title>
    <script type="text/javascript">
    <!--hide from older browsers-->
    function coountDown(){
        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 ColumbusDay = new Date("October 8, 2014")
        var daysTooGo = ColumbusDay.getTime()-today.getTime()
        var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
    
        displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have "+daysToColumbusDay+" days until Columbus Day.</h1>   
        }
    
    function scrollColor() {
            styleObject=document.getElementsByTagName('html').style
            styleObject.scrollbarFaceColor="#fbb04"
            styleObject.scrollbarTrackColor="#ffe700"
    }
    
    function loadInfo(myForm) {
        var menuSelect=myForm.Menu.selectedIndex
        var menuUrl=myForm.Menu.options[menuSelect].value+".html"
        window.location=menuUrl
        }
    
        functions copyRight() {
    var lastModDate = document.lastModified
    var lastModDate = lastModDate.substring(0,10)
    displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br /> This document was last modified "+lastModDate+".</h6>"
    }
    
    
    </script>
    <style type="text/css">
    .center {
        text-align:center;
        }
    
    table {
        margin-left:15%;
        margin-right:15%;
        }
    .cell-width {
        width: 50%;
    }
    
    .left-align {
       width: 50%;
       left: 0;
       }
    
    .right-align {
       width: 50%;
       right: 0;
       text-align: right; 
       } 
    
    </style>
    </head>
    <body onload="scrollColor(); countDown(); copyRight()">
    <div class="center">
    <p><img src="chapter9Oakwood.jpg" alt="oakwood banner" width="750" height="120" /></p>
    <p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">OAKWOOD ELEMENTARY SCHOOL</p>
    <img src="hrzntlrule.jpg" width="700" height="5" alt="hr" />
    <div id="displayDate">
    </div>
    <img src="hrzntlrule.jpg" width="700" height="5" alt="hr" /> </div>
    <table>
      <tr>
        <td colspan="2">
        <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Oakwood Village School Board</p>
        <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Oakwood Village School Board will have monthly meetings on the third Tuesday of the month this fall. Meeting days are September 18, October 16, November 19, and December 18, 2012. All meetings will start promptly at 7:30 p.m. and adjourn by 9 p.m. Meeting days for the spring semester will be determined at the December meeting.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
        <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Morning drop off and afternoon pick up</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Please remember to enter the school drop off area from the south entrance and exit out the north drive way. As always, please watch for children walking to school.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
        <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Fall Fund Raiser</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">This fall, Oakwood Elementary School will have a flea market. We are seeking donations of usable items that can be sold at the flea market. Volunteers are needed to help with setup, sales, and post flea market clean up. Mike's Stop and Shop will serve hot dogs, hamburgers and refreshments.</p>
         </td>
      </tr>
      <tr>
        <td class="right-align"><img src="school-house_left.gif" alt="school" width="160" height="139" /></td>
        <td class="left-align">
              <img src="school-house_right.gif" alt="school" width="160" height="139" />
        </td>
      </tr>
        <tr>
        <td colspan="2">
        <form id="announceMenu" action=" ">
          <p style="font-weight:bolder">
           Select an item from the list to see other current announcements:
             <select name="Menu" onchange="loadInfo(this.form)">
               <option>Select an information item</option>
               <option value="chapter09fundraiser">October Fundraiser</option>
               <option value="chapter09pto">October PTO </option>
               <option value="chapter09tests">State Achievement Test</option>
             </select>
          </p>
        </form></td>
      </tr>
      <tr>
        <td colspan="2">
        <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Attendance Policy:
        <span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">Please call in your child's attendance at 555-555-5555 x2205.</span>
        </p>    
        </td>
      </tr>
    </table>
    <p></p>
    <div id="displayCopyRight">
    </div>
    </body>
    </html>
    

2 个答案:

答案 0 :(得分:2)

你的代码充斥着拼写错误。您需要在浏览器中进行调试。您可以在firefox或Chrome的内置调试器中使用firebug - 按F12将其打开。如果你想使用IE,上帝帮助你(特别是如果你有

我发现的一些错误:

1)拼写错误:coountDown,daysTooGo,函数而不是函数

2)document.getElementsByTagName返回一个数组。所以你应该document.getElementsByTagName('html')[0]如果你想要第一个元素。我不确定你想在这里实现什么,但你可能想要将样式应用到正文(document.body)。

3)displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have "+daysToColumbusDay+" days until Columbus Day.</h1>:你忘了关闭字符串。

4)创建变量时不要忘记var,就像使用styleObject一样。

您还应考虑对代码进行代码审核。理想情况下,某人可以与您坐在一起并查看代码,但您可以随时尝试here。在我看到的很多事情中:除非你真的知道自己在做什么,否则请使用;。即使你知道自己在做什么,也要使用它们。

至于验证员抱怨的h1h6,您可以随时使用document.createElement

答案 1 :(得分:0)

我对你的代码进行了一些调试。

大多数情况下,你是简单拼写错误的受害者。

我发现你的技术没有任何问题,只不过你已经使用了90年代后期的教科书。你不应该因为遵循给出的例子而受到责备,但自那以后有一些事情发生了变化。

您可能想要纠正的几点:

  • 使用;来终止语句。虽然理论上可以不使用它,但它可能会导致罕见但痛苦的错误(通常在输入错误时会改变代码的含义)。您可以将分号视为安全网,以避免拼写错误造成的痛苦后果。
  • 重写您的事件处理程序代码。现在它可以工作,但不是出于你可能期望的原因。

日期计算有点混乱,但现在它显示正确,你应该没有多少麻烦纠正它。

为避免将来遇到这种挫折,我建议您花一些时间熟悉您喜爱的浏览器的开发工具。

不幸的是,每个浏览器都实现了自己的开发工具风格,所以我不能更具体,但它们都提供相同的服务。
它们相对明确,您应该很难理解它们的工作方式。

控制台将显示所有错误,调试选项卡将允许您检查变量的内容,设置断点等。一旦您习惯了它,这将节省大量时间。

<!--hide from older browsers--> // <-- obsolete
function countDown(){ // <-- typo corrected
    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 ColumbusDay = new Date("October 8, 2014")
    var daysToGo = ColumbusDay.getTime()-today.getTime() // <-- typo corrected
    var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))

    var displayDate = document.getElementById ('displayDate'); // <-- grab the element from its ID
    displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have " // <-- trouble with date bits
                          + daysToColumbusDay+" days until Columbus Day.</h1>";  // <-- missing " added
    }

function scrollColor() {
        styleObject=document.getElementsByTagName('html')[0].style // <-- array index added
        styleObject.scrollbarFaceColor="#fbb04"   // <-- IE specific style elements
        styleObject.scrollbarTrackColor="#ffe700"
}

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

    function copyRight() { // <-- typo corrected
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br /> This document was last modified "+lastModDate+".</h6>"
}