<!DOCTYPE html>
<html>
<head>
	<title>等级属性查看器</title>
	<meta charset="UTF-8">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
<pre><code>	h1 {
		text-align: center;
		margin-top: 50px;
	}

	form {
		text-align: center;
		margin-top: 50px;
	}

	table {
		margin: 0 auto;
		border-collapse: collapse;
		width: 80%;
	}

	th, td {
		border: 1px solid black;
		padding: 10px;
		text-align: center;
	}

	th {
		background-color: #4CAF50;
		color: white;
	}

	input[type=number] {
		width: 100px;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		box-shadow: 1px 1px 1px grey;
		margin-right: 10px;
		font-size: 16px;
	}

	input[type=submit] {
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		box-shadow: 1px 1px 1px grey;
		background-color: #4CAF50;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}

	#points {
		margin-top: 20px;
		text-align: center;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>等级属性查看器</h1>
	<form>
		<label for="level">请输入等级:</label>
		<input type="number" id="level" name="level" min="1" max="5000" required>
		<input type="submit" value="查看属性">
	</form>
	<div id="points"></div>
<pre><code>&lt;script&gt;
	document.querySelector('form').addEventListener('submit', function(e) {
		e.preventDefault();
		var level = document.querySelector('#level').value;
		var points = calculatePoints(level);
		if (points) {
			var html = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;等级&lt;/th&gt;&lt;th&gt;分配属性&lt;/th&gt;&lt;th&gt;可兑换意志&lt;/th&gt;&lt;th&gt;可兑换骨气&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;' + level + '&lt;/td&gt;&lt;td&gt;' + points + '&lt;/td&gt;&lt;td&gt;' + Math.floor(points/15) + '&lt;/td&gt;&lt;td&gt;' + Math.floor(points/10) + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
			document.querySelector('#points').innerHTML = html;
		}
	});

	function calculatePoints(level) {
		if (level &gt;= 1 &amp;&amp; level &lt;= 1000) {
			return level * 2;
		} else if (level &gt; 1000 &amp;&amp; level &lt;= 5000) {
			return (1000 * 2) + ((level - 1000) * 1);
		} else {
			alert(&quot;请输入1-5000之间的等级&quot;);
			return false;
		}
	}
&lt;/script&gt;
</code></pre>
</body>
</html>

原文地址: https://www.cveoy.top/t/topic/bEM2 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录