写一个工具类的网页
工具类网页
这是一个工具类网页,提供以下工具:
- 计算器
- 单位转换
- 随机数生成器
- 密码生成器
<h2>计算器</h2>
<p>请输入两个数字:</p>
<input type="number" id="num1" placeholder="请输入数字">
<input type="number" id="num2" placeholder="请输入数字">
<button onclick="add()">加</button>
<button onclick="subtract()">减</button>
<button onclick="multiply()">乘</button>
<button onclick="divide()">除</button>
<p>计算结果为:<span id="result"></span></p>
<h2>单位转换</h2>
<p>请选择需要转换的单位:</p>
<select id="unit">
<option value="米">米</option>
<option value="千米">千米</option>
<option value="英里">英里</option>
<option value="海里">海里</option>
</select>
<p>请输入需要转换的数值:</p>
<input type="number" id="num" placeholder="请输入数值">
<button onclick="convert()">转换</button>
<p>转换结果为:<span id="converted"></span></p>
<h2>随机数生成器</h2>
<p>请输入生成随机数的范围:</p>
<input type="number" id="min" placeholder="最小值">
<input type="number" id="max" placeholder="最大值">
<button onclick="generate()">生成</button>
<p>生成的随机数为:<span id="random"></span></p>
<h2>密码生成器</h2>
<p>请输入密码长度:</p>
<input type="number" id="length" placeholder="请输入密码长度">
<button onclick="generatePassword()">生成密码</button>
<p>生成的密码为:<span id="password"></span></p>
<script>
function add() {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let result = parseInt(num1) + parseInt(num2);
document.getElementById("result").innerHTML = result;
}
function subtract() {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let result = parseInt(num1) - parseInt(num2);
document.getElementById("result").innerHTML = result;
}
function multiply() {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let result = parseInt(num1) * parseInt(num2);
document.getElementById("result").innerHTML = result;
}
function divide() {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let result = parseInt(num1) / parseInt(num2);
document.getElementById("result").innerHTML = result;
}
function convert() {
let num = document.getElementById("num").value;
let unit = document.getElementById("unit").value;
if (unit == "米") {
let converted = num * 0.001;
document.getElementById("converted").innerHTML = converted + "千米";
} else if (unit == "千米") {
let converted = num * 1000;
document.getElementById("converted").innerHTML = converted + "米";
} else if (unit == "英里") {
let converted = num * 1.60934;
document.getElementById("converted").innerHTML = converted + "千米";
} else if (unit == "海里") {
let converted = num * 1.852;
document.getElementById("converted").innerHTML = converted + "千米";
}
}
function generate() {
let min = document.getElementById("min").value;
let max = document.getElementById("max").value;
let random = Math.floor(Math.random() * (max - min + 1)) + min;
document.getElementById("random").innerHTML = random;
}
function generatePassword() {
let length = document.getElementById("length").value;
let password = "";
let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";
for (let i = 0; i < length; i++) {
password += characters.charAt(Math.floor(Math.random() * characters.length));
}
document.getElementById("password").innerHTML = password;
}
</script>
原文地址: https://www.cveoy.top/t/topic/cRvs 著作权归作者所有。请勿转载和采集!