完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.bom{
width: 210px;
margin: 50px auto;
}
#div{
width: 100%;
height: 100px;
border: 2px solid #0ff;
}
</style>
</head>
<body>
<div id="div"></div>
<div class="bom">
<input id="ipt" type="text">
<button id="btn">添加</button>
</div>
<script>
var ipt=document.getElementById("ipt");
var btn=document.getElementById("btn");
var div=document.getElementById("div");
var str=[];
var t=0;
btn.onclick=function(){
var value=ipt.value.trim();
if(t<5){
if(str.indexOf(value)==-1){
str[t]=value;
t++;
ipt.value="";
}else{
alert("不能输入重复值");
value="";
}
}else{
alert("不能超过5个");
value="";
}
div.innerHTML="";
div.innerHTML=str.toString();
}
</script>
</body>
</html>