主要代码:
HTML:
<body>
<div class="divbox">
<div class="counter">
<div class="counter-top">
<input type="text" class="content-input" readOnly="true" id="frame" value="">
</div>
<div class="counter-down">
<div class="btns">
<div class="number">
<input type="button" value="1" class="btn-num" id="one">
<input type="button" value="2" class="btn-num" id="two">
<input type="button" value="3" class="btn-num" id="three">
<input type="button" value="4" class="btn-num" id="four">
<input type="button" value="5" class="btn-num" id="five">
<input type="button" value="6" class="btn-num" id="six">
<input type="button" value="7" class="btn-num" id="seven">
<input type="button" value="8" class="btn-num" id="eight">
<input type="button" value="9" class="btn-num" id="nine">
<input type="button" value="0" class="btn-num" id="zero">
<input type="button" value="." class="btn-num" id="dot">
</div>
<input type="button" value="+" class="btn-typeid" id="add">
<input type="button" value="-" class="btn-typeid" id="minus">
<input type="button" value="*" class="btn-typeid" id="product">
<input type="button" value="/" class="btn-typeid" id="divide">
<input type="button" value="←" class="btn-typeid" id="back">
<input type="button" value="C" class="btn-typeid" id="reset">
<input type="button" value="=" class="btn-typeid" id="sum">
</div>
</div>
</div>
</div>
<script src="./counter.js"></script>
</body>
CSS:
/* 整体 */
*{
padding: 0px;
margin: 0px;
}
.divbox{
display: flex;
justify-content: center;
}
.counter{
background-color: #efefef;
width: 270px;
height: 360px;
border: 2px solid black
}
/* 输入框 */
.content-input{
width: 250px;
height: 50px;
margin: 15px 10px;
font-size: 25px;
}
/* 键盘盒子弹性布局 */
.counter-down{
display: flex;
justify-content: center;
}
.btns{
display: inline-grid;
grid-template-columns: repeat(4, 60px);
grid-template-rows: repeat(5, 50px);
grid-gap: 1px 1px;
}
.number{
display: inline-grid;
grid-template-columns: repeat(3, 60px);
grid-template-rows: repeat(4, 50px);
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
}
.btn-num,.btn-typeid{
width: 55px;
height:45px;
font-size: 25px;
margin: 5px;
}
#zero{
width: 110px;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 6;
}
#sum{
height: 95px;
}
JS:
//设置数据容器
var value1 = '';
var value2 = '';
var sum = '';
var flag = 0;
//获取id函数
function tagID(id) {
return document.getElementById(id);
}
//console.log('add');
//判断value1是否赋值
function Flag() {
if (flag == 0) {
//flag==0 value1赋值
value1 = this.value;
//console.log(value1);
} else {
value2 = this.value;
}
flag++
}
/* 数字键盘 */
//获取对象集合
var nums = document.getElementsByClassName("btn-num");
var btns = document.querySelectorAll(".btn-num");
var num = "";
//遍历对象
for (let i = 0; i < nums.length; i++) {
//绑定事件
nums[i].onclick = function () {
//获取值
tagID("frame").value += this.value;
if (flag == 0) {
value1 += this.value;
} else {
value2 += this.value;
}
}
}
/* 功能键盘 */
//运算符变量
var char = "''";
// "+"
tagID("add").onclick = function Add() {
tagID("frame").value += this.value;
flag++;
char = "+";
}
// "-"
tagID("minus").onclick = function () {
tagID("frame").value += this.value;
char = "-";
flag++;
}
// "*"
tagID("product").onclick = function () {
tagID("frame").value += this.value;
char = "*";
flag++;
}
// "/"
tagID("divide").onclick = function () {
tagID("frame").value += this.value;
char = "/";
flag++;
}
//退格键
tagID("back").onclick = function () {
//输入框中字符串操作
//获取输入框中字符串的长度
var textLeng = tagID("frame").value.length;
//获取输入框中的字符串
var textValue = tagID("frame").value;
//操作字符串删除最后一个字符
tagID("frame").value = textValue.substring(0, textLeng - 1)
//value1 value2 char字符串的判定
//判断value2是否为空
if(value2 != ""){
value2 = value2.substring(0,value2.length-1);
}
else{
value1 = value1.substring(0,value1.length-1);
}
}
//清零键
tagID("reset").onclick = function () {
tagID("frame").value = '';
value1 = '';
value2 = '';
flag = 0;
}
//求值
tagID("sum").onclick = function () {
//value值为number
value1 = parseFloat(value1);
value2 = parseFloat(value2);
//运算符
sum = eval(value1 + char + value2);
sum = parseFloat(sum);
//初始化
flag = 0;
value1 = sum;
value2 = '';
//输入框显示值
if (sum == Infinity) {
tagID("frame").value = '除数不能为0';
} else {
tagID("frame").value = sum;
}
}
效果图: