<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 400px;
margin: auto;
background-color: cadetblue;
padding: 20px 45px;
}
input {
width: 120px;
height: 30px;
font-size: 14px;
}
button {
width: 30px;
height: 30px;
}
.content div {
width: 100px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="content">
<!-- 输入的第一个值 -->
<input type="text" id="num1" placeholder="请输入第一个数字">
<!-- 输入的第二个值 -->
<input type="text" id="num2" placeholder="请输入第二个数字" <!-- 加 -->
<button id="add" onclick="add()">加</button>
<!-- 减 -->
<button id="lessen" onclick="lessen()">减</button>
<!-- 乘 -->
<button id="mul" onclick="mul()">乘</button>
<!-- 除 -->
<button id="divide" onclick="divide()">除</button>
<!-- 输出结果 -->
<p>结果是:</p>
<div id="result"></div>
<!-- js -->
</div>
<script>
// 封装获取对象
function fun() {
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var result = document.querySelector('#result');
var num1Val = parseFloat(num1.value);
var num2Val = parseFloat(num2.value);
var arr = [num1Val,num2Val];
return arr;
}
// 加法函数
function add() {
var arrVal = fun();
result.innerHTML = arrVal[0] + arrVal[1];
}
// 减法函数
function lessen() {
var arrVal = fun();
result.innerHTML = arrVal[0] - arrVal[1];
}
// 乘法函数
function mul() {
var arrVal = fun();
result.innerHTML = arrVal[0] * arrVal[1];
}
// 除法函数
function divide() {
var arrVal = fun();
result.innerHTML = arrVal[0] / arrVal[1];
}
</script>
</body>
</html>
利用js原生代码写计算器
最新推荐文章于 2023-12-03 11:33:32 发布