23任务二十一——
Posted cjlalala
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了23任务二十一——相关的知识，希望对你有一定的参考价值。
0、题目
- 基于任务20，将任务20的代码进行抽象、封装，然后在此基础上实现如图中的两个需求：Tag输入和兴趣爱好输入
- 如示例图上方，实现一个tag输入框
- 要求遇到用户输入空格，逗号，回车时，都自动把当前输入的内容作为一个tag放在输入框下面。
- Tag不能有重复的，遇到重复输入的Tag，自动忽视。
- 每个Tag请做trim处理
- 最多允许10个Tag，多于10个时，按照录入的先后顺序，把最前面的删掉
- 当鼠标悬停在tag上时，tag前增加删除二字，点击tag可删除
- 如示例图下方，实现一个兴趣爱好输入的功能
- 通过一个Textarea进行兴趣爱好的输入，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为间隔。
- 当点击“确认兴趣爱好”的按钮时，将textarea中的输入按照你设定的间隔符，拆解成一个个的爱好，显示在textarea下方
- 爱好不能重复，所以在下方呈现前，需要做一个去重
- 每个爱好内容需要做trim处理
- 最多允许10个兴趣爱好，多于10个时，按照录入的先后顺序，把最前面的删掉
1、解题过程
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>task18</title> <style> ul{ list-style: none; height:300px; } textarea{ margin-bottom:10px; } li{ height:20px; display: inline-block; background-color: blue; color:white; margin:10px; padding:5px; } </style> </head> <body> Tag:<input type="text" id="tag"> <ul id="tag-result"> </ul> <textarea id="hobby" type="text" rows="5" cols="30"></textarea><br> <button id="test" >确认兴趣爱好</button> <div id="hobby-result"> </div> <script> var $=function(id){ return document.getElementById(id); } var number=[]; $("tag").onkeypress=function(e){ var key; if(window.event) key=e.keyCode; else if(e.which) key=e.which; switch(key){ case 13:case 32:case 10:case 44:{ //判断输入的是否是空格、回车、逗号 var input=$("tag").value, content=input.split(/[\s\n\r\，\,]/); //去掉输入的空格、回车、逗号 for(var i=0;i<content.length;i++){ if(content[i]==""||typeof(content[i])=="undefined"){content.splice(i,1); i--; } } var num=[]; //去掉重复的tag for(var i=0;i<content.length;i++){ for(var j=i+1;j<content.length;j++){ if(content[i]===content[j]) content.splice(j,1); } num.push(content[i]); } number=num; //number中只能有10个tag if(number.length>10){ number.splice(0,number.length-10); } show(); } } } //鼠标在tag上 function over(target){ var cont=target.innerHTML; target.innerHTML="删除"+cont; } //鼠标离开tag function out(target){ var cont=target.innerHTML; target.innerHTML=cont.slice(2); } //被点击的tag被删除 $("tag-result").addEventListener(‘click‘,function(e){ var target=e.target; if(target.nodeName!="LI") return; var tar=parseInt(target.getAttribute("id")); //得到被点击元素的id属性，之前id绑定的是元素在数组中的序号 number.splice(tar,1); //删除被点击的元素，1代表只删除一个元素 show(); return number; }) //将数据显示到id为result的列表中 function show(){ var detail=" "; for(var i=0;i<number.length;i++){ detail+="<li onmouseover=‘over(this)‘ onmouseout=‘out(this)‘ id=‘"+i+"‘>"+number[i]+"</li>"; } $("tag-result").innerHTML=detail; } /*//给输出的结果添加事件委托，使点击的元素被删除 $("-tag-result").addEventListener("click",function(e){ var target=e.target; if(target.nodeName!="LI") return; var tar=parseInt(target.getAttribute("id")); //得到被点击元素的id属性，之前id绑定的是元素在数组中的序号 number.splice(tar,1); //删除被点击的元素，1代表只删除一个元素 show(); return number; }) //将得到的用户输入数据输出显示到id为result的列表中 function show(){ var detail=" "; for(var i=0;i<number.length;i++){ detail+="<li id=‘"+i+"‘>"+number[i]+"</li>"; } result.innerHTML=detail; } //把输入的字符串按照分隔符分割并存入数组中 function cutString(){ var value=$("input").value; var content=value.split(/[\s\n\r\，\,\、\t\ ]/); for(var i=0;i<content.length;i++){ if(content[i]==""||typeof(content[i])=="undefined"){content.splice(i,1); i--; } } number=content; } $("test").onclick=function(){ var hobby=$("hobby").value, detail=" "; for(var i=0;i<number.length;i++){ if(number[i].match(hobby)!=null&&hobby!=""){ detail+="<li id=‘"+i+"‘class=‘blue‘>"+number[i]+"</li>"; } else detail+="<li id=‘"+i+"‘>"+number[i]+"</li>"; } result.innerHTML=detail; }*/ </script> </body> </html>
以上是关于23任务二十一——的主要内容，如果未能解决你的问题，请参考以下文章
C1认证学习二十二十一二十二（CSS背景属性CSS文本属性）
C1认证学习二十二十一二十二（CSS背景属性CSS文本属性）