话不多说直接上预览图和代码吧，图片可以自己找一些素材贴上去就行了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js实现dome
</title>
<style>
*{
margin: 0;
padding: 0
}
#boxcontent{
width: 100vw;
height: 100vh;
background: #fff;
}
#content_box{
display: flex;
}
#boxone{
width: 80px;
height: 30px;
margin-left: 20px;
background-image: linear-gradient(#61C8FF,#4E95FF);
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#boxtwo{
width: 80px;
height: 30px;
margin-left: 20px;
background-color: #ccc;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#boxthree{
width: 80px;
height: 30px;
margin-left: 20px;
background-color: #ccc;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#boxfour{
width: 80px;
height: 30px;
margin-left: 20px;
background-color: #ccc;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#imgone{
display: inline-block;
width: 26px;
height: 26px;
border: none;
background-image: url('./img/小-咖.png');
background-repeat: no-repeat;
background-size: 100%;
}
#imgfour{
display: inline-block;
width: 26px;
height: 26px;
border: none;
background-image: url('./img/小-黄.png');
background-repeat: no-repeat;
background-size: 100%;
}
#imgtwo{
display: inline-block;
width: 26px;
height: 26px;
border: none;
background-image: url('./img/小-绿.png');
background-repeat: no-repeat;
background-size: 100%;
}
#imgthree{
display: inline-block;
width: 26px;
height: 26px;
border: none;
background-image: url('./img/小-蓝.png');
background-repeat: no-repeat;
background-size: 100%;
}
#container_box{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
margin: auto;
}
.one{
width: 160px;
height: 140px;
text-align: center;
background-color: #FEEFF0;
border-radius: 4px;
margin: 40px 20px 20px 35px;
}
.one,.two,.three,.four,.five :hover{
cursor: pointer;
}
.one .icon,.two .icon,.three .icon,.four .icon,.five .icon{
color: #7ED321;
background: #E1F5CA;
border-radius: 2px;
font-size: 11px;
width: 40px;
height: 18px;
padding: 2px 4px 2px 4px;
}
.one .name,.two .name,.three .name,.four .name,.five .name{
color: #4A4A4A;
font-size: 14px;
padding: 5px 0px 3px 0px;
}
.one .code,.two .code,.three .code,.four .code,.five .code{
color: #4A4A4A;
font-size: 14px;
padding: 5px 0px 3px 0px;
opacity: 0.5;
font-family: MicrosoftYaHei;
letter-spacing: 0;
text-align: center;
}
.timeicon{
padding: 5px 0px 2px 0px;
display: flex;
justify-content: center;
}
.time{
font-size: 14px;
}
.two{
width: 160px;
height: 140px;
text-align: center;
background-color: #FEF4E5;
border-radius: 4px;
margin: 40px 20px 20px 35px;
}
.three{
width: 160px;
height: 140px;
text-align: center;
background-color: #E5F9EE;
border-radius: 4px;
margin: 40px 20px 20px 35px;
}
.four{
width: 160px;
height: 140px;
text-align: center;
background-color: #E8F5FC;
border-radius: 4px;
margin: 40px 20px 20px 35px;
}
.five{
width: 160px;
height: 140px;
text-align: center;
background-color: #F9F1FF;
border-radius: 4px;
margin: 40px 20px 20px 35px;
}
.oneimg{
background: url('./img/红.png');
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: -30px;
}
.twoimg{
background: url('./img/黄.png');
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: -30px;
}
.threeimg{
background: url('./img/绿.png');
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: -30px;
}
.fourimg{
background: url('./img/蓝.png');
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: -30px;
}
.fiveimg{
background: url('./img/紫.png');
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: -30px;
}
</style>
</head>
<body>
<div id="boxcontent">
<div id="content_box"></div>
<div id="container_box"></div>
</div>
<script>
let content_box=document.getElementById('content_box')
let boxone=document.createElement('div')
let boxtwo=document.createElement('div')
let boxthree=document.createElement('div')
let boxfour=document.createElement('div')
let imgone=document.createElement('span')
let imgtwo=document.createElement('span')
let imgthree=document.createElement('span')
let imgfour=document.createElement('span')
let spanone=document.createElement('span')
let spantwo=document.createElement('span')
let spanthree=document.createElement('span')
let spanfour=document.createElement('span')
let arrDom=''
let arrData=[
{
name:'赵佳欣',mobelNo:'19909090808',time:'13:02:09',status:'无风险',type:'1'},
{
name:'钱伊希',mobelNo:'19909090707',time:'17:20:21',status:'无风险',type:'2'},
{
name:'孙尚香',mobelNo:'19909090606',time:'19:30:21',status:'无风险',type:'3'},
{
name:'李嘉欣',mobelNo:'19909090505',time:'20:21:09',status:'无风险',type:'4'},
{
name:'周瑾俞',mobelNo:'13508091221',time:'10:22:22',status:'无风险',type:'5'},
{
name:'吴六奇',mobelNo:'13589011980',time:'09:50:32',status:'无风险',type:'2'},
{
name:'郑西西',mobelNo:'13508090909',time:'13:26:26',status:'无风险',type:'3'},
{
name:'王建国',mobelNo:'13556788765',time:'16:59:21',status:'无风险',type:'5'},
{
name:'冯程程',mobelNo:'19909091222',time:'15:31:01',status:'无风险',type:'4'},
{
name:'陈宇豪',mobelNo:'19909098899',time:'16:22:09',status:'无风险',type:'4'},
{
name:'褚禄山',mobelNo:'19909097788',time:'19:02:06',status:'无风险',type:'5'},
{
name:'卫立煌',mobelNo:'19909095566',time:'21:20:09',status:'无风险',type:'3'},
{
name:'蒋依依',mobelNo:'19909098976',time:'22:02:09',status:'无风险',type:'1'},
{
name:'沈建新',mobelNo:'15109807890',time:'23:25:26',status:'无风险',type:'1'},
{
name:'韩佳人',mobelNo:'15898766789',time:'08:25:46',status:'无风险',type:'2'},
{
name:'杨沐宸',mobelNo:'13909122156',time:'09:59:59',status:'无风险',type:'5'},
{
name:'朱有序',mobelNo:'13467899876',time:'07:56:31',status:'无风险',type:'5'},
{
name:'秦思源',mobelNo:'18909085678',time:'12:09:09',status:'无风险',type:'3'},
{
name:'尤昌珉',mobelNo:'13789087890',time:'14:32:56',status:'无风险',type:'2'}
]
changeData(arrData)
boxone.setAttribute('id',"boxone")
boxtwo.setAttribute('id',"boxtwo")
boxthree.setAttribute('id',"boxthree")
boxfour.setAttribute('id',"boxfour")
imgone.setAttribute('id',"imgone")
imgtwo.setAttribute('id',"imgtwo")
imgthree.setAttribute('id',"imgthree")
imgfour.setAttribute('id',"imgfour")
spanone.setAttribute('id',"spanone")
spantwo.setAttribute('id',"spantwo")
spanthree.setAttribute('id',"spanthree")
spanfour.setAttribute('id',"spanfour")
content_box.appendChild(boxone)
content_box.appendChild(boxtwo)
content_box.appendChild(boxthree)
content_box.appendChild(boxfour)
let box1=document.getElementById('boxone')
let boxs=document.getElementById('boxtwo')
let boxss=document.getElementById('boxthree')
let boxsss=document.getElementById('boxfour')
let box2=document.getElementById('spanone')
box1.appendChild(imgone)
box1.appendChild(spanone)
document.getElementById('spanone').innerHTML="全部"
let box11=document.getElementById('boxtwo')
let box22=document.getElementById('spantwo')
box11.appendChild(imgtwo)
box11.appendChild(spantwo)
document.getElementById('spantwo').innerHTML="拨号中"
let box111=document.getElementById('boxthree')
let box222=document.getElementById('spanthree')
box111.appendChild(imgthree)
box111.appendChild(spanthree)
document.getElementById('spanthree').innerHTML="通话中"
let box1111=document.getElementById('boxfour')
let box2222=document.getElementById('spanfour')
box1111.appendChild(imgfour)
box1111.appendChild(spanfour)
document.getElementById('spanfour').innerHTML="监听中"
box1.onclick=function(e){
arrDom=''
box1.style.backgroundImage='linear-gradient(#61C8FF,#4E95FF)'
boxs.style.background="#ccc"
boxss.style.background="#ccc"
boxsss.style.background="#ccc"
let data=[
{
name:'赵佳欣',mobelNo:'19909090808',time:'13:02:09',status:'无风险',type:'1'},
{
name:'钱伊希',mobelNo:'19909090707',time:'17:20:21',status:'无风险',type:'2'},
{
name:'孙尚香',mobelNo:'19909090606',time:'19:30:21',status:'无风险',type:'3'},
{
name:'李嘉欣',mobelNo:'19909090505',time:'20:21:09',status:'无风险',type:'4'},
{
name:'周瑾俞',mobelNo:'13508091221',time:'10:22:22',status:'无风险',type:'5'},
{
name:'吴六奇',mobelNo:'13589011980',time:'09:50:32',status:'无风险',type:'2'},
{
name:'郑西西',mobelNo:'13508090909',time:'13:26:26',status:'无风险',type:'3'},
{
name:'王建国',mobelNo:'13556788765',time:'16:59:21',status:'无风险',type:'5'},
{
name:'冯程程',mobelNo:'19909091222',time:'15:31:01',status:'无风险',type:'4'},
{
name:'陈宇豪',mobelNo:'19909098899',time:'16:22:09',status:'无风险',type:'4'},
{
name:'褚禄山',mobelNo:'19909097788',time:'19:02:06',status:'无风险',type:'5'},
{
name:'卫立煌',mobelNo:'19909095566',time:'21:20:09',status:'无风险',type:'3'},
{
name:'蒋依依',mobelNo:'19909098976',time:'22:02:09',status:'无风险',type:'1'},
{
name:'沈建新',mobelNo:'15109807890',time:'23:25:26',status:'无风险',type:'1'},
{
name:'韩佳人',mobelNo:'15898766789',time:'08:25:46',status:'无风险',type:'2'},
{
name:'杨沐宸',mobelNo:'13909122156',time:'09:59:59',status:'无风险',type:'5'},
{
name:'朱有序',mobelNo:'13467899876',time:'07:56:31',status:'无风险',type:'5'},
{
name:'秦思源',mobelNo:'18909085678',time:'12:09:09',status:'无风险',type:'3'},
{
name:'尤昌珉',mobelNo:'13789087890',time:'14:32:56',status:'无风险',type:'2'}
]
changeData(data)
};
boxs.onclick=function(e){
arrDom=''
boxs.style.backgroundImage='linear-gradient(#61C8FF,#4E95FF)'
box1.style.background="#ccc"
boxss.style.background="#ccc"
boxsss.style.background="#ccc"
let data=[
{
name:'赵佳欣',mobelNo:'19909090808',time:'13:02:09',status:'无风险',type:'1'},
{
name:'钱伊希',mobelNo:'19909090707',time:'17:20:21',status:'无风险',type:'1'},
{
name:'孙尚香',mobelNo:'19909090606',time:'19:30:21',status:'无风险',type:'1'},
{
name:'李嘉欣',mobelNo:'19909090505',time:'20:21:09',status:'无风险',type:'1'},
{
name:'周瑾俞',mobelNo:'13508091221',time:'10:22:22',status:'无风险',type:'1'},
{
name:'吴六奇',mobelNo:'13589011980',time:'09:50:32',status:'无风险',type:'1'},
{
name:'郑西西',mobelNo:'13508090909',time:'13:26:26',status:'无风险',type:'1'}
]
changeData(data)
};
boxss.onclick=function(e){
arrDom=''
boxss.style.backgroundImage='linear-gradient(#61C8FF,#4E95FF)'
box1.style.background="#ccc"
boxs.style.background="#ccc"
boxsss.style.background="#ccc"
let data=[
{
name:'赵佳欣',mobelNo:'19909090808',time:'13:02:09',status:'无风险',type:'2'},
{
name:'钱伊希',mobelNo:'19909090707',time:'17:20:21',status:'无风险',type:'2'},
{
name:'孙尚香',mobelNo:'19909090606',time:'19:30:21',status:'无风险',type:'2'},
{
name:'李嘉欣',mobelNo:'19909090505',time:'20:21:09',status:'无风险',type:'2'},
{
name:'周瑾俞',mobelNo:'13508091221',time:'10:22:22',status:'无风险',type:'2'},
{
name:'吴六奇',mobelNo:'13589011980',time:'09:50:32',status:'无风险',type:'2'},
{
name:'郑西西',mobelNo:'13508090909',time:'13:26:26',status:'无风险',type:'2'}
]
changeData(data)
};
boxsss.onclick=function(e){
arrDom=''
boxsss.style.backgroundImage='linear-gradient(#61C8FF,#4E95FF)'
box1.style.background="#ccc"
boxs.style.background="#ccc"
boxss.style.background="#ccc"
let data=[
{
name:'赵佳欣',mobelNo:'19909090808',time:'13:02:09',status:'无风险',type:'3'},
{
name:'钱伊希',mobelNo:'19909090707',time:'17:20:21',status:'无风险',type:'3'},
{
name:'孙尚香',mobelNo:'19909090606',time:'19:30:21',status:'无风险',type:'3'},
{
name:'李嘉欣',mobelNo:'19909090505',time:'20:21:09',status:'无风险',type:'3'},
{
name:'周瑾俞',mobelNo:'13508091221',time:'10:22:22',status:'无风险',type:'3'},
{
name:'吴六奇',mobelNo:'13589011980',time:'09:50:32',status:'无风险',type:'3'},
{
name:'郑西西',mobelNo:'13508090909',time:'13:26:26',status:'无风险',type:'3'}
]
changeData(data)
};
function changeData(data){
arrData=data
arrData.forEach((e)=>{
if(e.type=='1'){
arrDom+=`<div class="one">
<div class="oneimg"></div>
<div class="name">${
e.name}</div>
<div class="code">${
e.mobelNo}</div>
<div class="timeicon">
<div class="time">${
e.time}</div>
<div class="icon">${
e.status}</div>
</div>
</div>`
}else if(e.type=='2'){
arrDom+=`<div class="two">
<div class="twoimg"></div>
<div class="name">${
e.name}</div>
<div class="code">${
e.mobelNo}</div>
<div class="timeicon">
<div class="time">${
e.time}</div>
<div class="icon">${
e.status}</div>
</div>
</div>`
}else if(e.type=='3'){
arrDom+=`<div class="three">
<div class="threeimg"></div>
<div class="name">${
e.name}</div>
<div class="code">${
e.mobelNo}</div>
<div class="timeicon">
<div class="time">${
e.time}</div>
<div class="icon">${
e.status}</div>
</div>
</div>`
}else if(e.type=='4'){
arrDom+=`<div class="four">
<div class="fourimg"></div>
<div class="name">${
e.name}</div>
<div class="code">${
e.mobelNo}</div>
<div class="timeicon">
<div class="time">${
e.time}</div>
<div class="icon">${
e.status}</div>
</div>
</div>`
}else if(e.type=='5'){
arrDom+=`<div class="five">
<div class="fiveimg"></div>
<div class="name">${
e.name}</div>
<div class="code">${
e.mobelNo}</div>
<div class="timeicon">
<div class="time">${
e.time}</div>
<div class="icon">${
e.status}</div>
</div>
</div>`
}
})
document.getElementById('container_box').innerHTML=arrDom
let onebox=document.getElementsByClassName('one')
let twobox=document.getElementsByClassName('two')
let threebox=document.getElementsByClassName('three')
let fourbox=document.getElementsByClassName('four')
for(let i=0;i<onebox.length;i++){
onebox[i].onclick=changeone
}
for(let i=0;i<twobox.length;i++){
twobox[i].onclick=changetwo
}
for(let i=0;i<threebox.length;i++){
threebox[i].onclick=changethree
}
for(let i=0;i<fourbox.length;i++){
fourbox[i].onclick=changefour
}
function changeone(e){
alert(e.srcElement.innerText)
console.log(e)
}
function changetwo(e){
alert(e.srcElement.innerText)
}
function changethree(e){
alert(e.srcElement.innerText)
}
function changefour(e){
alert(e.srcElement.innerText)
}
}
</script>
</body>
</html>