HTML+JS计算器
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<input type="text" id="display" disabled>
<br>
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('+')">+</button><br>
<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button><br>
<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('*')">*</button><br>
<button onclick="addToDisplay('0')">0</button>
<button onclick="addToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button><br>
<script>
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function calculate() {
var result = eval(document.getElementById('display').value);
document.getElementById('display').value = result;
}
</script>
</body>
</html>
用户输入显示
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>User Input Display</title>
</head>
<body>
<!--创建一个标签和输入字段,以便用户输入数据-->
<label for="userInput">输入您的内容:</label>
<input type="text" id="userInput">
<!--创建一个按钮,当用户点击时,嗲用displayInput函数-->
<button onclick="displayInput()">点击查看</button>
<!--创建一个段落元素,用来显示用户输入的内容-->
<p id="displayArea"></p>
<script>
function displayInput() {
var userInput = document.getElementById("userInput").value;
document.getElementById("displayArea").innerHTML = userInput;
}
</script>
</body>
</html>
随机码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Verification Code</title>
</head>
<body>
<h1>随机验证码:</h1>
<p id="code"></p>
<button onclick="generateCode()">生成随机码</button>
<script>
function generateCode() {
var code = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 6; i++) {
code += possible.charAt(Math.floor(Math.random() * possible.length));
}
document.getElementById("code").innerHTML = code;
}
</script>
</body>
</html>
密码校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<form>
<label for="password1">密码:</label>
<input type="password" id="password1" name="password1"><br><br>
<label for="password2">重复密码:</label>
<input type="password" id="password2" name="password2"><br><br>
<input type="submit" value="提交">
</form>
<script>
const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
if (password1.value !== password2.value) {
alert("密码不一致");
event.preventDefault();
}
});
</script>
</body>
</html>
查看密码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<form action="/login" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="checkbox" onclick="togglePassword()">查看密码<br><br>
<input type="submit" value="Submit">
</form>
<script>
function togglePassword() {
var passwordField = document.getElementById("password");
if (passwordField.type === "password") {
passwordField.type = "text";
} else {
passwordField.type = "password";
}
}
</script>
</body>
</html>
点击按钮弹出信息
<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('弹出');
};
</script>
登录校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="success.html" method="get" onsubmit="return checkUserInfo();">
<table border="1px" width="450px" align="center">
<tr>
<td>用户名:</td>
<td><input type="text" id="userName" /></td>
</tr>
<tr>
<td>手机 :</td>
<td><input type="text" class="tel"/></td>
</tr>
<tr>
<td>座机 :</td>
<td><input type="text" class="tel"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/> </td>
</tr>
</table>
</form>
<script type="text/javascript">
function checkUserInfo(){
var userNameInput = document.getElementById("userName");
var userName_value = userNameInput.value;
var tels = document.getElementsByClassName("tel");
document.getElementsByName('name属性的值');
document.getElementsByTagName('标签的名称');
if(""==userName_value){
alert('用户名必须要填写!');
return false;
}else{
if(userName_value.length<6){
alert('用户名至少是6位!');
return false;
}
}
return true;
}
</script>
</body>
</html>
点击按钮显示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="showData();">显示数据</button>
<hr />
<div id="show">
</div>
<script type="text/javascript">
function showData(){
var div = document.getElementById('show');
div.innerHTML='<h1>快乐时刻</h1><p>日本在第二次世界大战期间,于1945年8月6日和8月9日,分别遭到美国投掷的两枚原子弹袭击。<br>' +
'第一颗原子弹于8月6日早上8点15分被投入广岛市中心,称为“小男孩”,造成约14万人死亡、受伤或失踪。<br>' +
'第二颗原子弹于8月9日上午11点02分被投入长崎市中心,称为“胖子”,造成约7.5万人死亡、受伤或失踪。<br>' +
'这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一,也引起了全球对核武器及其使用的深刻反思和警醒。</p>';
}
</script>
</body>
</html>