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

<!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>

数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统的更多相关文章

封装兼容性添加、删除事件的函数 addEventListener与removeEventListener
var Event = { addHandler: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElem ...
Vue 实例之事件操作样式（文本、事件、属性、表单、条件）指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...
给datagridview的下拉框添加valueChange事件
修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...
JavaScript学习笔记3之数组 & arguments（参数对象）& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
一.Array数组 1.数组初始化(Array属于对象类型) /*关于数组的初始化*/ //1.创建 Array 对象--方法1: var arr1=[]; arr1[0]='aa';//给数组元素赋 ...
测试数组push和unshift方法的效率
先贴代码,之后再来补内容 <!DOCTYPE HTML> <html> <head> <title>测试数组push和unshift方法的效率</ ...
javascript中数组的22种方法
× 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结前面的话数组总共有22种方法 ...
javascript中数组和字符串的方法比较
× 目录 [1]可索引 [2]转换 [3]拼接[4]创建[5]位置前面的话字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数 ...
C语言: 创建数组的几种方法
创建数组有三种方法 1.声明一个数组,声明时用常量表达式指定数组维数,然后可以用数组名访问数组元素 2.声明一个变长数组,声明时用变量表达式指定数组的维数,C99支持 3.声明一个指针,调用mallo ...
C语言数组做函数参数不传数组个数的遍历方法
//数组做函数参数不传数组个数的遍历方法 #include<stdio.h> #include<stdlib.h> #include<string.h> void ...

随机推荐

java 复习整理（二数据类型和几种变量）
源文件声明规则当在一个源文件中定义多个类,并且还有import语句和package语句时,要特别注意这些规则. 一个源文件中只能有一个public类一个源文件可以有多个非public类源文件的名 ...
HDU1541 经典树状数组
HDU1541 题意: 如图,等级为0的点有1,等级为1得点有4,2 等级为2的点有3,等级为3的点有5-------即即左下角的点的个数现给你一些点(x,y),输入顺序按y升序,y相等时按x升序 ...
JS日历控件集合----附效果图、源代码
http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...
Leap Motion颠覆操控体验的超精致手势追踪技术【转】
转自:http://www.cnblogs.com/emouse/archive/2013/02/28/2936689.html 先来看两段简介视频: 看了介绍视频后,对如此次超高精度的手势追踪非常好 ...
springMVC 配置中易犯的小错误
搭建springMVC环境时有可能遇到:'警告: No mapping found for HTTP request with URI [/WEB-INF/pages/helloWorld.jsp] ...
阿里云Ubuntu快速建站
阿里云Ubuntu快速建站有一个小笑话: 从前有个程序员遇到了一个问题.他想,没事,我懂,用线程就好了.现他有两个问题了. 本人小白,对网站部署什么都不懂,只是申请个阿里云服务器,把我的站点放上去. ...
hdu 1142(迪杰斯特拉+记忆化搜索)
A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
第十四届华中科技大学程序设计竞赛 K Walking in the Forest【二分答案/最小化最大值】
链接:https://www.nowcoder.com/acm/contest/106/K 来源:牛客网题目描述 It's universally acknowledged that there'r ...
Codeforces Round #270 A. Design Tutorial: Learn from Math【数论/埃氏筛法】
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
zzc种田
题目背景可能以后 zzc就去种田了. 题目描述田地是一个巨大的矩形,然而zzc 每次只能种一个正方形,而每种一个正方形时zzc所花的体力值是正方形的周长,种过的田不可以再种,zzc很懒还要节约体力 ...

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

数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统的更多相关文章

随机推荐

热门专题