复制到本地打开即可，如果无外网环境需要手动下载jqueryjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="display: flex;position:absolute; width:99%; height:98%;">
<div style="width: 20%;">
充值计算器
双倍：
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(0)">
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(1)">
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(2)">
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(3)">
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(4)">
<input type="checkbox" name="double" id="db" checked onchange="changeCheckBox(5)">
<br>
次数：<div id="moneyCount" style="display: inline;"></div><br>
总数：<div id = "allMoney" style="display: inline;"></div><br>
总石头数：<div id = "allStone" style="display: inline;">0</div><br>
<input id="need" type="number" placeholder="输入需要充值的数量"/>
<button id="btn">充值</button><br>
累计总石头数：<div id = "countAllStone" style="display: inline;">0</div><br>
累计总充值：<div id = "countAllMoney" style="display: inline;">0</div><br>
</div>
<div style="width: 60%;">
<div style="height: 80%;border: 1px solid grey;">
<div>操作区</div>
<hr>
</div>
<div style="height: 20%;border: 1px solid grey;">
<div>日志</div>
<hr>
<div id="logs" style="overflow-y: auto;height: 80%;"></div>
</div>
</div>
<div style="width: 20%; text-align: center;align-items: center;">
(<a href="#" id="big1" onclick="big(1)">雷</a>)<a href="#" id="chara1" onclick="chara(1)">雷电将军</a><br>
(<a href="#" id="big2" onclick="big(2)">风</a>)<a href="#" id="chara2" onclick="chara(2)">枫原万叶</a><br>
(<a href="#" id="big3" onclick="big(3)">火</a>)<a href="#" id="chara3" onclick="chara(3)">香菱</a><br>
(<a href="#" id="big4" onclick="big(4)">火</a>)<a href="#" id="chara4" onclick="chara(4)">班尼特</a><br>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function big(i){
var div = document.getElementById('logs');
div.scrollTop = div.scrollHeight;
$("#logs").append($("#chara"+i).html()+"释放"+$("#big"+i).html()+"技能3</br>")
console.log($("#chara"+i).html()+"释放"+$("#big"+i).html()+"技能3")
}
function chara(i){
let log = "切换角色："+$("#chara"+i).html();
console.log()
}
</script>
<script>
var money = [6,30,98,198,328,648]
var stone1 = [120,600,1960,3960,6560,12960]
var stone1Flag = [0,0,0,0,0,0]
var stone2 = [60,330,1090,2240,3880,8080]
var stonebase = [60,300,980,1980,3280,6480]
var stoneWell = [60/60,330/300,1090/980,2240/1980,3880/3280,8080/6480]
console.log(stoneWell)
var countAllStone = 0;
var countAllMoney = 0;
function changeCheckBox(obj){
stone1Flag[obj] = stone1Flag[obj] === 1? 0:1
console.log(stone1Flag)
}
$("#btn").click(function(){
let target = $("#need").val()
if(target == ''){
return;
}
let allMoney = 0;
let moneyCount = [0,0,0,0,0,0];
let allStone = 0;
console.log(target)
for (var i = 0; i < stone1Flag.length; i++) {
if(stone1Flag[i] === 0){
target-=stone1[i]
if(target > 0){
$("input[type='checkbox']")[i].checked =false
allStone+=stone1[i];
allMoney+=money[i];
moneyCount[i]+=1;
stone1Flag[i] = 1;
}else{
$("input[type='checkbox']")[i].checked =false
allStone+=stone1[i];
allMoney+=money[i];
moneyCount[i]+=1;
stone1Flag[i] = 1;
changeMoney(allMoney,allStone,moneyCount)
return;
}
}
}
while(target > 0){
for (var i = stone2.length-1; i >= 0 ; i--) {
while(target-stone2[i] > 0){
target-=stone2[i];
allStone+=stone2[i];
allMoney+=money[i];
moneyCount[i]+=1;
}
target-=stone2[i]
allStone+=stone2[i];
allMoney+=money[i];
moneyCount[i]+=1;
changeMoney(allMoney,allStone,moneyCount)
return;
}
}
})
function changeMoney(allMoney,allStone,moneyCount){
$("#allMoney").html(allMoney)
$("#allStone").html(allStone)
$("#moneyCount").html(moneyCount.join(","))
countAllMoney+=allMoney
countAllStone+=allStone
$("#countAllMoney").html(countAllMoney)
$("#countAllStone").html(countAllStone)
}
</script>
</html>