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+="

"+txt.value+"

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;

}

Love

Haha

Wow

Sad

Angry

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

微信公众号订阅号开发的学习（二）：获取用户发送的消息、简单的自动回复、自定义菜单
获取用户发送的消息基础微信服务器会发送两种类型的消息给开发者服务器. get请求验证服务器的有效性 post请求微信服务器会将用户发送的数据转发到开发者服务器上实现基于微信公众号订阅号开发 ...
学校留言板网页html和css,html,css,js,简单的网页留言板
效果如图: 实现代码如下: html代码: 简单的网页留言板简单的网页留言板 index.js代码: ///** // * Created by Administrator on 2014/11/2 ...
如何用html弄出抽奖的网页,用JS实现简单的网页抽奖
我们在上网做问卷调查或投票结束后,时常都会遇到抽奖,不过基本都是假的哈.下面将由简单的js代码来实现一下. 首先思路:1.写出需要的HTML和CSS样式 2.js实现滚动,停止,弹出奖品框.文中所示的 ...
常用网页使用js技巧收集(200多个)经典
常用网页使用js技巧收集(200多个)经典 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 O ...
Selenium--调用js，对话框处理 (python)
前言: 本次教程针对Python语言,selenium教程(调用js,对话框处理) 一.对话框处理更多的时候我们在实际的应用中碰到的并不是简单警告框,而是提供更多功能的会话框. 本节重点: 1.打开 ...
js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
python实现千牛客服自动回复语_淘宝客服自动回复语录(客服自动回复大全)
淘宝客服自动回复语录(客服自动回复大全) 2020-12-05 09:42:32 共7个回答谁能帮我弄下淘宝的自动回复.就是第一次收到买家信息自动回复什么语句比较好.我离开时回复什么语句比较好鼠标 ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...

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

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

最新文章

热门文章