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>Documenttitle>
<style>
*{
margin: 0px;
padding: 0px;
font-size: 30px;
color: #fff;
}
.entry{
margin: auto;
width: 400px;
height: 690px;
background-color: #000;
}
#result{
height: 200px;
width: 400px;
box-sizing: border-box;
padding-left: 0;
padding-bottom: 1px;
padding-left: 0px;
padding-right: 15px;
text-align: right;
line-height: 10%;
color: #fff;
font-size: 50px;
border: none;
background-color: black;
}
#result::-webkit-input-placeholder{
color: #fff;
}
.button_body{
padding-left: 10px;
padding-right: 10px;
margin: auto;
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.button{
width: 80px;
height: 80px;
line-height: 80px;
background-color: #a5a5a5;
border-radius: 50%;
text-align: center;
margin-top: 10px;
}
.button_de{
width: 160px;
height: 80px;
line-height: 80px;
background-color: #a5a5a5;
margin-top: 10px;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
padding-left: 20px;
}
style>
head>
<body>
<div class="entry">
<input type="text" id="result" placeholder="0">
<div class="button_body">
<div class="button" onclick="clearAll()">ACdiv>
<div class="button" onclick="change()">+/-div>
<div class="button" onclick="percentage()">%div>
<div id="divide" class="button" onclick="divide('/')" style="background-color: #f1a33b;">÷div>
<div class="button" onclick="numberClick(7)">7div>
<div class="button" onclick="numberClick(8)">8div>
<div class="button" onclick="numberClick(9)">9div>
<div id="mul" class="button" onclick="mul('*')" style="background-color: #f1a33b;">×div>
<div class="button" onclick="numberClick(4)">4div>
<div class="button" onclick="numberClick(5)">5div>
<div class="button" onclick="numberClick(6)">6div>
<div id="sub" class="button" onclick="sub('-')" style="background-color: #f1a33b;">-div>
<div class="button" onclick="numberClick(1)">1div>
<div class="button" onclick="numberClick(2)">2div>
<div class="button" onclick="numberClick(3)">3div>
<div id="add" class="button" onclick="add('+')" style="background-color: #f1a33b;">+div>
<div class="button_de" onclick="numberClick(0)">0div>
<div class="button">.div>
<div class="button" onclick="equal()" style="background-color: #f1a33b;">=div>
div>
div>
<script>
var signs='';
var number1='';
var number2='';
var sum=0;
var result=document.getElementById("result");
var sub_button=document.getElementById("sub");
var add_button=document.getElementById('add');
var mul_button=document.getElementById('mul');
var divide_button=document.getElementById('divide');
count=0;
//点击数字
function numberClick(number){
if(signs==''){
number1=number1+number;
result.value=number1;
console.log('number1'+':'+number1);
console.log('signs'+signs);
}else{
result.value='';
number2=number2+number;
result.value=parseFloat(number2);
console.log('number2'+':'+number2);
console.log('signs'+signs);
}
}
//AC
function clearAll(){
signs='';
number1='';
result.value=0;
count=0;
}
//+/-
function change(){
sum=result.value;
sum=sum*-1;
console.log(sum);
result.value=sum;
}
//%
function percentage(){
number1=result.value/100;
result.value=number1;
number1='';
}
// 除以
function divide(sign){
signs=sign;
}
//乘以
function mul(sign){
signs=sign;
}
//加
function add(sign){
signs=sign;
}
function sub(sign){
signs=sign;
}
//divide
divide_button.onmousedown=function(){
if(signs=='/'){
if(number1!=''&&number2!=''){
sum=parseFloat(number1)/parseFloat(number2);
number1='';
}
if(number1==''&&number2!=''){
sum=sum/parseFloat(number2);
}
if(number2==''){
prompt('被除数不为0')
}
}
if(signs=='-'){
if(number1!=''){
sum=parseFloat(number1)-parseFloat(number2);
number1='';
}else{
sum=sum-parseFloat(number2);
}
}
if(signs=='+'){
if(number1!=''){
sum=parseFloat(number1)+parseFloat(number2);
number1='';
}else{
sum=sum+parseFloat(number2);
}
}
if(signs=='*'){
if(number1!=''){
sum=parseFloat(number1)*parseFloat(number2);
number1='';
}else{
sum=sum*parseFloat(number2);
}
}
divide_button.style.backgroundColor="#a5a5a5";
}
divide_button.onmouseup=function(){
if(number2!=''){
result.value=sum;
number2='';
}
signs='';
console.log('signs'+signs+'onmouseup:sum:'+sum);
divide_button.style.backgroundColor="#f1a33b";
}
//mul
mul_button.onmousedown=function(){
if(signs=='-'){
if(number1!=''){
sum=parseFloat(number1)-parseFloat(number2);
number1='';
}else{
sum=sum-parseFloat(number2);
}
}
if(signs=='+'){
if(number1!=''){
sum=parseFloat(number1)+parseFloat(number2);
number1='';
}else{
sum=sum+parseFloat(number2);
}
}
if(signs=='*'){
if(number1!=''){
sum=parseFloat(number1)*parseFloat(number2);
number1='';
}else{
sum=sum*parseFloat(number2);
}
}
console.log('add_button:onmousedown:sum:'+sum);
mul_button.style.backgroundColor="#a5a5a5";
}
mul_button.onmouseup=function(){
if(number2!=''){
result.value=sum;
number2='';
}
signs='*';
console.log('signs'+signs+'onmouseup:sum:'+sum);
mul_button.style.backgroundColor="#f1a33b";
}
//add
add_button.onmousedown=function(){
if(signs=='-'){
if(number1!=''){
sum=parseFloat(number1)-parseFloat(number2);
number1='';
}else{
sum=sum-parseFloat(number2);
}
}
if(signs=='+'){
if(number1!=''){
sum=parseFloat(number1)+parseFloat(number2);
number1='';
}else{
sum=sum+parseFloat(number2);
}
}
if(signs=='*'){
if(number1!=''){
sum=parseFloat(number1)*parseFloat(number2);
number1='';
}else{
sum=sum*parseFloat(number2);
}
}
console.log('add_button:onmousedown:sum:'+sum);
add_button.style.backgroundColor="#a5a5a5";
}
add_button.onmouseup=function(){
if(number2!=''){
result.value=sum;
number2='';
}
signs='+';
console.log('signs'+signs+'onmouseup:sum:'+sum);
add_button.style.backgroundColor="#f1a33b";
}
//减
sub_button.onmousedown=function(){
if(signs=='-'){
if(number1!=''){
sum=parseFloat(number1)-parseFloat(number2);
number1='';
}else{
sum=sum-parseFloat(number2);
}
}
if(signs=='+'){
if(number1!=''){
sum=parseFloat(number1)+parseFloat(number2);
number1='';
}else{
sum=sum+parseFloat(number2);
}
}
if(signs=='*'){
if(number1!=''){
sum=parseFloat(number1)*parseFloat(number2);
number1='';
}else{
sum=sum*parseFloat(number2);
}
}
console.log('onmousedown:sum:'+sum);
sub_button.style.backgroundColor="#a5a5a5";
}
sub_button.onmouseup=function(){
if(number2!=''){
result.value=sum;
number2='';
}
signs='-';
console.log('onmouseup:sum:'+sum);
sub_button.style.backgroundColor="#f1a33b";
}
//等于
function equal(){
if(signs=='/'){
if(number2=='0'){
alert('number不为0');
}else{
if(number1==''){
sum=sum/parseFloat(number2);
}else{
sum=parseFloat(number1)/parseFloat(number2);
}
}
result.value=sum;
signs='';
number1='';
number2='';
}
if(signs=='*'){
if(number1==''){
sum=sum*parseFloat(number2);
}else{
sum=parseFloat(number1)*parseFloat(number2);
}
result.value=sum;
signs='';
number1='';
number2='';
}
if(signs=='+'){
if(number1==''){
sum=sum+parseFloat(number2);
result.value=sum;
signs='';
number1='';
number2='';
}else{
sum=parseFloat(number1)+parseFloat(number2);
result.value=sum;
signs='';
number1='';
number2='';
}
}
if(signs=='-'){
if(number1==''){
sum=sum-parseFloat(number2);
result.value=sum;
signs='';
number1='';
number2='';
}else{
sum=parseFloat(number1)-parseFloat(number2);
result.value=sum;
signs='';
number1='';
number2='';
}
}
count=0;
console.log('count:'+count);
}
script>
body>
html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）