Dom案例——计算器，二级联动，表单验证（附完整代码）
文章目录
- Dom案例——计算器，二级联动，表单验证（附完整代码）
- 一、计算器案例
- 二、二级联动
- 三、表单验证
一、计算器案例
1、实现计算器加法和乘法的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="text01"/>
+
<input type="text" id="text02"/>
<button onclick="add()">=</button>
<input type="text" id="text03"/>
<br />
<input type="text" id="text04"/>
*
<input type="text" id="text05"/>
<button onclick="multiply()">=</button>
<input type="text" id="text06"/>
<script type="text/javascript">
function add(){
//获取到输入框的value是string类型
var result = parseInt(text01.value) + parseInt(text02.value);
text03.value = result;
}
function multiply(){
//获取到输入框的value是string类型
var result = parseInt(text04.value) * parseInt(text05.value);
text06.value = result;
}
</script>
</body>
</html>
2、使用HTML和JavaScript DOM实现的基本计算器 （完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
padding: 10px;
border: 1px solid #ccc;
max-width: 300px;
margin: 0 auto;
}
button {
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('+')">+</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('-')">-</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="appendToResult('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('/')">/</button>
</div>
<script>
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
const result = document.getElementById('result').value;
try {
document.getElementById('result').value = eval(result);
} catch (error) {
document.getElementById('result').value = 'Error';
}
}
</script>
</body>
</html>
3、代码效果：
二、二级联动
1、思路：
首先编写两个下拉列表
获取其中一个下拉列表
并为其绑定onchange事件
并获取其选中的值：var optionVal = select.value;
然后根据选中的值，重新设置另一个下拉列表的innerHTML
2、代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option value="sc">四川</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select id="city">
<option>成都</option>
<option>绵阳</option>
<option>雅安</option>
<option>乐山</option>
<option>攀枝花</option>
</select>市
<script type="text/javascript">
//给省份绑定改变事件
province.onchange = function(){
if(this.value == "sc"){
updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);
}else if(this.value == "hn"){
updateCity(["长沙","永州","娄底","益阳","张家界"]);
}else if(this.value == "hb"){
updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);
}
}
function updateCity(arr){
//清空city列表
city.length = 0;
for(var i = 0;i<arr.length;i++){
var option = document.createElement("option");
option.innerText = arr[i];
city.appendChild(option);
}
}
</script>
</body>
</html>
3、代码效果：
三、表单验证
1、思路：
用户名不能为空
密码和确认密码是否一致
表单项不符合条件不能提交表单
表单的提交事件—onsubmit
2、代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<form action="#" method="post" onsubmit="return fun01()">
账户：<input type="text" id="username" /><span></span><br />
密码：<input type="password" id="password" /><span></span><br />
确认密码：<input type="password" id="repassword" /><span></span><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var span01 = document.getElementsByTagName("span")[0];
var span02 = document.getElementsByTagName("span")[1];
var span03 = document.getElementsByTagName("span")[2];
function fun01(){
span01.innerText = "";
span02.innerText = "";
span03.innerText = "";
var bool = true;
if(username.value.trim() == ""){
span01.innerText = "账号不能为空";
bool = false;
}
if(password.value.trim() == ""){
span02.innerText = "密码不能为空";
bool = false;
}
if(repassword.value.trim() == ""){
span03.innerText = "确认密码不能为空";
bool = false;
}else if(repassword.value.trim() != password.value.trim()){
span03.innerText = "确认密码与密码不一致";
bool = false;
}
return bool;
}
</script>
</body>
</html>
3、代码效果：
