仿班級聊天室（DOM原型法）並且用localStorage儲存訊息記錄
第一部分：CSS程式碼
* {
margin: 0px;
padding: 0px;
}
#main {
width: 600px;
height: 500px;
margin: 0px auto;
border: 2px solid #BABABA;
background-color: #F3F3F3;
}
#head {
height: 48px;
border-bottom: 1px solid #BABABA;
}
#head img {
vertical-align: middle;
margin-left: 10px;
}
#head strong {
color: #212E41;
margin-left: 5px;
}
#head span {
background-color: #FFBC02;
color: white;
cursor: pointer;
float: right;
font-family: "微軟雅黑";
font-size: 20px;
width: 20px;
height: 25px;
text-align: center;
margin-top: 10px;
margin-right: 10px;
}
#top {
height: 310px;
border: 0px solid;
overflow-y: auto;
background-color: white;
}
#footer {
margin-top: 10px;
height: 130px;
border: 0px solid;
}
#footer input {
width: 80px;
height: 25px;
background-color: #FF9E08;
border: none;
border-radius: 5px;
color: white;
font-size: 14px;
cursor: pointer;
float: right;
margin-right: 5px;
}
.fl img {
float: left;
height: 40px;
border-radius: 20px;
border: 1px solid #FF9E08;
}
.fl strong {
float: left;
margin-top: 10px;
margin-left: 10px;
color: #808080;
}
.fl span {
float: left;
margin-top: 12px;
margin-left: 10px;
color: #9E9E9E;
}
.fl div {
clear: left;
float: left;
background-color: #C1C1C1;
margin-top: 10px;
border-radius: 10px;
font-size: 15px;
padding: 10px;
margin-left: 20px;
word-break: break-all;
}
.fl div:hover {
clear: left;
float: left;
background-color: khaki;
margin-top: 10px;
border-radius: 10px;
font-size: 15px;
padding: 10px;
margin-left: 20px;
word-break: break-all;
}
.fr img {
float: right;
width: 45px;
border-radius: 20px;
border: 1px solid #FF9E08;
}
.fr strong {
float: right;
margin-top: 10px;
margin-right: 10px;
color: #808080;
}
.fr span {
float: right;
margin-top: 12px;
margin-right: 10px;
color: #9E9E9E;
}
.fr div {
clear: right;
float: right;
background-color: lightskyblue;
margin-top: 10px;
font-size: 15px;
border-radius: 10px;
padding: 10px;
margin-right: 20px;
word-break: break-all;
}
.fr div:hover {
clear: right;
float: right;
background-color: darksalmon;
margin-top: 10px;
font-size: 15px;
border-radius: 10px;
padding: 10px;
margin-right: 20px;
word-break: break-all;
}
.fl {
float: left;
margin-left: 10px;
margin-top: 30px;
width: 500px;
font-family: "微軟雅黑";
}
.fr {
float: right;
margin-right: 10px;
margin-top: 30px;
width: 500px;
font-family: "微軟雅黑";
}
#txtare {
width: 598px;
height: 100px;
border-radius: 5px;
}
#sec {
border-radius: 5px;
border: 1px solid #FF9E08;
}
第二部分：HTML程式碼
<div id="main">
<div id="head">
<img src="img/bookNo1.gif" />
<strong>南開創元交流群</strong>
<span onclick="closed()">X</span>
</div>
<div id="top">
</div>
<div id="footer">
<textarea value="" id="txtare"></textarea> 暱稱：
<select id="sec">
<option value="所有人">所有人</option>
<option value="魏廣辰">魏廣辰</option>
<option value="李錦" selected="selected">李錦</option>
<option value="崔雨鬆">崔雨鬆</option>
<option value="劉鎰波">劉鎰波</option>
<option value="孫興強">孫興強</option>
<option value="李強">李強</option>
<option value="張亞強">張亞強</option>
<option value="柴林">柴林</option>
<option value="秦濤">秦濤</option>
<option value="嚴玉飛">嚴玉飛</option>
<option value="王寶珠">王寶珠</option>
<option value="呂文基">呂文基</option>
<option value="李瑞剛">李瑞剛</option>
<option value="翟羽佳">翟羽佳</option>
<option value="趙常敬">趙常敬</option>
<option value="高晨 ">高晨 </option>
<option value="劉敏">劉敏</option>
<option value="李博楠">李博楠</option>
<option value="黎幸明">黎幸明</option>
<option value="於雙雙">於雙雙</option>
<option value="華作森">華作森</option>
<option value="王志">王志</option>
<option value="李豔豔">李豔豔</option>
<option value="鄭明峰">鄭明峰</option>
<option value="仝亞凡">仝亞凡</option>
</select>
<input type="button" onclick="send()" value="傳送" />
</div>
</div>
第三部分：JS程式碼
<script type="text/javascript">
var index = 0;
var myimage;
window.onload=function(){
var topdiv = document.getElementById("top");
topdiv.innerHTML="";
var arr=JSON.parse(localStorage.xinxi);
for (var i = 0; i < arr.length; i++) {
var div1 = document.createElement("div");
div1.id = "div" + index++;
topdiv.appendChild(div1);
var ran = parseInt(Math.random() * 10000) % 2;
div1.className = ran == 0 ? "fl" : "fr";
var img = document.createElement("img");
div1.appendChild(img);
var r = parseInt(Math.random() * 10000) % 6 + 1;
img.src =arr[i].image;
var strong = document.createElement("strong");
div1.appendChild(strong);
strong.innerHTML = arr[i].name;
var span = document.createElement("span");
div1.appendChild(span);
span.innerHTML =arr[i].time;
var div2 = document.createElement("div");
div1.appendChild(div2);
div2.innerHTML =arr[i].neirong;
topdiv.scrollTop = topdiv.scrollHeight;
}
};
function send() {
var sec = document.getElementById("sec").value;
var textare = document.getElementById("txtare").value;
textare = mystring(textare);
var topdiv = document.getElementById("top");
var t = time();
var div1 = document.createElement("div");
div1.id = "div" + index++;
topdiv.appendChild(div1);
var ran = parseInt(Math.random() * 10000) % 2;
div1.className = ran == 0 ? "fl" : "fr";
var img = document.createElement("img");
div1.appendChild(img);
var r = parseInt(Math.random() * 10000) % 6 + 1;
img.src = "img/" + r + ".jpg";
myimage = img.src;
myimage=myimage.substring(myimage.indexOf("i"),myimage.length);
var strong = document.createElement("strong");
div1.appendChild(strong);
strong.innerHTML = sec;
var span = document.createElement("span");
div1.appendChild(span);
span.innerHTML = t;
var div2 = document.createElement("div");
div1.appendChild(div2);
div2.innerHTML = textare;
topdiv.scrollTop = topdiv.scrollHeight;
if(localStorage.xinxi) {
var arr = JSON.parse(localStorage.xinxi);
arr.push(add());
localStorage.xinxi = JSON.stringify(arr);
} else {
var arr = [add()];
localStorage.xinxi = JSON.stringify(arr);
}
}
function add() {
var xm = document.getElementById("sec").value;
var sj = time();
var nr = document.getElementById("txtare").value;
return {
name: xm,
image: myimage,
time: sj,
neirong: nr,
};
}
function closed() {
document.getElementById("main").style.display = "none";
}
function time() {
var t = new Date();
var n = t.getFullYear();
var y = bianhuan(t.getMonth() + 1);
var r = bianhuan(t.getDate());
var s = bianhuan(t.getHours());
var f = bianhuan(t.getMinutes());
var m = bianhuan(t.getSeconds());
var time = n + "-" + y + "-" + r + " " + s + ":" + f + ":" + m;
return time;
}
function bianhuan(v) {
v = v < 10 ? "0" + v : v;
return v;
}
function mystring(str) {
var ret = str;
while(ret.indexOf(">") >= 0 || ret.indexOf("<") >= 0) {
ret = ret.replace("<", "<").replace(">", ">");
}
return ret;
}
</script>
第四部分：效果圖
