【HTML】简易计算器源码

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

<!doctype html>
# Z- Y% F a3 P4 b7 T& p# n m
<html>
+ j. t7 f! _6 T
<head>
! R3 {$ p) ^' z- U8 d/ a( r
<script> w5 p/ d! f" p9 p$ ~3 K
function insert(num){$ {( o) e8 ?9 `0 u
document.form.textview.value = document.form.textview.value+num
2 C) g# B9 U6 C! \, E# l
}: V2 U: A3 x2 n) h& k
function equal(){0 i0 R0 S9 s8 y0 N8 e3 k
, G4 y, }- M* X3 ~" o) G
var exp = document.form.textview.value
$ U6 P- m" b+ \
insert("=") h& o8 r: N+ x% P2 v5 G
if(exp){7 v- S8 _3 V3 c
document.form.textview.value =document.form.textview.value + eval(exp), \7 E+ s' p% M+ u
}' y) S' W. f. _7 n6 l/ [# l' H3 ^% u
}0 C, o* s2 e3 ?- j( Q
function clean(){& z9 X7 o j+ Z' l) V' W
document.form.textview.value = "") E/ ?' X! F9 h' j8 W7 O4 {' u
( U- U3 `% M. P9 v' B0 @
}- D1 C( X9 C* b D
function back(){) ^0 o8 ]* G2 l/ J0 [
var exp = document.form.textview.value
# O& x3 N0 v3 e5 u& \5 T! r l
document.form.textview.value = exp.substring(0,exp.length-1)
* \: J. d; j& N' m
}. A7 o$ V/ U( i# r/ v1 |- Z6 h
</script>
( r. U5 i& o9 q$ j7 K( ]0 r
<style>
; ~" E0 r9 E; _; f& Z2 ~1 F/ L
*{ {) v1 p$ ^& T, h( d/ ?& c
margin: 0;
. f4 S4 f. ^* z* \
padding: 0;
/ {3 {+ P3 V# H% a9 E4 x
}
K0 x* O. b7 {2 E
td{8 l( m4 }7 J2 _( N2 X
width: 100px;: z, T/ c Q7 V" a9 r! f6 m
height: 100px;
+ V6 s& d& r# H5 R
}
( C. Y" a9 v F4 `1 `/ B6 e1 e) C
.button{0 C% M5 F! W4 G+ G3 b
height:100%;/ g8 |% A& ~+ V4 S+ ^. V9 a
width:100%;
! E' G. A, w! g3 E$ C/ P
font-size: 25px;! q- S, a7 T5 y2 n) A9 [0 u
margin: 10px;; l8 F7 K4 E4 p) x8 C
cursor: pointer;
. s$ E$ |+ B' U0 ?+ e
background: #607d8b;
) M4 U; [5 V0 e: R0 q4 d$ H$ {
border: none;; t1 C/ I' e# [; X) q' _9 ~* [- N
}6 O+ I$ j( ?: e. Z
.textview{
% R. x' N( C A$ G$ c
width: 400px;
+ S6 }6 ~1 ?2 K0 E8 p6 R7 k! D
margin: 10px;1 O! G1 b! N3 V
font-size: 50px;5 w/ I# W4 a5 W& T* J
padding: 5px;9 B+ Y8 i6 n( g9 A
border: none;
1 E( S) s6 {* m+ y
color: #607d8b;
( R! K) s/ a; k& B
}
: _) O/ ^; ^% g' O5 `/ w0 `2 v$ N* j! R
.main{# x- T# P( V" ^, Q
position: absolute;
8 i2 Y- ^5 L4 h# I3 x/ \5 ^
top: 50%;# N( r1 N0 t; q; x# c- x
left: 50%;
; w$ K( Z9 w& Y+ q3 O/ q
transform: translateX(-50%) translateY(-50%);. e& J: `. W3 g+ g, d/ z
}4 U) h7 o# K) q# E0 l9 J
.bg{
' O: k7 l) O9 W9 [3 U& ]" y
width:100%;
4 n0 x: O' j6 Q+ p
height:100vh;
) O$ G) a/ u6 j' u- B! z G z
background: linear-gradient(to right, #e91e63, #3f51b5)
$ x7 F! ]' I. S n; o5 y4 H
}1 v4 _+ F4 l' z D6 z
</style>
" e/ q# p; j0 T4 M& C9 q
</head>
. c3 c# k9 e' R7 q5 x: V# P
<body>
; U# L, j- l+ y- ~. r) y; D
<div class="bg">- r3 z/ o. h8 r
<div class="main">' s$ B) F. a5 V- a. i+ N
<form name="form">2 c: d1 d' q2 c: y2 x" M' _4 O; x
<input class="textview" name="textview">) k# N' T" n, g o
</form>4 a4 e+ E+ U# s$ c" @
<table>0 m8 m) r( i" A4 F
<tr>" {/ ^) q6 {! l2 [ {, j
<td><input class ="button" type="button" value="C" onclick="clean()"></td>
* K' x% F; B( P c; w+ E
<td><input class ="button" type="button" value="<" onclick="back()"></td>9 N5 L4 `. W) I! y7 R9 @7 ?
<td><input class ="button" type="button" value="/" onclick="insert('/')"></td>, k. Y& G1 @$ s5 f5 _
<td><input class ="button" type="button" value="X" onclick="insert('*')"></td>
3 P% I$ x, @: @6 T6 l
</tr>
# y( b, _' K) y K% `
<tr>1 ?- W. }$ A6 Z) e
<td><input class ="button" type="button" value="7" onclick="insert(7)"></td> D# [1 w6 Y' R0 @! g7 B+ u
<td><input class ="button" type="button" value="8" onclick="insert(8)"></td>9 o9 l8 x3 C- o) d( X
<td><input class ="button" type="button" value="9" onclick="insert(9)"></td>
. l0 S. W& O O
<td><input class ="button" type="button" value="-" onclick="insert('-')"></td>; ~- S/ q5 z# d+ k6 U+ k* P
</tr>
. Q! f9 ~2 C- A# Q, J; |# S; k
<tr>
- ~) ` L7 f* q
<td><input class ="button" type="button" value="4" onclick="insert(4)"></td>6 ^2 h! \! z( G3 T
<td><input class ="button" type="button" value="5" onclick="insert(5)"></td>0 g s+ y, a8 O. s6 Z0 f
<td><input class ="button" type="button" value="6" onclick="insert(6)"></td>' Q- p! D2 ~8 X5 X. ~5 P
<td><input class ="button" type="button" value="+" onclick="insert('+')"></td>
x. [6 n. d9 ?* j" U: O" X: Y+ j
</tr>) [( z' b; u9 C, [5 D9 ~
<tr>
& d9 j3 Y6 I' l
<td><input class ="button" type="button" value="1" onclick="insert(1)"></td>" A7 z# ?4 Z9 [' ]& v& f% |
<td><input class ="button" type="button" value="2" onclick="insert(2)"></td>
$ r4 E) l- B( x2 Q
<td><input class ="button" type="button" value="3" onclick="insert(3)"></td>! L7 o3 ^* U K& x& p2 g" n
<td rowspan=5><input class ="button" style="height:106" type="button" value="=" onclick="equal()"></td>
3 }+ q9 `/ g# A U
</tr>6 U3 b/ `, C5 J
<tr>
- u; |2 g3 Q8 A7 \- y# }, t% A
<td colspan=2><input class ="button" style="width:106" type="button" value="0" onclick="insert(0)"></td>9 C# O5 P8 p$ j
<td><input class ="button" type="button" value="." onclick="insert('.')"></td>
% M3 q W/ a1 L( S* T" y1 q- s
</tr>. v8 R' t, ?- \0 ^- ^, d9 t
</table>
: ^7 M9 s r& d/ t. D2 ^
</div># F/ s- y; p. U5 c
</div>
4 T1 q: Q3 ?, n. C, X4 D2 y
</body>- w; b% g& L( `, M2 b
</html>
! m% I# W. f) C! `) W

复制代码

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

荣誉管理

论坛元老