html网页自动回复,js 简单对话框（自动回复）

效果展示

Html代码

js代码

var btn=document.querySelector(".btn");

var txt=document.querySelector(".text");

var con=document.querySelector(".con")

btn.οnclick=function(){

if(!txt.value){

return;

}

var dd=document.createElement("div");

dd.innerHTML+="

con.appendChild(dd);

txt.value="";

setTimeout(function(){

var dd=document.createElement("div");

dd.innerHTML+="

con.appendChild(dd);

},2000)

}

css代码

.wrap{

width: 500px;

height: 600px;

margin: 0 auto;

}

.con{

width: 458px;

height: 458px;

overflow: auto;

background-color: #eee;

padding: 20px;

border: 1px solid #ccc;

border-radius: 10px 10px 0 0;

}

.send{

width: 498px;

height: 100px;

background-color: #eee;

border: 1px solid #ccc;

}

.send .text{

width: 300px;

height: 50px;

padding-left: 20px;

font-size: 20px;

outline: none;

border-radius: 10px;

border: 1px solid #ddd;

margin: 25px 20px;

}

.send .btn{

width: 100px;

height: 50px;

border: 1px solid #ddd;

color: white;

background-color: #111;

border-radius: 5px;

}

.con>div{

width: 100%;

overflow: hidden;

margin-bottom: 10px;

}

.right{

float: right;

padding:5px 20px;

background-color: lightskyblue;

border-radius: 5px;

}

.left{

float: left;

padding:5px 20px;

border-radius: 5px;

background-color: lightskyblue;

}

Like

Like

Love

Haha

Wow

Sad

Angry