留言板JavaScript实现

html代码

<div id="main" class="main"><ul id="content" class="content"><li class="msgContent left">hello?</li><div style="clear: both;"></div><li class="msgContent left">hello</li><div style="clear: both;"></div><li class="msgContent right">hi</li><div style="clear: both;"></div><li class="msgContent left">hehe</li><div style="clear: both;"></div><li class="msgContent left">goodbye</li><div style="clear: both;"></div><li class="msgContent right">。。。。</li><div style="clear: both;"></div><li class="msgContent right">I LOVE YOU</li></ul><textarea id="msg_input" class="msgInput"></textarea><button id="sendbtn" class="sendbtn">发送</button>
</div>

css代码

    * {font-size: 14px;padding: 0;margin: 0;}.main {position: relative;margin: 20px auto;border: 1px solid steelblue;width: 430px;height: 400px;}.msgInput {display: block;width: 406px;height: 60px;margin: 10px auto;}.sendbtn {position: absolute;width: 100px;height: 29px;bottom: 5px;right: 10px;}.content {list-style: none;width: 410px;height: 280px;margin: 5px auto;border: 1px dotted #D1D3D6;overflow-y: scroll;}.msgContent {width: auto;max-width: 250px;height: auto;word-break: break-all;margin: 5px;padding: 3px;border-radius: 5px;}.content .left {float: left;text-align: left;background-color: lightgrey;}.content .right {float: right;text-align: right;background-color: yellowgreen;}.clear {clear: both;}

JS代码

   var oBtn = document.getElementById("sendbtn");var msg = document.getElementById("msg_input");var oCon = document.getElementById("content");oBtn.onclick = function () {var msgVal = msg.value;var li = document.createElement("li");li.innerHTML = msgVal;li.className = "msgContent right";var div = document.createElement("div");div.className = "clear";oCon.appendChild(div);oCon.appendChild(li);msg.value = "";//可见范围看见当前元素li.scrollIntoView()};document.onkeypress = function (e) {var e = e || event;var code = e.keyCode || e.which;if (code == 10) {var msgVal = msg.value;var li = document.createElement("li");li.innerHTML = msgVal;li.className = "msgContent right";var div = document.createElement("div");div.className = "clear";oCon.appendChild(div);oCon.appendChild(li);msg.value = "";//可见范围看见当前元素li.scrollIntoView();}}

留言板JavaScript实现相关推荐

JavaScript网页特效-留言板
留言板是一种可以用来记录.展示文字信息的载体,有比较强的时效性.网站中的留言板功能非常重要,可以实现和用户互动,例如人民网的"领导留言板"."领导留言板"是人民 ...
JavaScript实现留言板
目录 1.案例说明: 2.html部分 3.css部分 4.js代码 5.全部代码 6.效果图: 1.案例说明: 利用JavaScript.css以及html制作一个简易的留言板要求在页面文本框中输 ...
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
JavaScript用事件委托实现留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分效果预览 html部分 <textarea name="text" cols="3 ...
JavaScript之留言板制作
本文主要介绍留言板的制作,用户可对新闻消息进行评论,发表之后评论会被置于顶端,点击相应删除按钮即可删除.本文主要介绍三种方式,区别在于如何实现评论的删除. 1.利用函数局部作用域在函数的局部作用域内 ...
使用JavaScript DOM制作简单留言板
效果图: 先准备html代码: <body><textarea name="" id=""></textarea><b ...
JavaScript留言板效果
1.通过JS的createElement实现留言板效果: 2.源码如下:
使用JavaScript备份QQ空间的留言板数据
内容转载自我的博客文章目录 1. 目标网站 2. 保存浏览器调试窗口的变量到本地文件 3. 编写代码 4. 备份完成 5. 后记 1. 目标网站此代码是专门为了备份本人的QQ空间留言板的数据而编写 ...

留言板JavaScript实现

留言板JavaScript实现相关推荐

最新文章

热门文章