简单的聊天窗口

Original 2019-03-02 23:45:57 217
abstract:<!DOCTYPE html><html><head> <title>聊天窗口</title> <style type="text/css"> .main{width: 100%;height:700px;} .down{width: 100%;height: 100px;} .l{width: 50

<!DOCTYPE html>

<html>

<head>

<title>聊天窗口</title>

<style type="text/css">

.main{width: 100%;height:700px;}

.down{width: 100%;height: 100px;}

.l{width: 50%;float: left;}

.r{width: 50%;float: right;}

.cent{margin: 0px auto;width: 90%;}

input{width: 80%;}

button{width: 10%}

p{color:#fff;}

</style>

</head>

<body>

<div class="main">

<div class="l"><div class="cent"></div></div>

<div class="r"><div class="cent"><p></p></div></div>

</div>

<div class="down">

<div class="l"><div class="cent"><input type="" name=""><button>提交</button></div></div>

<div class="r"><div class="cent"><input type="" name=""><button>提交</button></div></div>

</div>

<script type="text/javascript">

let li =document.getElementsByTagName('input')[0]

let ri =document.getElementsByTagName('input')[1]

let lb=document.getElementsByTagName('button').item(0)

let rb=document.getElementsByTagName('button').item(1)

console.log(li,ri,lb)

lb.onclick=function(){butt('l')}  

rb.onclick=function(){butt('r')} 

let a,b

function butt(argument) {


if (argument[0]=='l'){

a=li

b=0

}else{

a=ri

b=1

}

let txt=document.createElement('p')

let c=document.getElementsByClassName('main')[0].children[b].children[0]

if (c.childElementCount%2==1){

txt.style.background ='red'

}else{

txt.style.background ='blue'

}

txt.innerHTML=a.value

c.appendChild(txt)

}


</script>

</body>

</html>


Correcting teacher:西门大官人Correction time:2019-03-03 10:38:01
Teacher's summary:js代码尽量写的函数中去,不然会“污染”全局变量。

Release Notes

Popular Entries