数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统
<!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;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 ...
随机推荐
- confluence6.3安装、破解
confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实现团队成员之间的协作和知识共享.现在大多数公司都会部署一套confluence,用作内部wiki.现在co ...
- Linux下kill命令
首先了解什么是信号:信号是进程级的中断请求,系统定义了30余种信号,kill是管理员用来发送信号的一种手段. 功能说明:删除执行中的程序或工作. 语 法:kill [-s <信息名称或编号> ...
- windows 系统下git 的安装
在linux系统下,可以直接在命令窗口安装和使用git.但是,在windows系统下,想要达到同样的效果,可以安装git,使用git bash到达效果.具体安装步骤如下: 第一步:官网上下载git 网 ...
- centos 搭建web平台
centos 查询是否安装apacherpm -qa httpd 出现类似 httpd--.el6.centos..x86_64 ,说明已安装 yum -y install httpd // 安 ...
- 也来写写基于单表的Orm（使用Dapper）
前言 这两天看园子里有个朋友写Dapper的拓展,想到自己之前也尝试用过,但不顺手,曾写过几个方法来完成自动的Insert操作.而对于Update.Delete.Select等,我一直对Diction ...
- java应用挂死故障排查
现象: java开发的web应用无法访问 排查: 1．从resin/log/watchdog-manager.log的日志里可以看出来,jvm的内存满,无法创建新进程 java.lang.OutOfM ...
- VS2005调试无法进入断点，暂停、停止、重编按钮为灰色
没装IE8之前(IE7),Vs2005调试还好用,装了IE8之后, Vs2005的WebSite程序按F5无法正常调试. 需要手动附加到进程, 比较麻烦, 据说还有种方法, 把所有IE窗口都关掉, 再 ...
- c# 防止重复运行 弹出已运行窗口并传递消息
最近在写一款软件 软件是用来接收其他程序传递过来的命令行,并形成列表 大概的最终效果就像下图一样 原本为了程序美观是打算用listbox自绘列表,字和图片都绘制好了发现自己不会绘制按钮 所以最终采用了 ...
- 在ros下使用tf
tf真是一个好东西,把坐标变换都简化了 首先tf需要有一个broadcaster #include <ros/ros.h> #include <tf/transform_broadc ...
- (13)oracle导出、导入
导出 导出分三种 导出表.导出方案(用户).导出数据库 导入导出不需要进入sqlplus,都需要从cmd进到所安装的oracle目录的bin文件夹下 例如:D:\app\Administrat ...