极客观点
项目管理
HarmonyOS
一个小计数的功能，但是input2层循环可能性能不太好，这块怎么优化呢？或者换种其他思路？大家可以讨论下呀
<!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;}
.team-scores{
display: flex;
font-size: 80px;
}
.teams{
font-size: 40px;
}
.team-name{
width: 30px;
height: 30px;
/* vertical-align: 0px; */
}
.score-btns button{
margin-top: 10px;
padding: 4px 10px;
border:none;
outline: none;
border-radius: 20px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 显示的分数 -->
<div class="team-scores">
<h2 class="999">0</h2>
<span>-</span>
<h2 class="888">0</h2>
</div>
<!-- 两个队伍的名称 -->
<div class="teams">
<input type="radio" class="team-name" id="radio" checked><label>A队</label>
<input type="radio" class="team-name" id="radio"><label>B队</label>
</div>
<!-- 分数按钮 -->
<div class="score-btns">
<button>加1分</button>
<button>加2分</button>
<button>加3分</button>
</div>
</body>
<script>
let team=[0,0];
let typeChecked=1;
let buts= getEleAll('button');
let input =getEleAll('input');
let h2 =getEleAll('h2');
input.forEach((key,index)=>{
key.onchange=function(){
input.forEach((key,index)=>{
key.checked=false;
})
this.checked=true;
typeChecked=index+1;
}
})
buts.forEach((key,index)=>{
key.onclick=function(){
h2[typeChecked-1].innerHTML=Number(h2[typeChecked-1].innerHTML) + index+1;
}
})
function getEleAll(ele){
return document.querySelectorAll(ele);
}
</script>
</html>
https://codepen.io/voggen/pen/PoodqpX