0、题目
- 基于任务20，将任务20的代码进行抽象、封装，然后在此基础上实现如图中的两个需求：Tag输入和兴趣爱好输入
- 如示例图上方，实现一个tag输入框
- 要求遇到用户输入空格，逗号，回车时，都自动把当前输入的内容作为一个tag放在输入框下面。
- Tag不能有重复的，遇到重复输入的Tag，自动忽视。
- 每个Tag请做trim处理
- 最多允许10个Tag，多于10个时，按照录入的先后顺序，把最前面的删掉
- 当鼠标悬停在tag上时，tag前增加删除二字，点击tag可删除
- 如示例图下方，实现一个兴趣爱好输入的功能
- 通过一个Textarea进行兴趣爱好的输入，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为间隔。
- 当点击“确认兴趣爱好”的按钮时，将textarea中的输入按照你设定的间隔符，拆解成一个个的爱好，显示在textarea下方
- 爱好不能重复，所以在下方呈现前，需要做一个去重
- 每个爱好内容需要做trim处理
- 最多允许10个兴趣爱好，多于10个时，按照录入的先后顺序，把最前面的删掉
1、解题过程
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>task21</title> 6 <style> 7 ul{ 8 list-style: none; 9 height:100px; 10 } 11 textarea{ 12 margin-bottom:10px; 13 } 14 li{ 15 display: inline-block; 16 background-color: rgba(0, 204, 255, 1); 17 color:white; 18 margin:10px; 19 padding:5px; 20 font-size:30px; 21 } 22 .hobby{ 23 font-size: 30px; 24 background-color: rgba(255, 199, 102, 1); 25 padding:5px; 26 } 27 .red{ 28 background-color: red; 29 } 30 </style> 31 </head> 32 <body> 33 Tag:<input type="text" id="tag"> 34 <ul id="tag-result"> 35 </ul> 36 <textarea id="hobby" type="text" rows="5" cols="30"></textarea><br> 37 <button id="test" >确认兴趣爱好</button> 38 <ul id="hobby-result"> 39 </ul> 40 <script> 41 var $=function(id){ 42 return document.getElementById(id); 43 } 44 var number=[],hobby=[]; 45 46 //输入tag并显示 47 $("tag").onkeypress=function(e){ 48 var key; 49 if(window.event) key=e.keyCode; 50 else if(e.which) key=e.which; 51 52 switch(key){ 53 //判断输入的是否是空格、回车、逗号 54 case 13:case 32:case 10:case 44:{ 55 var input=$("tag").value; 56 var content=input.split(/[s ，\,]/);//去掉输入的空格、回车、逗号 57 for(var i=0;i<content.length;i++){ 58 if(content[i]==""||typeof(content[i])=="undefined"){ 59 content.splice(i,1); 60 i--; 61 } 62 } 63 number= content; 64 norepeat(number); //去重 65 //number中只能有10个tag 66 if(number.length>10){ 67 number.splice(0,number.length-10); 68 } 69 show(); //显示tag 70 } 71 } 72 } 73 //去掉重复的tag 74 function norepeat(array){ 75 var num=[]; 76 for(var i=0;i<array.length;i++){ 77 for(var j=i+1;j<array.length;j++){ 78 if(array[i]===array[j]) array.splice(j,1); 79 } 80 num.push(array[i]); 81 } 82 array=num; 83 } 84 //鼠标在tag上 85 function over(target){ 86 var cont=target.innerHTML; 87 target.innerHTML="删除"+cont; 88 target.className="red"; 89 } 90 //鼠标离开tag 91 function out(target){ 92 var cont=target.innerHTML; 93 target.innerHTML=cont.slice(2); 94 target.className=""; 95 } 96 //显示tag 97 function show(){ 98 var detail=" "; 99 for(var i=0;i<number.length;i++){ 100 detail+="<li onmouseover='over(this)' onmouseout='out(this)' id='"+i+"'>"+number[i]+"</li>"; 101 } 102 $("tag-result").innerHTML=detail; 103 } 104 //点击tag即可删除tag 105 $("tag-result").addEventListener('click',function(e){ 106 var target=e.target; 107 if(target.nodeName!="LI") return; 108 var tar=parseInt(target.getAttribute("id")); //得到被点击元素的id属性，之前id绑定的是元素在数组中的序号 109 number.splice(tar,1); //删除被点击的元素，1代表只删除一个元素 110 show(); 111 }) 112 113 //点击确认爱好按钮时 114 $("test").addEventListener("click",function(){ 115 cutString(); //分割输入的内容 116 norepeat(hobby); //去重 117 //hobby中只能有10个爱好 118 if(hobby.length>10){ 119 hobby.splice(0,hobby.length-10); 120 } 121 //显示爱好 122 var detail=" "; 123 for(var i=0;i<hobby.length;i++){ 124 detail+="<li class='hobby' id='"+i+"'>"+hobby[i]+"</li>"; 125 } 126 $("hobby-result").innerHTML=detail; 127 }) 128 //把输入的所有爱好按照分隔符分割并存入数组中 129 function cutString(){ 130 var value=$("hobby").value; 131 var content=value.split(/[s ，\,、 ]/); 132 for(var i=0;i<content.length;i++){ 133 if(content[i]==""||typeof(content[i])=="undefined"){content.splice(i,1); 134 i--; 135 } 136 } 137 hobby=content; 138 } 139 </script> 140 </body> 141 </html>
2、遇到的问题
（1）