JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等。
1.功能以及流程
主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过“提交留言”按钮将用户名+留言发布到下方的留言列表区域。
2.页面样式设计
样式很简单,就不上代码了。
3.使用JS实现留言功能
代码:
function getMessage(){
var btn = document.getElementById("btn1"); //绑定发布按钮
var message = document.getElementById("message");
var name = document.getElementById("name");
var nameValue = "";
var messageValue = "";
btn.onclick = function(){
nameValue = name.value || "Lon"; //设置默认值
messageValue = message.value || "http://www.cnblogs.com/lonhon/" ;
var msgList = document.getElementById("messageList");
var msgDiv = document.createElement("div");
msgDiv.className="msg"; //设置留言Div样式
var msgTxt = document.createTextNode(nameValue+"留言:"+messageValue);
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
}
}
function addLoadEvent(func)
{
var oldonload = window.onload; //得到上一个onload事件的函数
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload(); //调用之前覆盖的onload事件的函数
func(); //调用当前事件函数
}
}
}
4.测试,首先不输入内容看是否有返回设置的默认值
这一步OK,返回去看JS中设置的默认值
5.测试,输入内容
总结,这个JS留言板设计的较为简陋,主要是练习JS操纵DOM节点,在本次中即为点击#btn1 下方列表则通过appendChild方法添加新DIV。
26行中,msgList绑定留言列表DIV,然后通过creatElement创建单个msgDiv,写入用户名和留言内容,再通过向父级msgList添加子节点的方式将msgDiv添加到留言列表,即实现了留言发布的功能。
加深了JS中一切皆为对象的理念,这也是面向对象编程的好处吧,能够很好的把控所操作的东西,比如上图中28行,向msgDiv添加css样式。下一步准备模仿腾讯微博的微博发布页面,实现相同的功能并加入新的元素比如时间、头像等。
最新文章
- Wpf之Xaml属性值和特性值(一)
- Yii2 发送邮件
- 利用tween,使用原生js实现模块回弹动画效果
- itextsharp、Aspose.Words、Aspose.Cells联合使用
- C# 邮件发送系统
- 如何优化 Android Studio 启动、编译和运行速度?
- shopnc数据库 批量修改商品价格
- 刷新指定行或区 cell
- 新的表格展示利器 Bootstrap Table
- Node.js初探之GET方式传输
- Loadrunner初学
- 第一次使用cisco packet tracer
- Jenkins环境搭建(5)-与Jmeter完成参数化构建和构建前删除操作
- 配置sudo日志审计
- suricata HTTP关键字
- 两年.net码农总结
- oracle 11g(64位)datebase 安装流程
- Antenna Placement POJ - 3020 (最小边集覆盖)
- 原生js--客户端存储的种类
- 关于Qt跨线程调用IO子类的理解