1.一个简单的计算器，用JS书写_js做计算器时如何不能连续输入小数点-CSDN博客

本文链接：https://blog.csdn.net/WDKKING/article/details/69525823

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

onload = function () {

var num1 = document.getElementById ("tx1"); // 声明保存第一个输入框

var num2 = document.getElementById ("tx2"); // 声明保存第二个输入框

var num3 = document.getElementById ("jia"); // 声明一个变量保存加运算

var num4 = document.getElementById ("jian"); // 声明一个变量保存加运算

var num5 = document.getElementById ("chen"); // 声明一个变量保存加运算

var num6 = document.getElementById ("chu"); // 声明一个变量保存加运算

// 一个加法的运算，需要一个触发事件，取浮点数可以运算小数

num3.onclick = function () {

document.write( parseFloat(num1.value) + parseFloat(num2.value) );

}

// 一个减法的运算，需要一个触发事件，取浮点数可以运算小数

num4.onclick = function () {

document.write( parseFloat(num1.value)- parseFloat(num2.value) );

}

// 一个乘法的运算，需要一个触发事件，取浮点数可以运算小数

num5.onclick = function () {

document.write( parseFloat(num1.value) * parseFloat(num2.value) );

}

// 一个除法的运算，需要一个触发事件，取浮点数可以运算小数

num6.onclick = function () {

document.write( parseFloat(num1.value) / parseFloat(num2.value) );

}

</script>

<style>

// 以下是一些样式

.box{
height: 200px;
width: 200px;
background: #ccc;
position:fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.box input:nth-child(1){
width: 80px;
height: 40px;
border: 1px solid black;
margin-left: 15px;
margin-top: 10px;
}
.box input:nth-child(2){
width:80px;
height: 40px;
border: 1px solid black;
margin-top: 10px;
}
.box input:nth-child(3){
text-align: center;
width: 40px;
height: 40px;
background: black;
color: white;
font-size: 18px;
border: 0;
margin-top: 60px;
margin-left: 4px;
border-radius: 50%;
}
.box input:nth-child(4){
text-align: center;
width: 40px;
height: 40px;
background: black;
color: white;
font-size: 18px;
border: 0;
border-radius: 50%;
}
.box input:nth-child(5){
text-align: center;
width: 40px;
height: 40px;
background: black;
color: white;
font-size: 18px;
border: 0;
border-radius: 50%;
}
.box input:nth-child(6){
text-align: center;
width: 40px;
height: 40px;
background: black;
color: white;
font-size: 18px;
border: 0;
border-radius: 50%;
}

</style>

</head>
<body>

<div class="box">
<input type="text" id="tx1" value=""/>
<input type="text" id="tx2" value=""/>
<input type="button" id="jia" value="+"/>
<input type="button" id="chen" value="*"/>
<input type="button" id="chu" value="/"/>
<input type="button" id="jian" value="-"/>
</div>

</body>
</html>