基于javascript实现动态显示当前系统时间

JavaScript029

基于javascript实现动态显示当前系统时间,第1张

本文实例讲解了javascript实现动态显示当前系统时间的详细代码,具体内容如下

(1)时间日期信息,应该在一个<div>中来显示

(2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout()

(3)时钟显示的时机(事件):当网页加载完成后才显示,事件onload

(4)如何将

时间日期信息

写入到指定的<div>中,DOM对象中的innerHTML属性

效果图:

具体代码:

<html>

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=gb2312"

/>

<title>无标题文档</title>

<script

type="text/javascript">

//定义函数:构建要显示的时间日期字符串

function

showTime()

{

//创建Date对象

var

today

=

new

Date()

//分别取出年、月、日、时、分、秒

var

year

=

today.getFullYear()

var

month

=

today.getMonth()+1

var

day

=

today.getDate()

var

hours

=

today.getHours()

var

minutes

=

today.getMinutes()

var

seconds

=

today.getSeconds()

//如果是单个数,则前面补0

month

=

month<10

?

"0"+month

:

month

day

=

day

<10

?

"0"+day

:

day

hours

=

hours<10

?

"0"+hours

:

hours

minutes

=

minutes<10

?

"0"+minutes

:

minutes

seconds

=

seconds<10

?

"0"+seconds

:

seconds

//构建要输出的字符串

var

str

=

year+"年"+month+"月"+day+"日

"+hours+":"+minutes+":"+seconds

//获取id=result的对象

var

obj

=

document.getElementById("result")

//将str的内容写入到id=result的<div>中去

obj.innerHTML

=

str

//延时器

window.setTimeout("showTime()",1000)

}

</script>

<style

type="text/css">

#result{

width:500px

border:1px

solid

#CCCCCC

background:#FFFFCC

margin:50px

auto

font-size:24px

color:#FF0000

padding:20px

}

</style>

</head>

<body

onload="showTime()">

<div

id="result"></div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

JSP中实现动态显示系统时间可以使用js来编写,如下代码:

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

    </head>

    当前时间:

<div id="time">

    <script>

        document.getElementById('time').innerHTML = new Date().toLocaleString()

                + ' 星期' + '日一二三四五六'.charAt(new Date().getDay())

        setInterval(

                "document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay())",

                1000)

    </script>

</div>

<body>

</body>

</html>