javascript用表格显示时间问题

womeiyouliyou 2009-11-01 08:25:24
如呵用javascript代码把系统的时间用一个1行8列的表格给显示出来
如：




当前时间是：2009年 11月 1日 星期日 20时 20分 30秒





这些都是在表格里面显示的
一格显示一个

是一个一行八列的表格

谢谢大家给个源码
...全文
144 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
huing 2009-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 wcwtitxu 的回复:]
HTML code<tableborder="1" id="tab"><tr><td>当前时间是：</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><scriptlanguage="javascript">
Array.prototype.forEach=function(action,?-
[/Quote]

这个不错哈
浴火_凤凰 2009-11-05
  • 打赏
  • 举报
 回复
为什么要使用表格呢？多了一些无用的代码。
8楼的方法很独特，建议楼主研究一下
lijinmian 2009-11-04
  • 打赏
  • 举报
 回复
顶二楼的
wldzjj 2009-11-02
  • 打赏
  • 举报
 回复
这样写就不用在判断是星期几了 又简单了点
<script>

var today = new Date();

var arr=["日","一","二","三","四","五","六"];

var year=today.getYear();

var month=today.getMonth();

var date=today.getDate();

var day=today.getDay();

var hour =today.getHours();

var minutes=today.getMinutes();

var seconds=today.getSeconds();



document.getElementById("year").innerHTML=year+"年";

document.getElementById("month").innerHTML=month+1+"月";

document.getElementById("date").innerHTML="星期"+arr[day];

document.getElementById("day").innerHTML=day;



document.getElementById("hour").innerHTML=hour+"时";

document.getElementById("minutes").innerHTML=minutes+"分";

document.getElementById("seconds").innerHTML=seconds+"秒";



</script>

<table border=1>

    <tr>

        <td id="year">

        </td>

        <td id="month">

        </td>

        <td id="date">

        </td>

        <td id="day">

        </td>

        <td id="hour">

        </td>

        <td id="minutes">

        </td>

        <td id="seconds">

        </td>

    </tr>

</table>
xiaofan_sap 2009-11-02
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 develop_design_level 的回复:]
引用 2 楼 spllot 的回复:
HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <METANAME="Generator" CONTENT="EditPlus"> <METANAME="Author" CONTENT=""> <METANAME="Keyword¡­


2 楼应该添加一个 setInterval() 函数，这样这个代码才能动起来。
代码如下：
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><scripttype="text/javascript">/**
* author: develop_design_level
* date: 2009-11-02
* @param {Object} id*/function $(id){if (document.getElementById) {return document.getElementById(id);
}else {return document.all.id;
}
}

window.onload=function(){
window.setInterval('getTodayTime()',1000);//这里设置动态显示 };function getTodayTime(){var today=new Date();
$('yearId').innerHTML= today.getFullYear()+'年';
$('monthId').innerHTML= (today.getMonth()+1)+'月';
$('dateId').innerHTML= today.getDate()+'日';var day= today.getDay();var __day='';switch(day){case0:
__day='星期日';break;case1:
__day='星期一';break;case2:
__day='星期二';break;case3:
__day='星期三';break;case4:
__day='星期四';break;case5:
__day='星期五';break;case6:
__day='星期六';break;
}if (__day!='') {
$('weekId').innerHTML= __day;
}
$('hourId').innerHTML= today.getHours()+'时';
$('minuteId').innerHTML= today.getMinutes()+'分';
$('secondId').innerHTML= today.getSeconds()+'秒';
}</script></head><body><tablewidth="500" border="1"><tr><td>当前时间是：</td><tdid="yearId"> </td><tdid="monthId"> </td><tdid="dateId"> </td><tdid="weekId"> </td><tdid="hourId"> </td><tdid="minuteId"> </td><tdid="secondId"> </td></tr></table></body></html>
=== 结贴，给分 ===
得到满意的答案，立即结贴给分，是一种良好的习惯和美德
[/Quote]

正解
zhangguifeng123 2009-11-02
  • 打赏
  • 举报
 回复
参照4楼的办法
develop_design_level 2009-11-02
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 spllot 的回复:]
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document</TITLE><METANAME="Generator" CONTENT="EditPlus"><METANAME="Author" CONTENT=""><METANAME="Keyword¡­
[/Quote]

2 楼应该添加一个 setInterval() 函数，这样这个代码才能动起来。
代码如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

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

        <title>Untitled Document</title>

        <script type="text/javascript">

            /**

             * author: develop_design_level

             * date: 2009-11-02

             * @param {Object} id

             */

            function $(id){

                if (document.getElementById) {

                    return document.getElementById(id);

                }

                else {

                    return document.all.id;

                }

            }

            

			window.onload = function(){

				window.setInterval('getTodayTime()',1000);//这里设置动态显示

			};

			

			function getTodayTime(){

				var today = new Date();

				$('yearId').innerHTML = today.getFullYear() + '年';

				$('monthId').innerHTML = (today.getMonth() + 1) + '月';

				$('dateId').innerHTML = today.getDate() + '日';

				

				var day = today.getDay();

				var __day = '';

				switch(day){

					case 0:

						__day = '星期日';

					break;

					case 1:

						__day = '星期一';

					break;

					case 2:

						__day = '星期二';

					break;

					case 3:

						__day = '星期三';

					break;

					case 4:

						__day = '星期四';

					break;

					case 5:

						__day = '星期五';

					break;

					case 6:

						__day = '星期六';

					break;

				}

				if (__day != '') {

					$('weekId').innerHTML = __day;

				}

				$('hourId').innerHTML = today.getHours() + '时';

				$('minuteId').innerHTML = today.getMinutes() + '分';

				$('secondId').innerHTML = today.getSeconds() + '秒';				

			}

        </script>

    </head>

    <body>

        <table width="500" border="1">

            <tr>

                <td>当前时间是：

                </td>

                <td id="yearId"> 

                </td>

                <td id="monthId"> 

                </td>

                <td id="dateId"> 

                </td>

                <td id="weekId"> 

                </td>

                <td id="hourId"> 

                </td>

                <td id="minuteId"> 

                </td>

                <td id="secondId"> 

                </td>

            </tr>

        </table>

    </body>

</html>

=== 结贴，给分 ===
得到满意的答案，立即结贴给分，是一种良好的习惯和美德
sumjor 2009-11-02
  • 打赏
  • 举报
 回复
参照2楼的办法
spllot 2009-11-02
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script type="text/javascript">

  window.onload=function()

  {

    var myDate=new Date();

	var year=myDate.getYear();

	var month=myDate.getMonth();

	var date=myDate.getDate();

	var day=myDate.getDay(); 

	var hour =myDate.getHours();

	var minutes=myDate.getMinutes();

	var seconds=myDate.getSeconds();

	if(day==1)

	{

	   day="星期一";

	}

	if(day==2)

	{

	   day="星期二";

	}

	if(day==3)

	{

	   day="星期三";

	}

	if(day==4)

	{

	   day="星期四";

	}

	if(day==5)

	{

	   day="星期五";

	}if(day==6)

	{

	   day="星期六";

	}

	if(day==0)

	{

	   day="星期日";

	}

	document.getElementById("year").innerHTML=year+"年";

	document.getElementById("month").innerHTML=month+1+"月";

	document.getElementById("date").innerHTML=date+"日";

	document.getElementById("day").innerHTML=day;

	

	document.getElementById("hour").innerHTML=hour+"时";

	document.getElementById("minutes").innerHTML=minutes+"分";

	document.getElementById("seconds").innerHTML=seconds+"秒";

	}

  </script>

 </HEAD>



 <BODY>

  <table border=1>

	<tr>

		<td id="year">

		</td>

		<td id="month">

		</td>

		<td id="date">

		</td>

		<td id="day">

		</td>

		<td id="hour">

		</td>

		<td id="minutes">

		</td>

		<td id="seconds">

		</td>

		</tr>

  </table>

 </BODY>

</HTML>
床上等您 2009-11-02
  • 打赏
  • 举报
 回复
那不是很简单吗？？得到当前时间，把每一个单位提出来，在某一格里显示就行了
wcwtitxu 2009-11-02
  • 打赏
  • 举报
 回复 
<table border="1" id="tab">

    <tr>

	<td>当前时间是：</td>

	<td></td> <td></td> <td></td>

	<td></td>

	<td></td> <td></td> <td></td>

    </tr>

</table>





<script language="javascript">

Array.prototype.forEach = function(action, thisObject) {

	for (var i=0; i<this.length; i++)

		action.call(thisObject, this[i], i, this);

	return this;

};



(function() {

	var cells = [];

	cells.forEach.call(document.getElementById("tab").rows[0].cells, function(cell, i) { if (i>0) cells.push(cell); });

	function values() {

		var now = new Date();

		return [

			now.getFullYear()+"年",    now.getMonth()+1+"月",    now.getDate()+"日",

			"星期" + "日一二三四五六".charAt(now.getDay()),

			now.getHours()+"时",        now.getMinutes()+"分",    now.getSeconds()+"秒"

		];

	}

	(function() {

		var vs = values();

		cells.forEach(function(cell, i) { cell.innerHTML = vs[i]; });

		setTimeout(arguments.callee, 1000);

	})();

})();

</script>
JavaScript多行文本一行显示，点击可显示单元格全部内容的Table
目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中； 2、引入包AutoTableSize....
《程序天下：JavaScript实例自学手册》光盘源码
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
JavaScript网页特效范例宝典源码
实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 181 实例116 显示用户在页面的停留时间 182 实例117 显示最后修改时间 183 4.2 日期时间算法 184 实例118 计算某一天是星期几 184 实例119 判断指定...
《JavaScript实例精通》[源代码]
5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章（\6） 示例描述：JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章