纯js写计算器

最新推荐文章于 2024-04-25 09:54:19 发布

少年与梦1

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量305

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_35881389/article/details/53350027

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var body_=document.getElementsByTagName('body');
//先创建最外层div
var maindiv=document.createElement('div');
maindiv.style.background='#ccc';
maindiv.style.width='400px';
maindiv.style.height='600px';
maindiv.style.fontSize='0';
maindiv.style.borderRadius='10px';
//创建显示器
var view=document.createElement('div');
view.style.width='auto';
view.style.height='100px';
view.style.background='#efefef';
view.innerHTML='0';
view.style.borderTopLeftRadius='20px';
view.style.borderTopRightRadius='20px';
view.style.lineHeight='100px';
view.style.fontSize='4rem';
view.style.textAlign='right';
view.style.paddingRight='10px';
view.style.border='1px solid rgb(150,150,150)';
maindiv.appendChild(view);
//创建按键
for(var i=0;i<19;i++){
var itemdiv=document.createElement('div');
itemdiv.style.background='rgb(224,224,224)';
itemdiv.style.width='98px';
itemdiv.style.height='98px';
itemdiv.style.fontSize='3rem';
itemdiv.οnclick=alick_item;
itemdiv.style.verticalAlign='top';
itemdiv.style.textAlign='center';
itemdiv.style.lineHeight='98px';
itemdiv.style.border='1px solid #999';
itemdiv.style.display='inline-block';
//数字处理
if (i>=4&&i<=6) {
itemdiv.innerHTML=i+3;
}else if (i>=8&&i<=10) {
itemdiv.innerHTML=i-4;
}else if (i>=12&&i<=14) {
itemdiv.innerHTML=i-11;
}else if (i==16) {
itemdiv.style.width='198px';
itemdiv.innerHTML='0';
}else{
var a;
switch (i) {
case 0:
a='AC';
break;
case 1:
a='+/-'
break;
case 2:
a='%'
break;
case 3:
a='/';
itemdiv.style.background='rgb(246,144,65)';
break;
case 7:
a='*'
itemdiv.style.background='rgb(246,144,65)';
break;
case 11:
a='-'
itemdiv.style.background='rgb(246,144,65)';
break;
case 15:
a='+'
itemdiv.style.background='rgb(246,144,65)';
break;
case 17:
a='.'
break;
case 18:
a='='
itemdiv.style.background='rgb(246,144,65)';
itemdiv.οnclick=css;
break;
default:

}
itemdiv.innerHTML=a;}
maindiv.appendChild(itemdiv);

}
body_[0].appendChild(maindiv);

var num1='',num2='',char='';
function alick_item(){
var a=this.innerHTML
if (num1.length<11&&num2.length<11) {

if (a=='AC') {
num1=num2=char='';
view.innerHTML='0';
}else if (num1.indexOf('.')!=-1) {
if (a=='.') {

}else {
num1+=a;
view.innerHTML=num1;
}
}else{
if (char==''||char=='null') {
if (a>0||a<10||a==".") {
num1+=a;
view.innerHTML=num1;
}else if (a=='+'||a=='-'||a=='*'||a=='/'||a=='%') {
char=a;
}
}else if (a>0||a<10||a=='.') {
num2+=a;
view.innerHTML=num2;
}
}
}else{

}
}

function css(){
switch (char) {
case '+':
view.innerHTML=Number(num1)+Number(num2);
break;
case '-':
view.innerHTML=num1-num2;
break;
case '*':
view.innerHTML=num1*num2;
break;
case '/':
view.innerHTML=num1/num2;
break;
case '%':
view.innerHTML=num1%num2;
break;
default:

}
}

</script>
</body>
</html>

少年与梦1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯js写计算器

var body_=document.getElementsByTagName('body'); //先创建最外层div var maindiv=document.createElement('div'); maindiv.style.background='#ccc'; maindiv.style.width='400px';
复制链接

扫一扫