本帖最后由 小鲁哥哥 于 2017-9-7 17:16 编辑
【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day05
今天我们继续学习一些dom案例，首先我们先模仿一下微博发布的案例
案例一：发布微博
效果如图所示，我们在点击发布的时候需要获取textarea内的数据，之后动态的添加到下面的ul列表中，ul列表中提供可删除操作。代码如下
[HTML] 纯文本查看 复制代码 <div class="box" id="weibo">
<div>
<div class="title">有什么新鲜事想告诉大家</div>
<div class="num">还可以输入<span>140</span>字</div>
</div>
<div style="clear: both"></div>
<div class="input">
<textarea name="" id="txt" cols="20" rows="10"></textarea>
</div>
<div class="func">
<a id="btn">发布</a>
</div>
<div style="clear: both"></div>
<ul id="ul"></ul>
<div></div>
</div>
[JavaScript] 纯文本查看 复制代码 /*
*@author 传智播客
*/
//需求：用户在文本域中输入内容 点击发布按钮 把文本域中的内容发布到ul中
//1.找人
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var ul = document.getElementById("ul");
//2.点击按钮 把内容放到ul里
btn.onclick = function () {
//3.1先判断 如果用户没有输入内容 就应该提示用户 并且不创建结构
if (txt.value.trim() === "") {
alert("请输入内容");
return;
}
var li = document.createElement("li");
var span = document.createElement("span");
span.innerText = txt.value;
li.appendChild(span);
var lis = ul.children;
if (lis.length === 0) {//说明之前没有内容
ul.appendChild(li);
} else {//说明有内容了
//放到最开始的li的前面
ul.insertBefore(li, lis[0]);
}
//3.2创建结构后 应该清空文本域
txt.value = "";
};
案例二：在线会员列表
效果如图所示，通过这个案例学习的主要内容是通过数据动态创建列表下面是已给的数据
[JavaScript] 纯文本查看 复制代码 var datas = [
{"name": "tdxy01", "icon": "images/noavatar_small.gif"},
{"name": "沉眠楚人", "icon": "images/noavatar_small.gif"},
{"name": "爱上karina", "icon": "images/75_avatar_small.jpg"},
{"name": "tdxy01", "icon": "images/89_avatar_small.jpg"},
{"name": "today", "icon": "images/noavatar_small.gif"},
{"name": "hlg", "icon": "images/noavatar_small.gif"},
{"name": "itcast", "icon": "images/noavatar_small.gif"},
{"name": "heima", "icon": "images/noavatar_small.gif"},
{"name": "huima", "icon": "images/noavatar_small.gif"},
{"name": "gege", "icon": "images/noavatar_small.gif"},
{"name": "nimei", "icon": "images/noavatar_small.gif"},
{"name": "goodman", "icon": "images/noavatar_small.gif"},
{"name": "haoren", "icon": "images/noavatar_small.gif"},
{"name": "yuanxiaojie", "icon": "images/noavatar_small.gif"},
{"name": "zhengyue", "icon": "images/noavatar_small.gif"},
{"name": "qishi", "icon": "images/noavatar_small.gif"},
{"name": "qqtang", "icon": "images/noavatar_small.gif"},
{"name": "wawawa", "icon": "images/noavatar_small.gif"},
{"name": "haha", "icon": "images/noavatar_small.gif"},
{"name": "robot", "icon": "images/noavatar_small.gif"},
{"name": "送终机", "icon": "images/noavatar_small.gif"},
{"name": "lovmilan", "icon": "images/noavatar_small.gif"},
{"name": "johnny670", "icon": "images/noavatar_small.gif"},
{"name": "xiaobinbin02", "icon": "images/noavatar_small.gif"}
];
通过这些数据创建li
[JavaScript] 纯文本查看 复制代码 /*
*@author 传智播客
*/
//需求： 根据数据 动态的创建li
//1.创建ul 放到users里面
var users = document.getElementById("users");
var ul = document.createElement("ul");
users.appendChild(ul);
//2.根据数据 动态的创建li （因为没有太多的功能所以通过拼接字符串的方式创建）
var arr = [];
for (var i = 0; i < datas.length; i++) {
var data = datas;//每一条数据
var str = '<li>' +
'<a href="#" target="_blank">' +
'<img src="' + data.icon + '" width="48" height="48" alt="' + data.name + '">' +
'</a>' +
'<p>' +
'<a href="#" title="' + data.name + '" target="_blank">' + data.name + '</a>' +
'</p>' +
'</li>';
arr.push(str);
}
ul.innerHTML = arr.join("");
案例三：许愿墙加强版
之前我们做过一版许愿墙但是内容是固定死的，这次我们将内容写活
[Java] 纯文本查看 复制代码 /*
*@author 传智播客
*/
var messages = [
{"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
{"id": 2, "name": "haha", "content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"},
{"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
{"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
{"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
{"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。", "time": "2016-02-22 01:30:00"},
{"id": 7, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"},
{"id": 8, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"},
{
"id": 9,
"name": "没猴哥，不春晚",
"content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
"time": "2016-02-22 01:30:00"
}
];
//根据数据动态创建结构
for (var i = 0; i < messages.length; i++) {
var msg = messages;//每一天数据
//最外层的div用对象的方式创建 方便将来绑定事件
//里面的其他代码用拼接字符串的形式 因为这样更简单
var tip = document.createElement("div");
tip.className = "tip1";
tip.id = "cc" + msg.id;
var str = '<div class="tip_h" title="双击关闭纸条">'
+ '<div class="num">第[' + msg.id + ']条 ' + msg.time + '</div>'
+ '<div class="close" title="关闭纸条">×</div>'
+ '<div class="clr"></div>'
+ '</div>'
+ '<div class="tip_c">'
+ msg.content
+ '</div>'
+ '<div class="tip_f">'
+ '<div class="icon">'
+ '<img src="images/bpic_1.gif" alt="" title="">'
+ '</div>'
+ '<div class="name">' + msg.name + '</div>'
+ '<div class="clr"></div>'
+ '</div>';
tip.innerHTML = str;
content.appendChild(tip);//追加到content里
}
Window对象
window.onload 窗体加载完成 页面结构和外部资源都加载完成
//1.地址 2.在哪里打开 3.窗口的属性
window.open("http://www.baidu.com");
window.open("http://www.baidu.com", "_blank");//在新的空白窗口打开
window.open("http://www.baidu.com", "_self");//在当前窗口打开
定时器
[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//设定延时定时器
//延时定时器 setTimeout 参数 1回调函数 2延迟的时间（单位是毫秒）
timerId = setTimeout(function () {
console.log("boom");
}, 3000);
//清除定时器
clearTimeout(timerId);
//设定间歇定时器 setInterval 参数 1回调函数 2时间间隔（单位是毫秒）
timer = setInterval(function () {
console.log("起来嗨");
}, 1000);
//清理定时器
clearInterval(timer);
location对象
window.location.hash//锚点
window.location.host//主机 主机名+端口号
window.location.hostname//主机名
window.location.pathname//路径名
window.location.port//端口
window.location.protocol//协议
window.location.search//一些参数
其他内置对象
navigator.userAgent //可以获取客户端的一些信息
history.forward();//前进
history.back();//后退
screen.width//屏幕宽度
screen.height//屏幕高度
screen.availWidth//屏幕可用宽度
screen.availHeight//屏幕可用高度
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830
|
