直接贴代码,第一次写可以参考参考。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>四则运算器</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f7f1e3;
}
.main {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
background-color: #ced6e0;
box-shadow: 0px 0px 10px 5px rgb(0,0,0,.3);
border-radius: 11px;
}
.top {
position: absolute;
top: 10px;
left: 10px;
width: 380px;
height: 300px;
background-color: #dfe4ea;
border-radius: 4px;
}
.bottom {
position: absolute;
bottom: 10px;
left: 10px;
width: 380px;
height: 70px;
background-color: darkgrey;
}
.input1 {
float: left;
height: 140px;
width: 140px;
margin-top: 70px;
margin-bottom: 50px;
font-size: 3em;
background-color: #ffffff;
border: 0;
margin-bottom: 0;
}
.input2 {
float: right;
height: 140px;
width: 140px;
margin-top: 70px;
margin-bottom: 50px;
font-size: 3em;
background-color: #ffffff;
border-style: none;
margin-bottom: 0;
}
table {
float: left;
width: 100px;
height: 140px;
margin-top: 70px;
background-color: #999;
border-collapse: collapse;
border: 0;
padding: 0;
}
table tr td .button{
border-width: 0;
font-size: 50px;
}
.submit {
width: 60px;
height: 30px;
margin-top: 33px;
margin-left:102px;
float: left;
border-radius: 5px;
border-width: 0;
}
.submit:hover {
box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
background-color: #a4b0be;
}
.reset {
width: 60px;
height: 30px;
margin-top: 33px;
margin-right:102px;
float:right;
border-radius: 5px;
border-width: 0;
}
.reset:hover {
box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
background-color: #a4b0be;
}
.bottom {
width: 379px;
height: 68px;
border-radius: 4px;
background-color: #dfe4ea;
}
.answer {
float: left;
height: 32px;
width: 183px;
margin-left: 100px;
margin-top: 20px;
background-color: #f1f2f6;
text-align: center;
font-size: 24px;
}
.button {
width: 100%;
height: 100%;
}
.button:hover {
background-color: #f6e58d;
}
footer {
position: absolute;
height: 60px;
width: 1280px;
background-color: gray;
bottom: 0px;
}
footer p {
color: #888;
line-height: 60px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<form target="iframe" onsubmit="return formSubmit(this)">
<input type="number" class="input1" required min="-100" max="100">
<table>
<tr>
<td>
<!-- <button class="button">+</button> -->
<input type="button" value="+" class="button">
</td>
<td>
<!-- <button class="button">-</button> -->
<input type="button" value="-" class="button">
</td>
</tr>
<tr>
<td>
<!-- <button class="button">×</button> -->
<input type="button" value="×" class="button">
</td>
<td>
<!-- <button class="button">÷</button> -->
<input type="button" value="÷" class="button">
</td>
</tr>
</table>
<input type="number" class="input2" min="-100" max="100" required>
<div>
<!-- <button value="submit" class="submit">提交</button> -->
<input type="submit" value="提交" class="submit">
</div>
<div>
<!-- <button value="reset" class="reset">重置</button> -->
<input type="reset" value="重置" class="reset" >
</div>
</form>
<iframe name="iframe" src="about:blank" style="display:none;"></iframe>
</div>
<div class="bottom">
<div class="answer">
</div>
</div>
</div>
<footer>
<p align="center">
Copyright © 2020 MADE IN CHINA
</p>
</footer>
<script>
var j;
var k;
var number3;
var btns = document.getElementsByClassName('button');
for (i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
var character = this.value;
if (character === '+') {
k = 1;
} else if (character === '-') {
k = 2;
} else if (character === '×') {
k = 3
} else if (character === '÷') {
k = 4;
}
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = '#ffbe76';
}
}
function formSubmit (even) {
var number1 = Number(even.querySelector('.input1').value);
var number2 = Number(even.querySelector('.input2').value);
var answer = document.querySelector('.answer');
switch (k)
{
case 1:
number3 = number1 + number2;
break;
case 2:
number3 = number1 - number2;
break;
case 3:
number3 = number1 * number2;
break;
case 4:
number3 = number1 / number2;
number3 = number3.toFixed(3);
break;
default:
answer.innerHTML = '请选择符号';
return false;
}
if ((typeof(number3) == undefined || isNaN(number3) || !isFinite(number3)) && k != 5) {
answer.innerHTML = '请输入有效值';
} else if (k != 5) {
answer.innerHTML = number3;
}
return true
}
var btn_reset = document.querySelector('.reset');
btn_reset.onclick = function() {
// 我觉得这是给了content2值,改变不了原来的东西;div呢种有专门的函数就可以
// var content2 = document.querySelector('.input2').value;
// content2.innerHTML = '';\
document.querySelector('.input2').value = '';
document.querySelector('.input1').value = '';
var answer = document.querySelector('.answer');
k = 5;
console.log(k);
answer.innerHTML = '';
for (i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
}
</script>
</body>
</html>