<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input.active {
background: red;
}
.outNode>div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
.outNode>div:first-of-type {
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
const $ = obj => [...document.querySelectorAll(obj)];
const jsonDate = {
'vlaueName': ['李万宇', '王艺蒙', '顼勋'],
'innnerHtml': [
'有钱了', '瘦了', '把作业写完了'
]
};
let Index = 0;
const createNode = json =>
`<div class=outNode>
${json.vlaueName.map((x)=>`<input type=button value=${x}>`).join('')}
${json.innnerHtml.map((x)=>`
<div>${x}</div>
`).join('')}
</div>`;
document.body.innerHTML = createNode(jsonDate);
let allInput = new Set($('input'));
let allDiv = new Set($('.outNode>div'));
[...allInput][0].className = 'active';
[...allInput].forEach((item,i)=>{
item['onclick']=()=>{
[...allDiv].forEach(f=>f.style.display='none');
[...allDiv][i].style.display = 'block';
[...allInput].forEach(x=>x.className='');
[...allInput][i].className = 'active';
}
});
setInterval(()=>{
Index++;
(Index == [...allInput].length) && (Index=0);
[...allInput].forEach(x=>x.className='');
[...allInput][Index].className = 'active';
[...allDiv].forEach(x=>x.style.display='none');
[...allDiv][Index].style.display = 'block';
},1000);
</script>
</body>
</html>
Processed:
0.011, SQL:
9
