-
云清雾淡2020-01-01 00:00
- 10
- 50
- 0
一个小计数的功能，但是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>0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
伱婼吥離 普通会员 1楼
原生JavaScript代码优化是指通过技术手段，尽可能地提高代码的执行效率和性能。以下是一些常见的原生JavaScript代码优化技巧：
-
使用const代替let：let和let在ES6中已经被废弃，使用const代替。const的作用域是常量，不能被重新赋值，且在声明后不能修改。
-
使用let和const代替for循环：for循环虽然在某些情况下可以避免使用，但在循环体内使用let和const可以提高性能。
-
避免全局变量：全局变量会阻止代码块之间的作用域链，从而降低代码的执行效率。可以将全局变量声明为局部变量，或者在代码块内部声明全局变量。
-
避免使用递归：递归是一种深度优先搜索，虽然在某些情况下可以使用，但在递归体内使用let和const可以提高性能。
-
避免使用eval函数：eval函数可以执行任意的JavaScript代码，虽然在某些情况下可以提高性能，但在eval函数内使用let和const可以提高性能。
-
使用数组的reduce方法：数组的reduce方法可以快速计算数组中的所有元素的和，比for循环要快得多。
-
使用Promise和async/await：Promise和async/await可以提供更强大的错误处理和异步编程支持，比传统的for循环和try/catch更有效。
-
使用内存分析工具：内存分析工具可以帮助你找到代码中的性能瓶颈，从而进行优化。
-
使用浏览器的开发者工具：浏览器的开发者工具可以帮助你找到代码中的性能瓶颈，从而进行优化。
-
使用模块化和懒加载：模块化和懒加载可以提高代码的执行效率，使代码更易于维护和测试。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部