最近一直在重构网站（海岛奇兵那边的），想做的和官方很像（国内官方是腾讯），就差伤害计算器了，写了个全新的，不是原来的风格了，可能面向所有游戏一样（得自己稍微改改，不懂的去问AI）下面是代码（不是海岛风格的）
<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>海岛奇兵攻击计算工具</title>
<style>
/* 全局样式 */
body {
font-family: \'Open Sans\', Arial, sans-serif;
background: linear-gradient(135deg, #eef7ff 0%, #ffffff 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 800px;
width: 100%;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.section {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.input-group label {
flex: 1 1 100%;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.input-group input {
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.input-group input:focus {
border-color: #2c7be5;
outline: none;
box-shadow: 0 0 5px rgba(44,123,230,0.5);
}
/* 按钮样式 */
.btn {
padding: 12px 30px;
background: linear-gradient(135deg, #2c7be5 0%, #1e5799 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn:hover {
background: linear-gradient(135deg, #1e5799 0%, #2c7be5 100%);
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(44,123,230,0.3);
}
/* 结果展示 */
.result-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.result-table th, .result-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.result-table th {
background: #f8f9fa;
color: #34495e;
}
.result-total {
font-weight: bold;
color: #e74c3c;
}
</style>
</head>
<body>
<div class=\"container\">
<h1>海岛奇兵攻击计算工具</h1>
<div class=\"section\">
<h2>进攻方部队配置</h2>
<div id=\"attackFields\">
<!-- 初始表单 -->
<div class=\"input-group\">
<label>
部队名称：
<input type=\"text\" class=\"attack-name\" placeholder=\"如弓箭手\" required>
</label>
<label>
单位攻击力：
<input type=\"number\" class=\"attack-power\" step=\"0.1\" required>
</label>
<label>
部队数量：
<input type=\"number\" class=\"attack-count\" min=\"1\" required>
</label>
<button class=\"btn btn-remove\" onclick=\"removeField(this)\">移除</button>
</div>
</div>
<button class=\"btn\" onclick=\"addAttackField()\">+ 添加新部队</button>
</div>
<div class=\"section\">
<h2>加成设置</h2>
<div class=\"input-group\">
<label>
攻击加成（%）：
<input type=\"number\" id=\"attackBonus\" step=\"1\" placeholder=\"如150表示150%\">
</label>
</div>
</div>
<button class=\"btn\" onclick=\"calculateAttack()\">开始计算</button>
<div class=\"result\" id=\"result\">
<table class=\"result-table\" style=\"display:none;\">
<tr>
<th>部队名称</th>
<th>单位攻击力</th>
<th>数量</th>
<th>总贡献</th>
</tr>
<tbody id=\"resultRows\"></tbody>
<tr class=\"total-row\">
<td colspan=\"3\" class=\"result-total\">总攻击力</td>
<td class=\"result-total\" id=\"totalAttack\"></td>
</tr>
<tr class=\"total-row\">
<td colspan=\"3\" class=\"result-total\">最终伤害</td>
<td class=\"result-total\" id=\"finalDamage\"></td>
</tr>
</table>
</div>
</div>
<script>
let attackFieldCount = 1;
function addAttackField() {
const container = document.getElementById(\'attackFields\');
const newField = document.createElement(\'div\');
newField.className = \'input-group\';
newField.innerHTML = `
<label>
部队名称：
<input type=\"text\" class=\"attack-name\" placeholder=\"如弓箭手\" required>
</label>
<label>
单位攻击力：
<input type=\"number\" class=\"attack-power\" step=\"0.1\" required>
</label>
<label>
部队数量：
<input type=\"number\" class=\"attack-count\" min=\"1\" required>
</label>
<button class=\"btn btn-remove\" onclick=\"removeField(this)\">移除</button>
`;
// 直接追加到容器末尾，避免定位问题
container.appendChild(newField);
attackFieldCount++;
}
function removeField(button) {
const field = button.closest(\'.input-group\');
if (field) {
field.remove();
// 确保至少保留一个表单
if (document.querySelectorAll(\'.input-group\').length < 2) {
alert(\"至少需要保留一个部队配置！\");
return;
}
}
}
function calculateAttack() {
const attackFields = document.querySelectorAll(\'#attackFields .input-group\');
const attackForces = [];
attackFields.forEach(field => {
const name = field.querySelector(\'.attack-name\').value.trim();
const power = parseFloat(field.querySelector(\'.attack-power\').value);
const count = parseInt(field.querySelector(\'.attack-count\').value);
if (name && !isNaN(power) && !isNaN(count)) {
attackForces.push({ name, power, count });
}
});
const attackBonus = (parseFloat(document.getElementById(\'attackBonus\').value) || 0) / 100;
const baseTotal = attackForces.reduce((sum, f) => sum + f.power * f.count, 0);
const finalDamage = baseTotal * (1 + attackBonus);
// 渲染详细结果
const resultTable = document.querySelector(\'.result-table\');
const resultRows = document.getElementById(\'resultRows\');
resultRows.innerHTML = \'\';
attackForces.forEach(force => {
const row = document.createElement(\'tr\');
row.innerHTML = `
<td>{force.name}</td>
<td>{force.power}</td>
<td>{force.count}</td>
<td>{(force.power * force.count).toFixed(2)}</td>
`;
resultRows.appendChild(row);
});
document.getElementById(\'totalAttack\').textContent = baseTotal.toFixed(2);
document.getElementById(\'finalDamage\').textContent = finalDamage.toFixed(2);
resultTable.style.display = \'table\';
}
</script>
</body>
</html>
下面是海岛奇兵风格的，
<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>海岛奇兵攻击计算工具</title>
<style>
/* 全局样式 */
body {
font-family: \'Arial\', sans-serif;
background: url(\'https://img.alicdn.com/tfs/TB1GyZuKAL0gK0jSZFtXXXQCXXa-1920-1080.jpg\') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}
.container {
max-width: 800px;
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
transition: all 0.3s ease;
}
.section {
background: rgba(255, 255, 255, 0.1);
padding: 25px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.input-group label {
flex: 1 1 100%;
display: flex;
flex-direction: column;
margin-bottom: 10px;
color: #fff;
}
.input-group input {
padding: 12px;
border: 2px solid #4CAF50;
border-radius: 8px;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transition: all 0.3s ease;
}
.input-group input:focus {
border-color: #FFEB3B;
outline: none;
box-shadow: 0 0 5px rgba(255, 235, 59, 0.5);
}
/* 按钮样式 */
.btn {
padding: 12px 30px;
background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn:hover {
background: linear-gradient(135deg, #8BC34A 0%, #4CAF50 100%);
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
/* 结果展示 */
.result-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.result-table th, .result-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #4CAF50;
color: #fff;
}
.result-table th {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.result-total {
font-weight: bold;
color: #FFEB3B;
}
</style>
</head>
<body>
<div class=\"container\">
<h1>海岛奇兵攻击计算工具</h1>
<div class=\"section\">
<h2>进攻方部队配置</h2>
<div id=\"attackFields\">
<!-- 初始表单 -->
<div class=\"input-group\">
<label>
部队名称：
<input type=\"text\" class=\"attack-name\" placeholder=\"如弓箭手\" required>
</label>
<label>
单位攻击力：
<input type=\"number\" class=\"attack-power\" step=\"0.1\" required>
</label>
<label>
部队数量：
<input type=\"number\" class=\"attack-count\" min=\"1\" required>
</label>
<button class=\"btn btn-remove\" onclick=\"removeField(this)\">移除</button>
</div>
</div>
<button class=\"btn\" onclick=\"addAttackField()\">+ 添加新部队</button>
</div>
<div class=\"section\">
<h2>加成设置</h2>
<div class=\"input-group\">
<label>
攻击加成（%）：
<input type=\"number\" id=\"attackBonus\" step=\"1\" placeholder=\"如150表示150%\">
</label>
</div>
</div>
<button class=\"btn\" onclick=\"calculateAttack()\">开始计算</button>
<div class=\"result\" id=\"result\">
<table class=\"result-table\" style=\"display:none;\">
<tr>
<th>部队名称</th>
<th>单位攻击力</th>
<th>数量</th>
<th>总贡献</th>
</tr>
<tbody id=\"resultRows\"></tbody>
<tr class=\"total-row\">
<td colspan=\"3\" class=\"result-total\">总攻击力</td>
<td class=\"result-total\" id=\"totalAttack\"></td>
</tr>
<tr class=\"total-row\">
<td colspan=\"3\" class=\"result-total\">最终伤害</td>
<td class=\"result-total\" id=\"finalDamage\"></td>
</tr>
</table>
</div>
</div>
<script>
let attackFieldCount = 1;
function addAttackField() {
const container = document.getElementById(\'attackFields\');
const newField = document.createElement(\'div\');
newField.className = \'input-group\';
newField.innerHTML = `
<label>
部队名称：
<input type=\"text\" class=\"attack-name\" placeholder=\"如弓箭手\" required>
</label>
<label>
单位攻击力：
<input type=\"number\" class=\"attack-power\" step=\"0.1\" required>
</label>
<label>
部队数量：
<input type=\"number\" class=\"attack-count\" min=\"1\" required>
</label>
<button class=\"btn btn-remove\" onclick=\"removeField(this)\">移除</button>
`;
// 直接追加到容器末尾，避免定位问题
container.appendChild(newField);
attackFieldCount++;
}
function removeField(button) {
const field = button.closest(\'.input-group\');
if (field) {
field.remove();
// 确保至少保留一个表单
if (document.querySelectorAll(\'.input-group\').length < 2) {
alert(\"至少需要保留一个部队配置！\");
return;
}
}
}
function calculateAttack() {
const attackFields = document.querySelectorAll(\'#attackFields .input-group\');
const attackForces = [];
attackFields.forEach(field => {
const name = field.querySelector(\'.attack-name\').value.trim();
const power = parseFloat(field.querySelector(\'.attack-power\').value);
const count = parseInt(field.querySelector(\'.attack-count\').value);
if (name && !isNaN(power) && !isNaN(count)) {
attackForces.push({ name, power, count });
}
});
const attackBonus = (parseFloat(document.getElementById(\'attackBonus\').value) || 0) / 100;
const baseTotal = attackForces.reduce((sum, f) => sum + f.power * f.count, 0);
const finalDamage = baseTotal * (1 + attackBonus);
// 渲染详细结果
const resultTable = document.querySelector(\'.result-table\');
const resultRows = document.getElementById(\'resultRows\');
resultRows.innerHTML = \'\';
attackForces.forEach(force => {
const row = document.createElement(\'tr\');
row.innerHTML = `
<td>{force.name}</td>
<td>{force.power}</td>
<td>{force.count}</td>
<td>{(force.power * force.count).toFixed(2)}</td>
`;
resultRows.appendChild(row);
});
document.getElementById(\'totalAttack\').textContent = baseTotal.toFixed(2);
document.getElementById(\'finalDamage\').textContent = finalDamage.toFixed(2);
resultTable.style.display = \'table\';
}
</script>
</body>
</html>
Comments NOTHING