<!DOCTYPE html>
<
html
lang
=
"
en
"
>
<
head
>
<
title
></
title
>
<
meta
charset
=
"
UTF-8
"
>
<
meta
name
=
"
viewport
"
content
=
"
width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
"
>
<
style
>
body
,
table
,
tr
,
td
,
input
{margin:
0
;padding:
0px
;}
table
{border-collapse: collapse; border:
1px
solid
#343537
;}
</
style
>
</
head
>
<
body
>
<
table
border
=
"
1
"
align
=
"
center
"
style
=
"
height:100px;width:100%
"
/>
<
tr
style
=
"
width:100%;
"
>
<
td
colspan
=
"
4
"
>
<
div
type
=
"
text
"
value
=
""
style
=
"
height:170px;width:100%;background:#000;
border:1px solid #000;position:relative;
"
>
<
div
id
=
"
display_num
"
style
=
"
color:#fff;width:390px;height:100px;
position:absolute;top:4rem;font-size:7rem;text-align:right;padding-right:5px;
"
>0</
div
></
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
input
type
=
"
button
"
value
=
"
AC
"
id
=
"
AC
"
onclick
=
"
changeText()
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
add
"
value
=
"
+/-
"
onclick
=
"
onclicknum(+/-)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
percentum
"
value
=
"
%
"
onclick
=
"
onclicknum(%)
"
style
=
"
height:100px;width:100px;font-size:50px;border:0px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
division
"
value
=
"
÷
"
onclick
=
"
onclicknum(÷)
"
style
=
"
height:100px;width:100px;;font-size:50px;border:1px;background:#ff9200;color:#fff;
"
>
</
td
>
</
tr
>
<
tr
style
=
"
width:100%;
"
>
<
td
>
<
input
type
=
"
button
"
value
=
"
7
"
id
=
"
num7
"
onclick
=
"
onclicknum(7)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num8
"
value
=
"
8
"
onclick
=
"
onclicknum(8)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num9
"
value
=
"
9
"
onclick
=
"
onclicknum(9)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
multiplication
"
value
=
"
×
"
onclick
=
"
onclicknum(x)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff;
"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
input
type
=
"
button
"
value
=
"
4
"
id
=
"
num4
"
onclick
=
"
onclicknum(4)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num5
"
value
=
"
5
"
onclick
=
"
onclicknum(5)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num6
"
value
=
"
6
"
onclick
=
"
onclicknum(6)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
minus
"
value
=
"
-
"
onclick
=
"
onclicknum(-)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff;
"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num1
"
value
=
"
1
"
onclick
=
"
onclicknum(1)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num2
"
value
=
"
2
"
onclick
=
"
onclicknum(2)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
num3
"
value
=
"
3
"
onclick
=
"
onclicknum(3)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
plus—sign
"
value
=
"
+
"
onclick
=
"
onclicknum(+)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff;
"
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"
2
"
>
<
input
type
=
"
button
"
value
=
"
0
"
id
=
"
num0
"
onclick
=
"
onclicknum(0)
"
style
=
"
height:100px;width:200px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
dot
"
value
=
"
.
"
onclick
=
"
onclicknum(dot)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;color:#646466;
"
>
</
td
>
<
td
>
<
input
type
=
"
button
"
id
=
"
equal
"
value
=
"
=
"
onclick
=
"
onclicknum(=)
"
style
=
"
height:100px;width:100px;font-size:50px;border:1px;background:#ff9200;color:#fff;
"
>
</
td
>
</
tr
>
</
table
>
<
script
>
function
onclicknum
(
num
){
var
display
= document.
getElementById
(
'
display_num
'
);
var
dot
=document.
getElementById
(
'
dot
'
);
if
(
num
==
0
){
// 如果num 等于0;
if
(
display
.
innerHTML
==
0
){
//如果文本框中输出值为0;
display
.
innerHTML
=
0
;
}
else
{
//如果输出不为0时,那么显示的就是文本框的内容+所选中的数字相结合;
var
a
=
display
.
innerHTML
+
num
;
display
.
innerHTML
=
a
;
}
}
//否则如果num大于零
else
if
(
num
>
0
){
//如果文本框输出内容等于零,输出的内容为0;
if
(
display
.
innerHTML
==
0
)
{
var
a
=
num
;
}
else
{
//如果num大于零 。文本框输出为数字跟数字想结合
var
a
= (
display
.
innerHTML
+
num
);
}
//输出我们设定好a的显示模式
display
.
innerHTML
=
a
;
}
};
function
changeText
(){
//点击按钮AC,清楚文本框的内容,最终显示为0
document.
getElementById
(
'
display_num
'
).
innerHTML
=
0
};
</
script
>
</
body
>
</
html
>