简单的聊天框
1.源代码：
<body>
<div class="beijing">
<div class="dingbu"><i></i></div>
<div class="neishe" id="nvhai">
</div>
<div class="wenben">
<button class="t1" id="qiehuan">boy</button>
<input type="text" class="t3" id="shuru">
<button class="t2" id="fasong">┗( ▔, ▔ )┛发送</button>
</div>
</div>
<script src="js.js"> </script>
</body>
2.css样式
*{
margin: 0;
padding: 0;
user-select: none;
outline: none;
}
.beijing{
width: 700px;
height: 625px;
margin: 30px auto 0;
background-color: #1B629A;
}
.beijing .dingbu{
width: 100%;
height: 30px;
}
.dingbu i{
display: block;
width: 20px;
height: 20px;
margin: 0px 0px 0px 357px;
border-radius: 32px;
background-color:#000000;
}
.neishe{
width: 600px;
height: 534px;
margin: 0px 0px 0px 50px ;
background: url("聊天stem/屏幕截图 2021-03-10 152611.png") no-repeat;
background-size: 621px;
}
.wenben{
margin: 10px 0px 0px 50px ;
width: 600px;
height: 50px;
}
.wenben .t1{
width: 50px;
height: 40px;
border-radius:50px;
background-color: darkseagreen;
}
.wenben .t3{
width: 450px;
height: 40px;
font-size: 20px;
background-color: aqua;
}
.wenben .t2{
height: 40px;
border-radius: 21px 21px 0px 0px;
background-color: blueviolet;
}
.neishe div{
clear: both;
display:block;
padding: 10px 50px ;
margin: 11px 12px ;
background-color: cadetblue;
border-radius: 25px;
}
3.Js代码
window.οnlοad=function(){
var a=document.getElementById("qiehuan");
var b=document.getElementById("shuru");
var c=document.getElementById("fasong");
var d=document.getElementById("nvhai")
a.οnclick=function(){
if(a.innerText=="boy"){
a.innerText="gril"
}else{
a.innerText="boy"
}
}
c.οnclick=function(){
if(a.innerText=="boy"&&b.value!==""){
var d=document.getElementById("nvhai");
var div=null;
div=document.createElement("div");
div.innerText=b.value;
d.appendChild(div);
div.style.float="left";
b.value="";
}else if(a.innerText=="gril"&&b.value!==""){
var d=document.getElementById("nvhai");
var div=null;
div=document.createElement("div");
div.innerText=b.value;
d.appendChild(div);
div.style.float="right"
b.value="";
}else{
return false;
}
if(d.childElementCount>7){
var e=document.getElementById("nvhai").firstChild;
d.removeChild(e);//删除元素节点
}
}
}
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
