7.29-bug计算器

<!DOCTYPE html>

<head>

<style>

.wrapper{

width: 200px;

height: 350px;

background-color: rgb(65, 65, 65);

margin: auto ;

border-radius: 10px;

/* overflow: hidden; */

}

.system{

width: 100%;

height: 20px;

padding-top: 6px;

padding-left: 5px;

}

.sbtn{

width: 12px;

height: 12px;

background-color: rgb(92, 92, 92);

border-radius: 50%;

float: left;

margin: 2px;

}

.sbtn:hover{

background-color: red;

}

.display{

width: 100%;

height: 80px;

color: white;

font-size: 32px;

text-align: right;

line-height: 100px;

padding: 0 10px;

box-sizing: border-box;

/* vertical-align: bottom; */

}

.control{

width: 100%;

height: 250px;

color: white;

}

.control-button{

width: 25%;

height: 20%;

float: left;

text-align: center;

line-height: 50px;

background-color: rgb(113, 113, 113);

border: 1px solid rgb(65, 65, 65);

box-sizing: border-box;

}

.control-button:hover{

background-color: yellow;

}

/* .control-button:active{

} */

.o1{

background-color: rgb(85, 85, 85);

}

.o2{

background-color: rgb(255, 157, 0);

}

.b2{

width: 50%;

}

.left-bottom{

border-bottom-left-radius: 10px;

}

.right-bottom{

border-bottom-right-radius: 10px;

}

</style>

</head>

<body>

</div>

</div>

let firstNumber = 0;

let buttonType = 0;

let operatorType = "+";

//三种选择方法

let display = document.getElementsByClassName('display')[0];//通过标签 id 等

// let display = document.querySelectorAll('.display')[0];//

// let display = document.querySelector('.display');//只会命中第一个找到的数据另外的都会选择所有

function numberClick(button){

console.log(button.innerText)//innerHTML会把所有标签结构打出来.innerText只会取内容.

if(buttonType == 0){

display.innerText += button.innerText;

}else{

display.innerText = button.innerText;

}

buttonType == 0;

}

function operatorClick(button){

console.log("1")

firstNumber = display.innerText;

buttonType = 1;

operatorType = button.innerText;

}

function equalClick(button){

console.log("1")

let result = 0;

firstNumber = parseInt(firstNumber);

secondNumber = parseInt(display.innerText);

expression = 'result = firstNumber' + operatorType + 'secondNumber';

eval(expression);//字符串作为代码运行

display.innerText = result;

buttonType = 1;

}

function acClick(button){

firstNumber = 0;

buttonType = 0;

operatorType = '+';

display.innerText = '';

}

</script>

</body>

</html>

巴特西

7.29-bug计算器

最新文章

热门文章