多敲敲敲,好想要个键盘,能敲烂的内种,最近还刚好61和618,好纠结呐。还有想学网络,下了计算机网络自顶向下的电子书,打算看来着,有需要的可以找我要哦~ 害,还是来贴DOM学习的笔记。这里有两个案例,一个是提取缩略语、链接之类的用列表或表格展示出来,还有一些用DOM操作的样式;另一个是动画版的图片库,有点像banner。
/**
* 把快捷键提出来,保存到表格中,表格设置隔行颜色效果
*/
function getAccessKey(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var acclist = document.getElementById("acclist");
var alinks = acclist.getElementsByTagName("a");
var acc_arr = Array();
for(var i = 0; i < alinks.length; i++){
var ak = alinks[i].getAttribute("accessKey");
if(!ak) continue;
var txt = alinks[i].firstChild.nodeValue;
acc_arr[ak] = txt;
}
return acc_arr;
}
function createTable(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(getAccessKey().length < 1) return false;
var acc_arr = getAccessKey();
var table = document.createElement("table");
var caption = document.createElement("caption");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var h_tr = document.createElement("tr");
var h_th1 = document.createElement("th");
var h_th2 = document.createElement("th");
caption.appendChild(document.createTextNode("快捷键清单"));
h_th1.appendChild(document.createTextNode("快捷键"));
h_th2.appendChild(document.createTextNode("名称"));
h_tr.appendChild(h_th1);
h_tr.appendChild(h_th2);
thead.appendChild(h_tr);
for(key in acc_arr){
var b_tr = document.createElement("tr");
var b_td1 = document.createElement("td");
var b_td2 = document.createElement("td");
b_td1.appendChild(document.createTextNode(key));
b_td2.appendChild(document.createTextNode(acc_arr[key]));
b_tr.appendChild(b_td1);
b_tr.appendChild(b_td2);
tbody.appendChild(b_tr);
}
table.appendChild(caption);
table.appendChild(thead);
table.appendChild(tbody);
var acclist = document.getElementById("acclist");
insertAfter(table, acclist);
}
//设置表格隔行样式
function stripeTables(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
if(tables.length < 1)return false;
var odd, rows;
for(var i = 0; i < tables.length; i++){
add = false;
rows = tables[i].getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++){
if(odd == true){
// rows[j].style.backgroundColor = "#ffc";
addClass(rows[j], "odd");
odd = false;
}else{
odd = true;
}
}
}
}
//设置表格响应事件
function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++){
rows[i].onmouseover = function(){
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function(){
this.style.fontWeight = "normal";
}
}
}
//为每个后一个元素添加className样式
function changeAfterH5CSS(tag, clasName){
if(!document.getElementsByTagName) return false;
var h5s = document.getElementsByTagName(tag);
for(var i = 0; i < h5s.length; i++){
var elem = getNextElement(h5s[i].nextSibling);
if(elem){
addClass(elem, clasName);
}
}
}
addLoadEvent(createTable);
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(changeAfterH5CSS("h5", "special"));
util.js文件
//文档加载完时立即执行函数,给window.onload添加函数
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;//若window.onload事件还没添加函数,就直接添加函数
}else{
window.onload = function(){
oldonload();
func();
}
}
}
//向后插入元素
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
//DOM检索下一个元素节点
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){//若有下个兄弟节点,递归下个兄弟节点是否为元素结点
return getNextElement(node.nextSibling);
}
return null;//不是元素,且没有下个节点
}
//添加class属性
function addClass(element, value){
if(!element.className){
element.className = value;
}else{
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
//动画:移动元素
function moveElement(elementId, final_x, final_y, interval){
if(!document.getElementById) return false;
var elem = document.getElementById(elementId);
if(!elem) return false;
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y) return true;
if(xpos < final_x){
xpos++;
}
if(xpos > final_x){
xpos--;
}
if(ypos < final_y){
ypos++;
}
if(ypos > final_y){
ypos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat, interval);
}
table.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<h5>网页快捷键</h5>
<span>Home</span>
<span>Back</span>
<span>等等</span>
<h5>网页快捷键</h5>
<i>Home</i>
<span>Back</span>
<span>等等</span>
<h5>网页快捷键</h5>
<em>Home</em>
<span>Back</span>
<span>等等</span>
<ul id="acclist">
<li><a href="#" accesskey="1">Home</a></li>
<li><a href="#" accesskey="2">Back</a></li>
<li><a href="#" accesskey="4">Search</a></li>
<li><a href="#" accesskey="9">Tel</a></li>
<li><a href="#" accesskey="0">Accesskeys</a></li>
</ul>
<script src="../util.js"></script>
<script src="./table.js"></script>
</body>
</html>
table.css文件
table{
border: 1px #999 solid;
}
caption{
padding: .5em;
font-size: 1.2em;
font-weight: bold;
}
th{
background-color: yellowgreen;
font-weight: normal;
text-align: left;
}
th,td{
width: 10em;
padding: .5em;
}
.special{
display: inline-block;
background: pink;
font-style: normal;
padding: 0.5em;
font-weight: bold;
}
.odd{
background: #ffc;
}
function showPic(){
if(!document.getElementById) return false;
var list = document.getElementById("content");
if(!list) return false;
var items = list.getElementsByTagName("li");
//设置动画
items[0].onmouseover = function(){
moveElement("replace", 0, 0, 10);
}
items[1].onmouseover = function(){
moveElement("replace", 0, -250, 10);
}
items[2].onmouseover = function(){
moveElement("replace", 0, -500, 10);
}
items[3].onmouseover = function(){
moveElement("replace", 0, -750, 10);
}
items[4].onmouseover = function(){
moveElement("replace", 0, -1000, 10);
}
}
function prepareReplace(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("content")) return false;
var div = document.createElement("div");
var para = document.createElement("p");
var para_txt = document.createTextNode("点击改变图片");
var img = document.createElement("img");
div.setAttribute("id", "showArea");
para.setAttribute("id", "picName");
para.appendChild(para_txt);
img.setAttribute("id", "replace");
img.setAttribute("src", "image/series.png");
img.setAttribute("alt", "小肥宅推荐");
//添加样式
// div.style.overflow = "hidden";
img.style.position = "absolute";
img.style.top = "0px";
img.style.left = "0px";
//添加和
到
div.appendChild(para);
div.appendChild(img);
//添加到清单后
var content = document.getElementById("content");
insertAfter(div, content);
}
function moveElement(elementId, final_x, final_y, interval){
if(!document.getElementById) return false;
var elem = document.getElementById(elementId);
if(!elem) return false;
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y) return true;
var dist;
if(xpos < final_x){
dist = (final_x - xpos)/10;
xpos += dist;
}
if(xpos > final_x){
dist = (xpos - final_x)/10;
xpos -= dist;
}
if(ypos < final_y){
dist = (final_y - ypos)/10;
ypos += dist;
}
if(ypos > final_y){
dist = (ypos - final_y)/10;
ypos -= dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat, interval);
}
addLoadEvent(prepareReplace);
addLoadEvent(showPic);
test.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/showPic.css">
</head>
<body>
<h5>基础图片库</h5>
<div id="container">
<ul id="content">
<li>
<img src="image/111.gif" title="LOVE野良神" alt="LOVE野良神"></img>
<span class="arrow"></span>
</li>
<li>
<img src="image/222.jpg" title="野良神好帅鸭" alt="野良神好帅鸭"></img>
<span class="arrow"></span>
</li>
<li>
<img src="image/333.jpg" title="野良神,我是你的小迷妹" alt="野良神,我是你的小迷妹"></img>
<span class="arrow"></span>
</li>
<li>
<img src="image/444.gif" title="野良神,你们怎么不在一起" alt="野良神,你们怎么不在一起"></img>
<span class="arrow"></span>
</li>
<li>
<img src="image/555.jpg" title="野良神,你好逗哦" alt="野良神,你好逗哦"></img>
<span class="arrow"></span>
</li>
</ul>
</div>
<script src="../util.js"></script>
<script src="./js/test.js"></script>
</body>
</html>
showPic.css文件
h5{
display:inline-block;
margin: 0;
margin-bottom: 10px;
padding: 6px 10px;
background-color: orange;
}
#container{
display: flex;
flex-direction: wrap;
justify-content: flex-start;
}
ul{
/* width: 300px; */
padding: 0;
margin: 0;
background: black;
}
li{
position: relative;
display: flex;
justify-content: space-between;
list-style: none;
}
li img{
height: 50px;
width: 100px;
}
.arrow{
position: absolute;
right: 0px;
width: 12px;
height: 12px;
margin-top: 16px;
margin-right: 10px;
border-top: 3px white solid ;
border-right: 3px white solid ;
transform: rotate(45deg);
}
a{
flex: 1;
display: block;
color: white;
height: 50px;
line-height: 50px;
padding-left: 20px;
padding-right: 50px;
text-decoration: none;
font-size: 16px;
}
#showArea{
position: relative;
width: 500px;
height: 250px;
overflow: hidden;
}
#picName{
position: absolute;
top: 0;
left: 10px;
color: white;
}
#replace{
height: 1250px;
}