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

最新推荐文章于 2024-10-02 05:39:15 发布

风起携月归

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量353

点赞数 4

分类专栏： java JavaEE 文章标签： javascript

本文链接：https://blog.csdn.net/yjp1240201821/article/details/139687938

版权

JavaEE 同时被 2 个专栏收录

65 篇文章 0 订阅

订阅专栏

java

59 篇文章 0 订阅

订阅专栏

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>