将当前时间添加到我页面上的特定部分

时间:2016-05-17 18:05:54

标签: javascript html dom

所以我在我的HTML文件上创建了一个div id="time"并将其定位,以便当前时间可以显示在我所创建的边框内的网站的左上角。所以我希望当前的时间显示在我网站左上角的那个边框内,但我很难这样做:

HTML文件:

    <div id="time">

    </div>

我的js文件:

var time = document.getElementById("time")

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

if (minutes < 10)
    minutes = "0" + minutes

var suffix = "AM";
if (hours >= 12) {
    suffix = "PM";
    hours = hours - 12;
}
if (hours == 0) {
    hours = 12;
}

document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>")

当前时间确实成功显示,但它没有显示在我想要的位置(它一直显示在页面底部)。也许DOM存在问题?

3 个答案:

答案 0 :(得分:1)

试试这个:

&#13;
&#13;
var time = document.getElementById("time")

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

if (minutes < 10)
minutes = "0" + minutes

var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}

time.innerHTML = "<b>" + hours + ":" + minutes + " " + suffix + "</b>";
&#13;
<div id="time">

</div>
&#13;
&#13;
&#13;

使用time.innerHTML = '...'显示div所在的位置。

关于document.write()

的一些说法
  

Object-Oriented JavaScript - Second Edition :方法document.write()允许您在页面中插入HTML   正在加载页面。您可以使用以下代码:

<p>It is now
    <script>document.write("<em>" + new Date() + "</em>"); </script>
</p> 
     

这与直接在日期中的日期相同   HTML文档如下:

<p>It is now 
    <em>Fri Apr 26 2013 16:55:16 GMT-0700 (PDT)</em> 
</p>
     

请注意,您只能在页面使用时使用document.write()   加载。如果你在页面加载后尝试它,它将替换内容   整个页面。很少需要document.write()和if   你认为你做了,尝试另一种方法。修改方法   DOM Level 1提供的页面内容是首选的   更加灵活。

答案 1 :(得分:0)

这是你的解决方案..你所要做的就是在div id =“time”之后放置document.getElementById()。效果很好。

<html>
<head>
    <script>

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

if (minutes < 10)
minutes = "0" + minutes

var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
    </script>
    </head>
    <body>

        <div id="time" style="position:absolute; bottom:0; right:0;">123
        </div>
    </body>
    <script>
        document.getElementById("time").innerHTML="<b>" + hours + ":" +minutes + " " + suffix + "</b>";
    </script>

</html>

答案 2 :(得分:0)

您声明了var 时间,但您没有使用它。将 time .innerHTML值设置为日期而不是document.write:

time.innerHTML = "<b>"+ hours +":"+ minutes +" "+ suffix +"</b>";

通过这种方式,您可以将div设为id&#34; time&#34;您希望日期显示在页面上的任何地方