Dom案例——计算器，二级联动，表单验证（附完整代码）

本文主要是介绍Dom案例——计算器，二级联动，表单验证（附完整代码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>