abstrak：<!DOCTYPE html> <html> <head> <title>text DOM聊天窗口</title> <style type="text/css"> .msg { width: 500px; margin: 10p
<!DOCTYPE html>
<html>
<head>
<title>text DOM聊天窗口</title>
<style type="text/css">
.msg {
width: 500px;
margin: 10px auto;
}
.msgbox {
width: 100%;
height: 500px;
background-color: lightpink;
box-shadow: 2px 2px 2px #ed4040;
word-wrap:break-word;
overflow-y:scroll; //超出高度出現(xiàn)滾動(dòng)條
}
.msgbox textarea{
resize: none;
width: 100%;
height: 500px;
}
.inputform{
margin: 10px 1px;
width: 100%;
height: 200px;
}
.inputform input[type="text"] {
width: 70%;
height: 40px;
margin-right: 1px;
background-color: lightblue;
}
.inputform input[type="button"] {
width: 29%;
height: 40px;
}
li {list-style: none;}
</style>
</head>
<body>
<div class="msg">
<div class="msgbox">
<!-- <textarea name="text"></textarea> -->
<ul class="msgbox_ul">
<li></li>
</ul>
</div>
<div class="inputform"><input type="text" name="msg" value="" maxlength="50" placeholder="請(qǐng)輸入消息"><input type="button" name="" value="發(fā)送" class="btn"></div>
</div>
<script type="text/javascript">
// let ty = document.head
// ty.getElementsByTagName('title')[0].innerHTML="hahahah"
// console.log(ty)
// let dc = document.childNodes[1].childNodes[1]
// console.log(dc)
//獲得操作元素。let是聲明塊級(jí)變量。
let ul = document.getElementsByTagName('ul')[0];
// console.log(msgboxul);
let msg = document.getElementsByName('msg')[0];
let btn = document.getElementsByClassName('btn')[0];
let num = 0;
//當(dāng)點(diǎn)擊觸發(fā)函數(shù)
btn.onclick=function () {
//判斷有沒(méi)有內(nèi)容 ===是全等于包括數(shù)據(jù)類型都做比較
if (msg.value.length===0){
msg.style.backgroundColor="red"; //沒(méi)有內(nèi)容 輸入框變紅
return false; //返回停止向下執(zhí)行
}
let comment = msg.value;
let lis = document.createElement('li');
let intext = "<img src='static/images/a.png' width='20px'>" +comment;
lis.innerHTML=intext;
ul.appendChild(lis); //向父元素的內(nèi)的尾部插入元素
msg.value=""; //設(shè)置空
msg.focus(); //獲得焦點(diǎn)
num+=1; //計(jì)數(shù)器+1 用于清空內(nèi)容
// 計(jì)時(shí)器函數(shù) 執(zhí)行一次， 2個(gè)參數(shù)，第一個(gè)需要執(zhí)行的函數(shù)，第二參數(shù)是等待多少毫秒執(zhí)行第一個(gè)參數(shù)
setTimeout(function(){
let remsg=[
"能加下我微信嗎？",
"我的微信號(hào)是403927274",
"你會(huì)javascript嗎？我們要招聘會(huì)JS的程序員!"
];
let rom = Math.floor(Math.random()*3);
let lis1 = document.createElement('li');
lis1.innerHTML="<span style='color:#ed4040;'>"+remsg[rom]+"</span>"
ul.appendChild(lis1);
}, 2000);
if(num>10){
let last = ul.lastChild; //清空前獲得最后一個(gè)元素
ul.innerHTML=""; //清空
ul.appendChild(last); // 將最后一個(gè)元素追加上去。
num=0; //初始化
}
}
msg.onclick=function(){
this.style.backgroundColor="lightblue"; //還原輸入框背景
}
</script>
</body>
</html>
Guru membetulkan：查無(wú)此人Masa pembetulan：2019-05-05 09:38:58
Rumusan guru：完成的不錯(cuò)。常用的css樣式，可以寫到一個(gè)公用文件里，隨時(shí)可以使用。繼續(xù)加油。