简单计算器 < ! DOCTYPE html>
< html> < head> < meta charset= "UTF-8" > < title> 简易计算器< / title> < style type= "text/css" > * { margin: auto; padding: 0 px; text- align: center; font- family: "微软雅黑" ; } . content{ border- radius: 10 % ; width: 400 px; height: 550 px; background- color: antiquewhite; } . clear{ border- radius: 50 % ; width: 20 % ; height: 72 px; background- color: #FF4500 ; } #result{ margin- top: 24 px; font- size: 16 px; width: 60 % ; height: 72 px; text- align: left; border- radius: 20 px; background- color: #FFE4C4 ; } . symbol{ margin- top: 36 px; font- size: xx- large; border- radius: 50 % ; width: 20 % ; height: 72 px; background- color: bisque; } . number{ margin- top: 36 px; font- size: xx- large; border- radius: 50 % ; width: 20 % ; height: 72 px; background- color: beige; } . calculate{ margin- top: 36 px; font- size: xx- large; border- radius: 50 % ; width: 20 % ; height: 72 px; background- color: #FF4500 ; } . content input: hover{ box- shadow: 5 px 5 px 5 px #888888 ; } . content input: active{ background- color: #FF0000 ; } < / style> < script type= "text/javascript" > function clearValue ( ) { document. getElementById ( "result" ) . value= "" ; } function get ( value) { document. getElementById ( "result" ) . value+= value; } function calculate ( ) { var result= 0 ; result= document. getElementById ( "result" ) . value; document. getElementById ( "result" ) . value= "" ; document. getElementById ( "result" ) . value= eval ( result) ; } ; < / script> < / head> < body> < div class = "banner" > < h2> 简 易 计 算 器< / h2> < / div> < br / > < div class = "content" > < input type= "button" value= "清 除" class = "clear" onclick= "clearValue()" / > < input type= "text" id= "result" readonly= "readonly" placeholder= "运 算 结 果 显 示" / > < br / > < input type= "button" value= "1" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "2" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "3" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "+" class = "symbol" onclick= "get(this.value)" / > < br / > < input type= "button" value= "4" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "5" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "6" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "-" class = "symbol" onclick= "get(this.value)" / > < br / > < input type= "button" value= "7" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "8" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "9" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "*" class = "symbol" onclick= "get(this.value)" / > < br / > < input type= "button" value= "0" class = "number" onclick= "get(this.value)" / > < input type= "button" value= "." class = "symbol" onclick= "get(this.value)" / > < input type= "button" value= "/" class = "symbol" onclick= "get(this.value)" / > < input type= "button" value= "=" class = "calculate" onclick= "calculate()" / > < / div> < br / > < div class = "footer" > < p align= "center" > CopyRight & copy; QianQian< / p> < / div> < / body>
< / html>
