<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>数组练习：各种数组方法的使用</title> <style> div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;} </style> <script type="text/javascript"> window.onload = function () { var aDiv = document.getElementsByTagName("div"); var aInput = document.getElementsByTagName("input"); var i = 0; var bS1 = bS2 = true; var aTmp = []; //删除/添加第一项 aInput[0].onclick = function () { aTmp = getArray(aDiv[0].innerHTML); bS1 ? //删除第一项， shift()方法 (aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) : //添加第一项, unshift()方法 (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true); //输出 aDiv[0].innerHTML = aTmp.join() }; //删除/添加最后一项 aInput[1].onclick = function () { aTmp = getArray(aDiv[0].innerHTML); bS2 ? //删除最后一项, pop()方法 (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) : //添加最后一项, push()方法 (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true); //输出 aDiv[0].innerHTML = aTmp.join() }; //复制, concat()方法 aInput[2].onclick = function () { aTmp = getArray(aDiv[1].innerHTML); //输出 aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/s/g,"") }; //还原, 利用数组的 length 特点 aInput[3].onclick = function () { aTmp = getArray(aDiv[1].innerHTML); //设置数组长度 aTmp.length = 10; //输出 aDiv[1].innerHTML = aTmp.join() }; //第三组数据还原 aInput[4].onclick = function () { aTmp = ["red","green","blue","white","yellow","black","brown"]; //输出 aDiv[2].innerHTML = aTmp.join() }; //删除前三项 aInput[5].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //删除, 0开始, 删除3个 aTmp.splice(0, 3); //输出 aDiv[2].innerHTML = aTmp.join() }; //删除第二至三项 aInput[6].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //删除, 2开始, 删除2个 aTmp.splice(1, 2); //输出 aDiv[2].innerHTML = aTmp.join() }; //在第二顶后插入"orange", "purple" aInput[7].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //插入, 2开始, 插入"orange", "purple" aTmp.splice(1, 0, "orange", "purple"); //输出 aDiv[2].innerHTML = aTmp.join() }; //替换第二项和第三项 aInput[8].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //插入, 2开始替换 aTmp.splice(1, 2, "#009900", "#0000ff"); //输出 aDiv[2].innerHTML = aTmp.join() }; //将div中的内容转为数组 //str div对象 function getArray(str) { aTmp.length = 0; str = str.split(","); for (var i in str)aTmp.push(str[i]); return aTmp } } </script> </head> <body> <div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div> <input type="button" value="删除January(1)" /> <input type="button" value="删除December(12)" /> <div>0,1,2,3,4,5,6,7,8,9</div> <input type="button" value="复制" /> <input type="button" value="还原" /> <div>red,green,blue,white,yellow,black,brown</div> <input type="button" value="还原" /> <input type="button" value="删除前三项" /> <input type="button" value="删除第二至三项" /> <input type="button" value="在第二项后插入(orange, purple)" /> <input type="button" value="替换第二项和第三项" /> </body> </html>
事件练习：封装兼容性添加、删除事件的函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件练习：封装兼容性添加、删除事件的函数</title> <style> pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;} span{color:#999;} </style> <script type="text/javascript"> var EventUtil = { addHandler: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler) }, removeHandler: function (oElement, sEvent, fnHandler) { oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler) }, addLoadHandler: function (fnHandler) { this.addHandler(window, "load", fnHandler) } }; EventUtil.addLoadHandler(function () { var aBtn = document.getElementsByTagName("input"); //为第一个按钮添加绑定事件 EventUtil.addHandler(aBtn[1], "click", function () { EventUtil.addHandler(aBtn[0], "click", fnHandler); aBtn[0].value = "我可以点击了" }); //解除第一个按钮的绑定事件 EventUtil.addHandler(aBtn[2], "click", function () { EventUtil.removeHandler(aBtn[0], "click", fnHandler); aBtn[0].value = "毫无用处的按钮" }); //事件处理函数 function fnHandler () { alert("事件绑定成功！") } }) </script> </head> <body> <pre> <script type="text/javascript"> var EventUtil = { addHandler: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler) }, removeHandler: function (oElement, sEvent, fnHandler) { oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler) }, addLoadHandler: function (fnHandler) { this.addHandler(window, "load", fnHandler) } } </script> </pre> <center><input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定"></center> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>星级评分系统</title> <style> body,div,ul,li,p{margin:0;padding:0;} body{color:#666;font:12px/1.5 Arial;} ul{list-style-type:none;} #star{position:relative;600px;margin:10px auto;} #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;} #star ul{margin:0 10px;} #star li{float:left;24px;cursor:pointer;text-indent:-9999px;background:url(img/star.png) no-repeat;} #star strong{color:#f60;padding-left:10px;} #star li.on{background-position:0 -28px;} #star p{position:absolute;top:20px;159px;height:60px;display:none;background:url(img/icon.gif) no-repeat;padding:7px 10px 0;} #star p em{color:#f60;display:block;font-style:normal;} </style> <script type="text/javascript"> window.onload = function () { var oStar = document.getElementById("star"); var aLi = oStar.getElementsByTagName("li"); var oUl = oStar.getElementsByTagName("ul")[0]; var oSpan = oStar.getElementsByTagName("span")[1]; var oP = oStar.getElementsByTagName("p")[0]; var i = iScore = iStar = 0; var aMsg = [ "很不满意|差得太离谱，与卖家描述的严重不符，非常不满", "不满意|部分有破损，与卖家描述的不符，不满意", "一般|质量一般，没有卖家描述的那么好", "满意|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意|质量非常好，与卖家描述的完全一致，非常满意" ] for (i = 1; i <= aLi.length; i++) { aLi[i - 1].index = i; //鼠标移过显示分数 aLi[i - 1].onmouseover = function () { fnPoint(this.index); //浮动层显示 oP.style.display = "block"; //计算浮动层位置 oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px"; //匹配浮动层文字内容 oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>" + aMsg[this.index - 1].match(/|(.+)/)[1] }; //鼠标离开后恢复上次评分 aLi[i - 1].onmouseout = function () { fnPoint(); //关闭浮动层 oP.style.display = "none" }; //点击后进行评分处理 aLi[i - 1].onclick = function () { iStar = this.index; oP.style.display = "none"; oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/|(.+)/)[1] + ")" } } //评分处理 function fnPoint(iArg) { //分数赋值 iScore = iArg || iStar; for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : ""; } }; </script> </head> <body> <div id="star"> <span>点击星星就能打分</span> <ul> <li><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href="javascript:;">4</a></li> <li><a href="javascript:;">5</a></li> </ul> <span></span> <p></p> </div> </body> </html>