第三章 簡易留言板

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}</style>
<body><h1>我的心情塗鴉牆</h1></body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用javascript制作留言版</title>
<script language="javascript">
function mySubmit()
{
var myMessage = document.getElementById("myMessage");
var mybr = document.createElement("br");
var myTable = document.createElement("table");
myTable.className="myTable";
var myTitleTr = myTable.insertRow(-1);
myTitleTr.className="myTitleTr";
var myTitleTd = myTitleTr.insertCell(-1);
myTitleTd.innerHTML = document.getElementById("myTitle").value;
var myContentTr = myTable.insertRow(-1);
var myContentTd = myContentTr.insertCell(-1);
myContentTd.innerHTML = document.getElementById("myContent").value; document.getElementById("myTitle").value = "";
document.getElementById("myContent").value = "";
myMessage.appendChild(mybr);
myMessage.appendChild(myTable);
}
var day_list = ['日', '一', '二', '三', '四', '五', '六'];
var date = new Date();
var day = date.getDay(); // or "new Date().getDay()";
document.write('Today is 星期' + day_list[day])
function ShowTime(){
var NowDate=new Date();
var h=NowDate.getHours();
var m=NowDate.getMinutes();
var s=NowDate.getSeconds();
document.getElementById('showbox').innerHTML = h+'時'+m+'分'+s+'秒';
setTimeout('ShowTime()',1000);
}
</script>
<body onload="ShowTime()">
<div id="showbox"></div>
</body>
<style type="text/css">
<!--
body{background-color=87cefal;}
.myTable{ border:1px solid blue; width:430px; font-size:12px; } .myTitleTr{ background-color:yellow; font-weight:bold; color:blue
; } -->
</style>
</head>
<body>
<form>
<table>
<tr>
<td width="316">暱稱; <input type="text" id="myTitle" size="20" />
</td>
<td width="55">
<input name="button" type="button" onClick="mySubmit();" value="留言" />
</td>
</tr>
</tr>
<tr>
<td colspan="2">
<textarea id="myContent" cols="50" rows="10"></textarea>
</td>
</tr>
</table>
<div id="myMessage"></div>
</form>
</body>
</html>