我如何在html中调用javascript函数?

时间:2016-06-09 03:50:31

标签: javascript html function

我正在尝试调用一个函数,以便我可以在页面上打印日期。

我想将它显示在

<p>function output would go here</P>

function printdate()
{

var today = new date;

var fulldate = document.getElementById("fulldate");
fulldate.textContent = today.getTime();

}

这是我的完整脚本我不完全确定我做错了什么或我需要做些什么来纠正这个问题。

    <html>
<head>
<!-- 

   Happy New Years
   Author: Professor Myron Wilson
   Date:   8/1/2006

   Filename:         happynewyears.htm
   Supporting files: e.jpg, library.js, newyearseve.gif, styles.css
-->

<title>North Pole Novelties</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Add library.js below -->



<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
</head>

<body>
<table id="npn" cellpadding="5" cellspacing="0">
<tr>
<!-- Company Hyperlinks -->
<td id="links" rowspan="4" valign="top">
   <a href="#">The New Year's Event Agenda</a>
   <a href="#"></a>
   <a href="#">New Year's Eve Happy Hour</a>
   <a href="#">New Year's Eve Concert</a>
   <a href="#">New Year's Eve Party</a>
   <a href="#">New Year's Day Brunch</a>
</td>

<!-- Days until New Year's Eve -->


<td id="daycell">



<p id="fulldate"></p>



<p id="Xyear"></p>Days left until New Years








<script>

// Add script tag and declare variables and assign values


    function NYEDays(CheckDay) 
{
   var XYear=CheckDay.getFullYear();
   var XDay=new Date("December, 31, 2014");
   XDay.setFullYear(XYear);
   var DayCount=(XDay-CheckDay)/(1000*60*60*24);
   DayCount=Math.round(DayCount);
   return DayCount;
}

function printdate()
{

    var today = new date();

    var fulldate = document.getElementById("fulldate");
    fulldate.textContent = today.getTime();

}



<!-- Add date output statement --> 








<!-- Add decision statment for number of days -->

    if (days < 2)
{
    alert("Almost here!")   
}

</script>



</td>
</tr>

<tr>
<!-- Company Logo -->
<td id="logo">
   <img src="newyearseve.gif" alt="New Year's Eve!" />
</td>
</tr>

<tr>
<!-- Articles about the company -->
<td>
   <table cellspacing="4" cellpadding="4">
   <tr>
   <!-- Welcome message -->
   <td id="firstcol" valign="top">
      <p>
      NEW YEAR'S EVE ENTERTAINMENT Consider us your complete 
      New Year's Eve entertainment needs. We offer a excellent two days of events of elegance
      and style.</p>

   <!-- Latest news -->
      <h3>NEW YEAR'S EVE HAPPY HOUR</h3>
      <p>It starts at 5:00p.m. Mengle with everyone while consuming 
       the finest spirits and eating the best horderves. </p>

      <h3>NEW YEAR'S EVE CONCERT</h3>
      <p>When you hear the band play and the artists sing, you are hearing our concert
      At 7:00p.m., listen to some of the best groups Atlanta has to offer. </p>

      <h3>NEW YEAR'S EVE PARTY</h3>
      <p>This is the event of the year. Jam to the sounds of everyone's
      favorite radio disc jockey and bring in the new year with a bang
      starting at 10:00 p.m. </p>

      <h3>NEW YEAR'S DAY BRUNCH</h3>
      <p>There is no other way to close out the vent with a delicious brunch
      with everyone's breakfast and lunch favorites at 11:00 a.m. </p>
   </td>

   <!-- Information about the company -->
   <td id="secondcol" valign="top">
      <h3>Elegance Entertainment</h3>
      <p>
      <img src="e.jpg" alt="" style="float: right; margin: 0px 0px 10px 10px" />
      Elegance Entertainment is a company that specialize in major events.
      Established in 2003, Elegance has been providing events for the professional
      market in the Atlanta area.</p>
   </td>
   </tr>
   </table>
</td>
</tr>

<tr>
<!-- Contact Information -->
<td id="contact">
   <b>Elegance Entertainment</b> | 
   324 King Avenue | 
   Atlanta, GA 30332 | 
   (404) 555-2015
</td>
</tr>
</table>

<script type="text/javascript" src="library.js"></script>
</body>
</html>

4 个答案:

答案 0 :(得分:1)

将{{3}}替换为new date;还包括id="fulldate"元素

<p>属性

&#13;
&#13;
<p id="fulldate">function output would go here</p>
<script>
  function printdate() {

    var today = new Date();

    var fulldate = document.getElementById("fulldate");
    fulldate.textContent = today.getTime();

  }
  printdate()
</script>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

为了在页面加载时调用该函数,只需在脚本部分调用该函数即可。使用内部HTML来显示。使代码简单易行。

这是脚本:

function printdate() {
    document.getElementById("dat").innerHTML = Date();
}
printdate();  //calling date

你也可以写这样的函数:

function printdate() {
    return new Date();
}
document.getElementById("dat").innerHTML =printdate();

HTML部分:

<div>
    <p id="dat"></p>
</div>

这将对您有所帮助:

Click to see this fiddle

This link will help you to create date format

此代码段显示日期:

   <html>
<head>
<!-- 
   Happy New Years
   Author: Professor Myron Wilson
   Date:   8/1/2006
   Filename:         happynewyears.htm
   Supporting files: e.jpg, library.js, newyearseve.gif, styles.css
-->

<title>North Pole Novelties</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Add library.js below -->
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
</head>

<body>

<table id="npn" cellpadding="5" cellspacing="0">
<tr>
<!-- Company Hyperlinks -->
<td id="links" rowspan="4" valign="top">
   <a href="#">The New Year's Event Agenda</a>
   <a href="#"></a>
   <a href="#">New Year's Eve Happy Hour</a>
   <a href="#">New Year's Eve Concert</a>
   <a href="#">New Year's Eve Party</a>
   <a href="#">New Year's Day Brunch</a>
</td>

<!-- Days until New Year's Eve -->


<td id="daycell">


<p id="Xyear">Days left until New Years</p>
<p id="dat"></p>
<script type="text/javascript" >

// Add script tag and declare variables and assign values


    function NYEDays(CheckDay) 
{
   var XYear=CheckDay.getFullYear();
   var XDay=new Date("December, 31, 2014");
   XDay.setFullYear(XYear);
   var DayCount=(XDay-CheckDay)/(1000*60*60*24);
   DayCount=Math.round(DayCount);
   return DayCount;
}

function printdate() {
 return new Date();
}
document.getElementById("dat").innerHTML =printdate();
<!-- Add date output statement --> 


<!-- Add decision statment for number of days -->

    if (days < 2)
{
    alert("Almost here!")   
}

</script>
</td>
</tr>

<tr>
<!-- Company Logo -->
<td id="logo">
   <img src="newyearseve.gif" alt="New Year's Eve!" />
</td>
</tr>

<tr>
<!-- Articles about the company -->
<td>
   <table cellspacing="4" cellpadding="4">
   <tr>
   <!-- Welcome message -->
   <td id="firstcol" valign="top">
      <p>
      NEW YEAR'S EVE ENTERTAINMENT Consider us your complete 
      New Year's Eve entertainment needs. We offer a excellent two days of events of elegance
      and style.</p>

   <!-- Latest news -->
      <h3>NEW YEAR'S EVE HAPPY HOUR</h3>
      <p>It starts at 5:00p.m. Mengle with everyone while consuming 
       the finest spirits and eating the best horderves. </p>

      <h3>NEW YEAR'S EVE CONCERT</h3>
      <p>When you hear the band play and the artists sing, you are hearing our concert
      At 7:00p.m., listen to some of the best groups Atlanta has to offer. </p>

      <h3>NEW YEAR'S EVE PARTY</h3>
      <p>This is the event of the year. Jam to the sounds of everyone's
      favorite radio disc jockey and bring in the new year with a bang
      starting at 10:00 p.m. </p>

      <h3>NEW YEAR'S DAY BRUNCH</h3>
      <p>There is no other way to close out the vent with a delicious brunch
      with everyone's breakfast and lunch favorites at 11:00 a.m. </p>
   </td>

   <!-- Information about the company -->
   <td id="secondcol" valign="top">
      <h3>Elegance Entertainment</h3>
      <p>
      <img src="e.jpg" alt="" style="float: right; margin: 0px 0px 10px 10px" />
      Elegance Entertainment is a company that specialize in major events.
      Established in 2003, Elegance has been providing events for the professional
      market in the Atlanta area.</p>
   </td>
   </tr>
   </table>
</td>
</tr>

<tr>
<!-- Contact Information -->
<td id="contact">
   <b>Elegance Entertainment</b> | 
   324 King Avenue | 
   Atlanta, GA 30332 | 
   (404) 555-2015
</td>
</tr>
</table>

<script type="text/javascript" src="library.js"></script>
</body>
</html>

答案 2 :(得分:0)

是从某个动作调用该函数还是在页面加载时执行的函数?

<body onload="printdate()">

答案 3 :(得分:0)

实际上,您应该在input元素上定义日期,而不是在段落标记上定义日期。在开发过程中遵循这是一种很好的做法。

您可以查看此示例,以解决您的问题: w3schools reference http://www.w3schools.com/js/js_dates.asp