本帖最后由 小鲁哥哥 于 2017-9-7 11:15 编辑
【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day04
今天我们主要是根据前三天的知识点做一些整合做几个小Demo。
案例一：许愿墙
效果如图所示，我们需要许愿墙具有层级关系出现层叠效果，还要具有双击纸条顶部可关闭的功能，下一节我们再讲纸条可移动的功能。
首先我们需要根据墙外的纸条进行复制，代码如下：（因代码较多，这里只粘贴核心代码，附近会上传具体的代码）
[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var content = document.getElementById("content");
var tip = document.getElementById("cc");//纸条
for (var i = 0; i < 10; i++) {
var cloneTip = tip.cloneNode(true);//克隆出来的节点
cloneTip.id = "cc" + i;
content.appendChild(cloneTip);//将克隆出来的纸条添加到内容区域
}[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
for (var i = 0; i < 10; i++) {
var cloneTip = tip.cloneNode(true);//克隆出来的节点
cloneTip.id = "cc" + i;
content.appendChild(cloneTip);
//设置位置
//400-800 [0,1) * 400 [0,400) + 400 [400,800)
var x = parseInt(Math.random() * 400 + 400);
//0-400 [0,1) * 400 [0,400)
var y = parseInt(Math.random() * 400);
//控制cloneTip的样式
cloneTip.style.left = x + "px";
cloneTip.style.top = y + "px";
//层级
cloneTip.onclick = function () {
zIndex++;
this.style.zIndex = zIndex;
};
}[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//双击头部关闭纸条
//firstElementChild 第一个子元素
var header = cloneTip.firstElementChild;
header.ondblclick = function () {
//this.parentNode.style.display = "none";
content.removeChild(this.parentNode);
};[JavaScript] 纯文本查看 复制代码 /*
*@author 传智播客
*/
//获取第一个子元素的兼容函数
function getFirstElement(element) {
if (element.firstElementChild) {//判断element有无firstElementChild属性
return element.firstElementChild;
} else {
var node = element.firstChild;//第一个子节点
while (node && node.nodeType !== 1) {//当节点是元素节点时
node = node.nextSibling;
}
return node;
}
}动态创建页面结构 document.write()：只能把也没上所有的东西都顶掉 [JavaScript] 纯文本查看 复制代码 <script>
/**
*@author 传智播客
*/
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
var start = +new Date();
for (var i = 0; i < 1000; i++) {
box.innerHTML += "<ul><li>111</li></ul>";
}
var end = +new Date();
console.log(end - start);
};
</script>但是这样做比较浪费内存，因为在for循环里面执行添加操作会一遍遍的渲染HTML页面，所以建议不要这么写，我们可以在for循环里面将内容先拼接出来之后再添加到页面上 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
var start = +new Date();
var arr = [];
for (var i = 0; i < 1000; i++) {
arr.push("<ul><li>111</li></ul>");
//1拼接字符串
}
box.innerHTML = arr.join("");
//2把字符串变成DOM对象
//3把DOM对象挂在DOM树上
//4还要渲染
var end = +new Date();
console.log(end - start);
};
</script>下面我们动态的创建一个列表首先是HTML代码： [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传智播客</title>
<style>
.cls {
list-style: none;
width: 150px;
margin: 0;
padding: 0;
background-color: yellowgreen;
text-align: center;
}
</style>
</head>
<body>
<input type="button" id="btn" value="创建"/>
<div id="box"></div>
</body>
</html>下面是js代码 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var phones = ["小米", "华为", "中兴", "苹果", "三星", "魅族"];
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
//一进来先检测 如果页面上已经有了 就返回 没有才追加
var ul = document.getElementById("u");
//如果有 是对象 如果没有 是null
if (ul) {
//如果能进来说明有了 就不再重复创建了
return;
}
ul = document.createElement("ul");
ul.id = "u";
ul.className = "cls";
box.appendChild(ul);
//创建li并追加到ul中
for (var i = 0; i < phones.length; i++) {
var phone = phones;//每个品牌
var li = document.createElement("li");
li.innerHTML = phone;
ul.appendChild(li);
}
};
| 
收藏
淘帖
踩
