[关闭]
@GivenCui 2016-06-01T09:58:53.000000Z 字数 3742 阅读 673

QQ添加删除人功能实现分析

js高级

目录

JS课程合集跳转链接

题目所需要的技能

  1. 新建json假数据
  2. 用Ajax访问
  3. 用数组的相关操作
  4. open()打开子页面,父子页面的传值
  5. 封装练习
  6. this的用法
  7. DOM的元素的动态创建和删除
  8. select标签和Select对象的属性
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>选人</title>
  6.         <style type="text/css">
  7.             div {
  8.                 float: left;
  9.                 border: 1px solid red;
  10.             }
  12.             #main_div {
  13.                 width: 500px;
  14.                 height: 300px;
  15.                 margin-left: 300px;
  16.             }
  18.             #left_div {
  19.                 width: 200px;
  20.                 height: 300px;
  21.             }
  23.             #center_div {
  24.                 width: 94px;
  25.                 height: 300px;
  26.                 text-align: center;
  27.             }
  29.             #right_div {
  30.                 width: 200px;
  31.                 height: 300px;
  32.                 float: right;
  33.             }
  34.             #left_sel {
  35.                 width: 200px;
  36.                 height: 280px;
  37.             }
  38.             #right_sel {
  39.                 width: 200px;
  40.                 height: 280px;
  41.             }
  42.             input {
  43.                 margin-top: 30px;
  44.             }
  47.         </style>
  48.         <!-- 导入事件工具js文件 -->
  49.         <script type="text/javascript" src="EventUtil.js"></script>
  50.     </head>
  51.     <body>
  52.         <div id="main_div">
  53.             <!-- 左边的div -->
  54.             <div id="left_div">
  55.                 <label id="left_label">0</label>
  56.                 <select id="left_sel" multiple>
  58.                 </select>
  59.             </div>
  61.             <!-- 中间的div -->
  62.             <div id="center_div">
  63.                 <input type="button" value="添加" id="add_btn" />
  64.                 <br />
  65.                 <input type="button" value="移除" id="remove_btn" />
  66.                 <br />
  67.                 <input type="button" value="全部添加" id="addAll_btn" />
  68.                 <br />
  69.                 <input type="button" value="全部移除" id="removeAll_btn" />
  70.             </div>
  72.             <!-- 右边的div -->
  73.             <div id="right_div">
  74.                 <label id="right_label">0</label>
  75.                 <select id="right_sel" multiple>
  77.                 </select>
  78.             </div>
  79.         </div>
  82. <!-- ***************************************************************************** -->
  83.         <script type="text/javascript">
  85.         //左边sel
  86.         var leftSel = $("left_sel");
  87.         //左边数据数组
  88.         var leftPersonArray = new Array();
  90.         //右边sel
  91.         var rightSel = $("right_sel");
  92.         //右边数据数组
  93.         var rightPersonArray = new Array();
  95.         //window的onload事件
  96.         EventUtil.addHandler(window, "load", function () {
  97.             //1、初始化数据
  98.             var personObj = [
  99.                 {
  100.                     name : "张三"
  101.                 },
  102.                 {
  103.                     name : "李四"
  104.                 },
  105.                 {
  106.                     name : "王五"
  107.                 },
  108.                 {
  109.                     name : "赵六"
  110.                 },
  111.                 {
  112.                     name : "冯七"
  113.                 }
  114.             ];
  116.             //遍历personObj 
  117.             for (var tempIdx in personObj) {
  118.                 //得到每个person对象
  119.                 var tempPerson = personObj[tempIdx];
  120.                 //添加到左边数据数组
  121.                 leftPersonArray.push(tempPerson);
  122.                 //重置左边sel
  123.                 resetSel(leftSel, tempPerson.name);
  124.                 //人数
  125.                 leftAndRightCount();
  126.             }
  128.             //2、给左边sel添加事件
  129.             EventUtil.addHandler(leftSel, "dblclick", function () {
  130.                 //添加右边数据数组
  131.                 // this.selectedIndex 相当于leftSel.selectedIndex，获得选中option的下标
  132.                 rightPersonArray.push(leftPersonArray[this.selectedIndex]);
  133.                 //重置右边sel
  134.                 resetSel(rightSel, leftPersonArray[this.selectedIndex].name);
  136.                 //删除左边数据数组
  137.                 leftPersonArray.splice(this.selectedIndex, 1);
  138.                 //删除左边option
  139.                 //this.options 获得所有option 是一个数组
  140.                 leftSel.removeChild(this.options[this.selectedIndex]);
  142.                 //人数
  143.                 leftAndRightCount();
  144.             });
  146.             //3、给添加按钮添加事件
  147.             EventUtil.addHandler($("add_btn"), "click", function () {
  148.                 //遍历options
  149.                 for (var i = 0; i < leftSel.options.length; i++) {
  150.                     //找出选中的option
  151.                     if (leftSel.options[i].selected) {
  152.                         //添加右边数据数组
  153.                         rightPersonArray.push(leftPersonArray[i]);
  154.                         //重置右边sel的方法
  155.                         resetSel(rightSel, leftPersonArray[i].name);
  157.                         //删除左边数据数组
  158.                         leftPersonArray.splice(i, 1);
  159.                         //删除左边的option
  160.                         leftSel.removeChild(leftSel.options[i]);
  162.                         //每次删除后要改变下标
  163.                         // i -= 1;
  164.                         i--;
  165.                     }
  166.                 }
  167.                 //人数
  168.                 leftAndRightCount();
  169.             });
  171.             //4、右边sel添加事件
  173.             //5、给移除按钮添加事件
  175.             //6、给全部添加按钮添加事件
  176.             EventUtil.addHandler($("addAll_btn"), "click", function () {
  177.                 //遍历左边的options
  178.                 for (var i = 0; i < leftSel.options.length; i++) {
  179.                     //添加右边数据数组
  180.                     rightPersonArray.push(leftPersonArray[i]);
  181.                     //重置右边sel
  182.                     resetSel(rightSel, leftPersonArray[i].name);
  184.                     //删除左边数据数组
  185.                     leftPersonArray.splice(i, 1);
  186.                     //删除左边option
  187.                     leftSel.removeChild(leftSel.options[i]);
  189.                     //改变下标
  190.                     i--;
  191.                 }
  193.                 //人数
  194.                 leftAndRightCount();
  195.             });
  197.             //7、给全部移除按钮添加事件
  199.         });
  203. /******************封装的方法*****************************************************/
  206.         //封装左边和右边人数的方法
  207.         function leftAndRightCount () {
  208.             $("left_label").innerHTML = leftPersonArray.length;
  209. 			$("right_label").innerHTML = rightPersonArray.length;
  210.         }
  212.         //封装重置sel的方法
  213.         function resetSel (sel, textNodeValue) {
  214.             //创建option
  215.             var option = createElement("option");
  216.             //创建textNode
  217.             var optionValue = createTextNode(textNodeValue);
  218.             //添加textNode
  219.             option.appendChild(optionValue);
  220.             //添加option
  221.             sel.appendChild(option);
  222.         }
  224.         //封装创建元素的方法
  225.         function createElement (elementName) {
  226.             return document.createElement(elementName);
  227.         }
  229.         //封装创建textNode的方法
  230.         function createTextNode (elementValue) {
  231.             return document.createTextNode(elementValue);
  232.         }
  234.         //封装通过id获取标签的方法
  235.         function $ (idName) {
  236.             return document.getElementById(idName);
  237.         }
  239.         </script>
  241.     </body>
  242. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注