搜索到
1
篇与
计算器
的结果
-
原生JS简易计算器 图片演示:代码演示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单计算器 - NiceHan</title> <style type="text/css"> * { border: 0; } body { background-color: rgba(100, 149, 237, 0.8); } h1 { color: white; text-align: center; font-family: 'Microsoft YaHei'; font-size: 56px; font-weight: bold; text-shadow: 0px 0px 0 rgb(148, 148, 148), 1px 1px 0 rgb(125, 125, 125), 2px 2px 0 rgb(103, 103, 103), 3px 3px 0 rgb(80, 80, 80), 4px 4px 0 rgb(57, 57, 57), 5px 5px 0 rgb(34, 34, 34), 6px 6px 0 rgb(11, 11, 11), 7px 7px 6px rgba(0, 0, 0, 0.75), 7px 7px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2); } input { margin: 6px; background-color: white; } .btnstyle { background-color: orange; } input:hover { background-color: #C0C0C0; } input[type=button] { height: 36px; width: 36px; } input[type=text] { height: 36px; width: 190px; } </style> <script type="text/javascript"> function num(val) { switch (val) { case "=": document.getElementById('texton').value = eval(document.getElementById('texton').value); break; case "AC": document.getElementById('texton').value = ""; break; default: document.getElementById('texton').value = document.getElementById('texton').value + val; document.getElementById('texton').value = document.getElementById('texton').value; } } </script> </head> <body> <h1>简单计算器 - NiceHan</h1> <div style="width: 208px;margin: auto;background-color: black;"> <input type="text" name="texton" id="texton" value="" style="text-align: center;font-size: 16px;background-color: lightyellow;" /> <br /> <input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)" style="width: 141px;" /> <input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" /> <input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" /> <input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle" /> <br /> <input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;" /> <input type="button" name="btn1" id="btn." value="." onclick="num(this.value)" /> <input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle" /> </div> </body> </html>
