【HTML】简易计算器源码

wangy · 发表于 2021-6-30 23:33:52

<!doctype html>$ Y' h3 j1 j. g5 x8 L
<html>
* q& d- ~) p7 G2 U" C4 D
<head>
4 L% H! b4 p- N! d* v9 G9 H3 q
<script>
& C6 [6 h; s% i, Y8 |8 F
function insert(num){( [3 Y$ D A2 D
document.form.textview.value = document.form.textview.value+num
( y& V. [# y% ]6 m( Q
}& A- _. G4 m h& n5 ^# a. A
function equal(){ R/ k' S5 `+ D. W- ?5 I) j
$ ?' c2 F0 z/ J6 l$ F0 M
var exp = document.form.textview.value( p5 j, T: k* q
insert("=")
9 R; T; I2 e% \1 n7 L
if(exp){0 O. P/ v* V0 @( F$ C
document.form.textview.value =document.form.textview.value + eval(exp)! Y a; q& z& h0 T4 @* p* n
}
$ }" ~- O+ x. i# M+ ]
}1 q% d# s, ~2 w' X1 ]- e
function clean(){
* B$ D$ h! W; N0 d8 J2 k" j; ~$ m) [
document.form.textview.value = ""% T9 e) a- R' G: H) v! r
3 s, ?+ l S0 V- o8 S2 Y
}% `6 Q; q( B& m+ u+ E6 t
function back(){
+ j0 s) K7 |" ~; w W6 P$ W! U
var exp = document.form.textview.value
1 O7 P. T( `, G& z
document.form.textview.value = exp.substring(0,exp.length-1)
0 h3 E/ g, V1 ?, W' y
} u& S: s3 ]1 [; D+ E
</script>
7 z1 o: w2 u$ Y) _: L
<style>
9 x+ u8 ~0 P, O- H: F) x
*{3 U) U( |- J( W, T4 j" {8 A
margin: 0;
! W6 [* p7 Z* x# ?7 R! _1 }& Q
padding: 0;% k- V5 B; m3 R% V& J, f
} r3 o. ~1 N1 Q- T6 v
td{
$ g( O* B6 L! X, k
width: 100px;5 f& Y" w3 B( G4 c5 e, M
height: 100px;
3 B9 f; S2 H( Q! _* t- A V
}) `' l N, o( j
.button{
" R. l, y. q7 a8 A) o {1 p% ?
height:100%;- ] L$ |* v3 f3 }
width:100%;% d" z* h: ]: K- Q2 L1 B
font-size: 25px;
3 G F& b6 o( w6 {
margin: 10px;
# I, I5 \) @4 n: V# j/ N4 [
cursor: pointer;
; w/ j( A0 X" D5 W* c
background: #607d8b;" @2 r; \" l; v+ c- F k! u
border: none;) z, v0 l! M6 K. R2 M4 |! w
}8 P P5 e. b6 V% M
.textview{1 y' Z0 P, j5 W1 n8 v9 _5 X
width: 400px;$ I* \7 j$ @% B; e9 L5 y
margin: 10px;
4 e9 \2 Q+ n8 O& E
font-size: 50px;
" Y; A: J. J0 a8 H# _8 @% x+ a8 d
padding: 5px;3 ~, h* K& D/ h" I# o
border: none;, v$ ?6 j! m3 Y' ^+ k2 m
color: #607d8b;
' h- ]8 R5 d) S
}) t- v7 O. B5 p2 c+ K9 S) g
.main{3 m1 v+ H9 Y1 |' G1 l
position: absolute;
1 B o4 y. \. y4 R5 ~
top: 50%;3 T, f5 w; c' B/ p1 ?, g" F- [
left: 50%;
" b/ r i7 ^. z4 I/ q
transform: translateX(-50%) translateY(-50%);8 C. r( C! {+ c; s+ q2 v. _
}8 G6 j( J" ^/ [9 }
.bg{- _+ I R9 m" n2 I1 b; x7 I
width:100%;0 {& D: x- W; [ ~; a
height:100vh;1 h& I s) K4 I6 X: E8 m
background: linear-gradient(to right, #e91e63, #3f51b5)
6 \2 _) u' J2 f# N
}
7 H& D- k- F( p, A. }
</style>
2 }" s. _3 M: E: v& J! J
</head>% ]& [ T4 y: O" ]* h2 {
<body>' I" O l; e0 U
<div class="bg">
% F# G3 W; K8 N$ O
<div class="main">
' [! o& Y/ W6 e# w
<form name="form">
4 }! V* a5 t2 e& I9 `
<input class="textview" name="textview">
7 D) _' E" T, @, U3 L5 Z5 g* n, ?
</form>
% b, x& u2 @( ~8 D
<table>, |2 u* n# x' z# Y1 d+ ?
<tr>
* t; f4 w1 C, @" a% O
<td><input class ="button" type="button" value="C" onclick="clean()"></td>* ?" h1 O/ t* q. j$ Q+ I
<td><input class ="button" type="button" value="<" onclick="back()"></td>
# U6 {/ Q; ~4 Y4 O! S
<td><input class ="button" type="button" value="/" onclick="insert('/')"></td>
h! ^' {5 ^) N* H& W
<td><input class ="button" type="button" value="X" onclick="insert('*')"></td>% k% f% ?$ T7 O; m" E
</tr>
<tr>
5 `3 q. n& q% `/ V c' V' M. @' u
<td><input class ="button" type="button" value="7" onclick="insert(7)"></td>
- K' p# g" a$ j @$ P
<td><input class ="button" type="button" value="8" onclick="insert(8)"></td>
8 n, ~7 A I+ B: e5 l9 p
<td><input class ="button" type="button" value="9" onclick="insert(9)"></td>
* _, c6 }% ?9 ^% c" V- q
<td><input class ="button" type="button" value="-" onclick="insert('-')"></td>- {. @5 \( U( O
</tr>5 I) N5 { Z* F6 e! L* z
<tr>$ g& I- Z! v% W! ~' A
<td><input class ="button" type="button" value="4" onclick="insert(4)"></td>' f$ \' v/ g" e, p2 f: C0 h
<td><input class ="button" type="button" value="5" onclick="insert(5)"></td>
9 Q4 }# D- R( [3 V9 R: y1 Z8 H1 E
<td><input class ="button" type="button" value="6" onclick="insert(6)"></td>
8 S+ V" _$ C$ ]: Q0 f2 C- ^
<td><input class ="button" type="button" value="+" onclick="insert('+')"></td>
7 s; d. O( T, D: Z# W! r; i# r
</tr>8 D2 r0 _+ A$ u& z
<tr>7 c" \ w: r, h$ b; _5 C6 N" p5 @2 x
<td><input class ="button" type="button" value="1" onclick="insert(1)"></td>' Y- g8 F& o( ?3 y! }! t8 P: X
<td><input class ="button" type="button" value="2" onclick="insert(2)"></td>
0 B' I q9 l+ _- S9 r7 y: b
<td><input class ="button" type="button" value="3" onclick="insert(3)"></td>( ], U$ [8 j+ P
<td rowspan=5><input class ="button" style="height:106" type="button" value="=" onclick="equal()"></td>
: @$ i& x* M5 ?6 |' \
</tr> \" I( k, ^( T" w( E. F- T$ M
<tr>
5 ^3 h- K. |' e
<td colspan=2><input class ="button" style="width:106" type="button" value="0" onclick="insert(0)"></td>* {0 L; N& Z/ n [: p7 i
<td><input class ="button" type="button" value="." onclick="insert('.')"></td>6 T* ]2 I+ m- Y) _1 l
</tr>: ?' ~/ ^: f' f0 N t0 D' a
</table>+ Q. S* d% d1 K( H* S; x
</div>; i/ }3 Y, W/ Q2 C, M
</div>
0 l* W3 y& s( Q: `
</body>
' j* ?; }$ Q, P# D, B- s$ D7 m
</html>) q) J* a' }" L1 y1 d2 E

复制代码

[js,sql,html教程] 【HTML】简易计算器源码

荣誉管理

论坛元老