信鸽网

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

  作者：bea

本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下 （1）时间日期信息，应该在一个<div>中来显示 （2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout() （3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload （4）如何将 时间日期信息 写入到指定的<div>中，DOM对象中的innerHTML属性 效果图： 具体代码： <html><

本文实例讲解了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: