[原创]用srcElement实现添加效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > [原创]用srcElement实现添加效果

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript 中的 [原创]用srcElement实现添加效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 224 ::

收藏到网摘: n/a

让iframe框架网页在任何浏览器下自动伸缩 Javascript客户端脚本的设计和应用

点击运行可以看到效果:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script language="javascript">
function addthis(){
var srcE=event.srcElement?event.srcElement:event.target;
var thev=srcE.value;
//alert(thev);
var s=document.forms[0].likes.value.indexOf(thev)
if(s==-1){
document.forms[0].likes.value+=thev+",";
}}
</script>
</head>
<body>
<form name="form1"> <font color="#666666"> <textarea name="likes" cols="40" rows="2" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea> </font> <table border="0" width="100%" cellspacing="0" cellpadding="0" > <tr> <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" onclick="javascript:addthis()" /> <label for="activity_1" class="l">电脑/网络</label></td> <td><label for="activity_2" class="l"> <input name="activity2" type="checkbox" value="电子游戏" id="activity_2" onclick="javascript:addthis()"/> 电子游戏</label></td> <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" onclick="javascript:addthis()" /> <label for="activity_3" class="l">体育运动</label></td> <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" /> <label for="activity_4" class="l">饮酒</label></td> <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" /> <label for="activity_5" class="l">品茗</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" /> <label for="activity_6" class="l">弹琴</label></td> <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" /> <label for="activity_7" class="l">看电影/电视</label></td> <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" /> <label for="activity_8" class="l">下棋/打牌</label></td> <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" /> <label for="activity_9" class="l">观光旅游</label></td> <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" /> <label for="activity_10" class="l">逛街购物</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" /> <label for="activity_11" class="l">阅读</label></td> <td><input name="activity2" type="checkbox" value="写作" id="activity_12" /> <label for="activity_12" class="l">写作</label></td> <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" /> <label for="activity_13" class="l">烹调</label></td> <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" /> <label for="activity_14" class="l">舞会/卡拉OK</label></td> <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" /> <label for="activity_15" class="l">健身/武术</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="水上活动" id="activity_16" /> <label for="activity_16" class="l">水上活动</label></td> <td><input name="activity2" type="checkbox" value="文艺表演" id="activity_17" /> <label for="activity_17" class="l">文艺表演</label></td> <td><input name="activity2" type="checkbox" value="18" id="activity_18" /> <label for="activity_18" class="l">聊天</label></td> <td><input name="activity2" type="checkbox" value="19" id="activity_19" /> <label for="activity_19" class="l">家事/手工艺　</label></td> <td><input name="activity2" type="checkbox" value="20" id="activity_20" /> <label for="activity_20" class="l">书法/绘画</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="21" id="activity_21" /> <label for="activity_21" class="l">储蓄/投资</label></td> <td><input name="activity2" type="checkbox" value="22" id="activity_22" /> <label for="activity_22" class="l">养宠物</label></td> <td><input name="activity2" type="checkbox" value="23" id="activity_23" /> <label for="activity_23" class="l">听音乐</label></td> <td><input name="activity2" type="checkbox" value="24" id="activity_24" /> <label for="activity_24" class="l">各种收集活动　</label></td> <td><input name="activity2" type="checkbox" value="25" id="activity_25" /> <label for="activity_25" class="l">摄影/艺术创作</label></td> </tr> </table>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

2006-08-21可以自己检测，不要每个checkbox加事件,删除功能没有实现

点击运行可以看到效果:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script language="javascript">
function addthis(){
var srcE=event.srcElement?event.srcElement:event.target;
if((srcE.tagName=="INPUT")&&(srcE.type.toLowerCase()=="checkbox")){
var thev=srcE.value;
var theid=srcE.id;
//alert(theid);
if(theid.indexOf('xinge')!=-1){
thetag="xinge";
}else{
thetag="likes";
}
//alert(thetag);
switch(thetag){
case "likes":
var s=document.forms[0].likes.value.indexOf(thev);
if(s==-1){
document.forms[0].likes.value+=thev+",";
}
break;
case "xinge":
var s=document.forms[0].xinge.value.indexOf(thev);
if(s==-1){
document.forms[0].xinge.value+=thev+",";
}
break;
}
}}
document.onmousedown=addthis;
</script>
</head>
<body>
<form name="form1"><textarea name="likes" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>
<textarea name="xinge" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea> <table border="0" width="100%" cellspacing="0" cellpadding="0" > <tr> <td colspan="5">兴趣爱好</td> </tr> <tr> <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" /> <label for="activity_1" class="l">电脑/网络</label></td> <td><label for="activity_2" class="l"> <input name="activity2" type="checkbox" value="电子游戏" id="activity_2"/> 电子游戏</label></td> <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" /> <label for="activity_3" class="l">体育运动</label></td> <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" /> <label for="activity_4" class="l">饮酒</label></td> <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" /> <label for="activity_5" class="l">品茗</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" /> <label for="activity_6" class="l">弹琴</label></td> <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" /> <label for="activity_7" class="l">看电影/电视</label></td> <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" /> <label for="activity_8" class="l">下棋/打牌</label></td> <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" /> <label for="activity_9" class="l">观光旅游</label></td> <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" /> <label for="activity_10" class="l">逛街购物</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" /> <label for="activity_11" class="l">阅读</label></td> <td><input name="activity2" type="checkbox" value="写作" id="activity_12" /> <label for="activity_12" class="l">写作</label></td> <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" /> <label for="activity_13" class="l">烹调</label></td> <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" /> <label for="activity_14" class="l">舞会/卡拉OK</label></td> <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" /> <label for="activity_15" class="l">健身/武术</label></td> </tr> <tr> <td colspan="5">性格：</td> </tr> <tr> <td><input name="activity2" type="checkbox" value="活泼" id="xinge_16" /> <label for="xinge_16" class="l">活泼</label></td> <td><input name="activity2" type="checkbox" value="尖刻" id="xinge_17" /> <label for="xinge_17" class="l">尖刻</label></td> <td><input name="activity2" type="checkbox" value="自闭" id="xinge_18" /> <label for="xinge_18" class="l">自闭</label></td> <td><input name="activity2" type="checkbox" value="等等" id="xinge_19" /> <label for="xinge_19" class="l">等等　</label></td> <td><input name="activity2" type="checkbox" value="外向" id="xinge_20" /> <label for="xinge_20" class="l">外向</label></td> </tr> </table>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

blueidea斑竹回复，推荐

点击运行可以看到效果:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script language="javascript">
var likes=new Array(); xinge=new Array();
function addthis(e){ var e, srcE, op, opt, i; e=window.event?window.event:e; srcE=e.srcElement?e.srcElement:e.target; if(!srcE)return; if(String(srcE.tagName).toLowerCase()!="input"||String(srcE.type).toLowerCase()!="checkbox")return; if(srcE.id.indexOf("xinge")!=-1){ op=xinge; opt=document.forms[0].xinge }else{ op=likes; opt=document.forms[0].likes; } if(srcE.checked){ i=-1; while(op[++i])if(op[i]==srcE.value)return; op[i]=srcE.value; }else{ i=-1; while(op[++i])if(op[i]==srcE.value){op.splice(i,1);i--;} } opt.value=op;
}
document.onkeydown=document.onchange=document.onclick=addthis;
</script>
</head>
<body>
<form name="form1"><textarea name="likes" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>
<textarea name="xinge" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea> <table border="0" width="100%" cellspacing="0" cellpadding="0" > <tr> <td colspan="5">兴趣爱好</td> </tr> <tr> <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" /> <label for="activity_1" class="l">电脑/网络</label></td> <td><label for="activity_2" class="l"> <input name="activity2" type="checkbox" value="电子游戏" id="activity_2"/> 电子游戏</label></td> <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" /> <label for="activity_3" class="l">体育运动</label></td> <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" /> <label for="activity_4" class="l">饮酒</label></td> <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" /> <label for="activity_5" class="l">品茗</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" /> <label for="activity_6" class="l">弹琴</label></td> <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" /> <label for="activity_7" class="l">看电影/电视</label></td> <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" /> <label for="activity_8" class="l">下棋/打牌</label></td> <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" /> <label for="activity_9" class="l">观光旅游</label></td> <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" /> <label for="activity_10" class="l">逛街购物</label></td> </tr> <tr> <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" /> <label for="activity_11" class="l">阅读</label></td> <td><input name="activity2" type="checkbox" value="写作" id="activity_12" /> <label for="activity_12" class="l">写作</label></td> <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" /> <label for="activity_13" class="l">烹调</label></td> <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" /> <label for="activity_14" class="l">舞会/卡拉OK</label></td> <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" /> <label for="activity_15" class="l">健身/武术</label></td> </tr> <tr> <td colspan="5">性格：</td> </tr> <tr> <td><input name="activity2" type="checkbox" value="活泼" id="xinge_16" /> <label for="xinge_16" class="l">活泼</label></td> <td><input name="activity2" type="checkbox" value="尖刻" id="xinge_17" /> <label for="xinge_17" class="l">尖刻</label></td> <td><input name="activity2" type="checkbox" value="自闭" id="xinge_18" /> <label for="xinge_18" class="l">自闭</label></td> <td><input name="activity2" type="checkbox" value="等等" id="xinge_19" /> <label for="xinge_19" class="l">等等　</label></td> <td><input name="activity2" type="checkbox" value="外向" id="xinge_20" /> <label for="xinge_20" class="l">外向</label></td> </tr> </table>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

splice 方法
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
参数
arrayObj 必选项。一个 Array 对象。
start
必选项。指定从数组中移除元素的开始位置，这个位置是从 0 开始计算的。
deleteCount
必选项。要移除的元素的个数。
item1, item2,. . .,itemN
必选项。要在所移除元素的位置上插入的新元素。
说明
splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素，从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

让iframe框架网页在任何浏览器下自动伸缩 Javascript客户端脚本的设计和应用

Javascript 中的 [原创]用srcElement实现添加效果

评论 (0) All