数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统...-CSDN博客

<!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>
&lt;script type="text/javascript"&gt;
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)
    }
}
&lt;/script&gt;
</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;width: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;width: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;width: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>