<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="GBK" />
<title>魔法卡片消耗计算器</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.table {
width: 100%;
}
.table, .table th, .table td {
border: solid 1px #eee;
border-collapse: collapse;
}
.magic-card {
width: 100px;
height: 160px;
border: solid 2px #888888;
}
.clear-both {
clear: both;
width: 0px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">魔法卡片消耗计算器</li>
</ol>
</nav>
<div class="container-fluid mt-1">
<div class="row">
<div class="col-12">
<div class="form-inline">
套卡层数：<input class="form-control" type="number" id="numCardLevelCount" min="1" max="15" increment="1" value="3" /><button class="btn btn-primary ml-2" type="button" onclick="createCardSet();">确定</button>
</div>
</div>
</div>
<div class="row mt-1">
<div class="col-12">
<table class="table" id="tblCards">
<thead>
<tr>
<th>层级</th>
<th>卡片</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="row mt-1">
<div class="col-12 text-center">
<button class="btn btn-success" onclick="computeConsume();">计算消耗</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
function cl(obj) {
if (console && console.log) {
console.log(obj);
}
}
</script>
<script>
function createOneCard(level) {
var cardId = level + "-" + $("#tblCards tr[data-level=" + level + "]").find(".card").length;
var html = "";
html += "<div class='card float-left mr-2 mb-2' data-card-id='" + cardId + "' data-level='" + level + "'>";
html += "<div class='card-header'>";
html += cardId;
html += "</div>";
html += "<div class='card-body'>";
if (level > 1) {
html += "<div class='form-inline mb-1'>";
html += "消耗卡片：";
for (var i = 0; i < 3; i++) {
html += "<input class='form-control-sm mr-1' type='text' style='width: 60px;' data-card-id='" + cardId + "'/>";
}
html += "</div>";
}
html += "<div class='form-inline mb-1'>";
html += "已有张数：<input class='form-control-sm mr-1' type='number' style='width: 90px;' data-card-id='" + cardId + "' min='0' value='0'/>";
html += "</div>";
html += "<div class='alert alert-info'>消耗数：" + "1" + "</div>";
html += "</div>";
html += "</div>";
html += "";
return html;
}
function createCards(level) {
var $td = $("#tblCards tr[data-level=" + level + "]").find("td").eq(0);
$td.children().remove();
var cardCount = parseInt($("input[data-level=" + level + "]").val(), 10);
for (var i = 0; i < cardCount; i++) {
$td.append(createOneCard(level));
}
}
function createOneRow(level) {
var rowHtml = "<tr data-level='" + level + "'>";
rowHtml += "<th>";
rowHtml += "第" + level + "层";
rowHtml += "<div class='form-inline'>";
rowHtml += "卡数：" + "<input class='form-control' style='width: 90px;' type='number' data-level='" + level + "' min='1' max='15' value='1'/>";
rowHtml += "<button class='btn btn-sm btn-primary ml-2' onclick='createCards(" + level + ")'>";
rowHtml += "确定";
rowHtml += "</button>";
rowHtml += "</div>";
rowHtml += "</th>";
rowHtml += "<td>" + createOneCard(level) + "</td>";
rowHtml += "</tr>";
return rowHtml;
}
function createCardSet() {
$("#tblCards tbody").children().remove();
var levels = parseInt($("#numCardLevelCount").val(), 10);
for (var i = levels; i >= 1; i--) {
var rowHtml = createOneRow(i);
$("#tblCards tbody").append(rowHtml);
}
}
$(function () {
createCardSet();
});
</script>
<script>
var hasCards = {};
function computeConsume() {
var $cards = $("#tblCards tbody tr").find("div[data-card-id]");
var $hasCards = $cards.find("input[type=number][data-card-id]");
for (var i = 0; i < $hasCards.length; i++) {
hasCards[$hasCards.eq(i).data("card-id")] = parseInt($hasCards.eq(i).val(), 10);
}
var consumes = {};
for (var i = 0; i < $cards.length; i++) {
var consume = computeOneCardConsume($cards.eq(i).data("card-id"));
for (var attr in consume) {
if (consumes[attr]) {
consumes[attr] += consume[attr];
} else {
consumes[attr] = consume[attr];
}
}
}
for (var cardId in consumes) {
$("#tblCards tbody tr").find("div[data-card-id=" + cardId + "]").find("div.alert-info")
.text("消耗数：" + consumes[cardId]);
}
}
function computeOneCardConsume(cardId) {
var ret = {};
ret[cardId] = 1;
var $card = $("div[data-card-id=" + cardId + "]");
var level = parseInt($card.data("level"), 10);
if (level > 1) {
if (hasCards[cardId] > 0) {
hasCards[cardId]--;
} else {
var $consumeCards = $card.find("input[type=text][data-card-id=" + cardId + "]");
for (var i = 0; i < $consumeCards.length; i++) {
var consume = computeOneCardConsume($consumeCards.eq(i).val());
for (var attr in consume) {
if (ret[attr]) {
ret[attr] += consume[attr];
} else {
ret[attr] = consume[attr];
}
}
}
}
}
return ret;
}
</script>
</body>
</html>今天的文章魔法卡片计算器分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/24372.html
