阅读背景:

JavaScript实现简单计算器(加减乘除)

来源:互联网 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{margin: 0px;padding: 0px;} .box{ position: absolute; height: 500px; width: 350px; border: 2px solid black; right: 0px; left: 0px; top: 0px; bottom: 0px; margin: auto auto; } input{ width: 294px; height: 60px; padding: 10px; margin: 10px; line-height: 60px; font-size: 20px; } button{ width: 100px; height: 40px; font-size: 18px; padding: 8px; margin: 5px; vertical-align: middle; } .box1-1,.box1-2,.box1-3,.box2-1{ float:inline-start; margin: 0,auto; } </style> </head> <body> <div class="box"> <div class="box1-1"> <input type="text" id="inp" disabled/> </div> <div class="box2-1"> <button onclick="clr();">Clr</button> <button onclick="back();">Del</button> <button onclick="cal();">=</button> </div> <div class="box1-2"> <button onclick="addStr(1);">1</button> <button onclick="addStr(2);">2</button> <button onclick="addStr(3);">3</button><br/> <button onclick="addStr(4);">4</button> <button onclick="addStr(5);">5</button> <button onclick="addStr(6);">6</button><br/> <button onclick="addStr(7);">7</button> <button onclick="addStr(8);">8</button> <button onclick="addStr(9);">9</button><br/> <button onclick="addStr(0);">0</button> <button onclick="addStr('.');">.</button> <button onclick="addStr('/');">/</button><br/> </div> <div class="box1-3"> <button onclick="addStr('+');">+</button> <button onclick="addStr('-');">-</button> <button onclick="addStr('*');">*</button> </div> </div> <script> function addStr(s){ var inp=document.getElementById('inp'); inp.value=inp.value+s; } function cal(){ var inp=document.getElementById('inp'); val=eval(inp.value); inp.value=val; } function clr(){//清除 var inp=document.getElementById('inp'); inp.value=''; } function back(){//删除最后一个字符 var inp=document.getElementById('inp'); var str=inp.value.substr(0,inp.value.length-1); inp.value=str; } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta cha



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: