好看的前端计算器代码分享（html+css+js制作计算器）
简介：这里分享的html+css+js制作的几个计算器代码。
第一个
demo演示
<!DOCTYPE html> <html> <head> <title>计算器</title> <style type="text/css"> body { background-color: #F5F5F5; font-family: Arial, sans-serif; } h1 { text-align: center; margin-top: 50px; } .container { width: 300px; margin: 0 auto; background-color: #FFFFFF; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px #888888; } input[type="button"] { background-color: #4CAF50; color: #FFFFFF; border: none; padding: 10px; width: 100%; margin-bottom: 5px; cursor: pointer; border-radius: 5px; } input[type="text"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #CCCCCC; margin-bottom: 10px; } </style> </head> <body> <h1>前端计算器</h1> <div class="container"> <input type="text" id="display" readonly> <input type="button" value="1" onclick="addToDisplay('1')"> <input type="button" value="2" onclick="addToDisplay('2')"> <input type="button" value="3" onclick="addToDisplay('3')"> <input type="button" value="+" onclick="addToDisplay('+')"> <input type="button" value="4" onclick="addToDisplay('4')"> <input type="button" value="5" onclick="addToDisplay('5')"> <input type="button" value="6" onclick="addToDisplay('6')"> <input type="button" value="-" onclick="addToDisplay('-')"> <input type="button" value="7" onclick="addToDisplay('7')"> <input type="button" value="8" onclick="addToDisplay('8')"> <input type="button" value="9" onclick="addToDisplay('9')"> <input type="button" value="*" onclick="addToDisplay('*')"> <input type="button" value="." onclick="addToDisplay('.')"> <input type="button" value="0" onclick="addToDisplay('0')"> <input type="button" value="C" onclick="clearDisplay()"> <input type="button" value="/" onclick="addToDisplay('/')"> <input type="button" value="=" onclick="calculate()"> </div> <script type="text/javascript"> function addToDisplay(value) { document.getElementById("display").value += value; } function clearDisplay() { document.getElementById("display").value = ""; } function calculate() { var expression = document.getElementById("display").value; var result = eval(expression); document.getElementById("display").value = result; } </script> </body> </html>
第二个
demo演示
<!DOCTYPE html> <html> <head> <title>计算器</title> <style> body { background-color: #F5F5F5; font-family: Arial, sans-serif; text-align: center; } h1 { margin-top: 50px; font-size: 30px; } .calculator { background-color: #F5F5F5; border-radius: 10px; box-shadow: 0px 0px 10px #888888; margin: 50px auto; padding: 20px; width: 300px; } .display { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px; font-size: 24px; height: 50px; margin-bottom: 10px; padding: 10px; text-align: right; width: 100%; } .button { background-color: #CCCCCC; border: none; border-radius: 5px; color: #000000; cursor: pointer; font-size: 24px; height: 50px; margin-bottom: 10px; width: 23%; } .button:hover { background-color: #DDDDDD; } .button:active { box-shadow: none; background-color: #AAAAAA; } .operator { background-color: #FFA500; color: #FFFFFF; } .equals { background-color: #4CAF50; color: #FFFFFF; width: 48%; } </style> </head> <body> <h1>计算器</h1> <div class="calculator"> <div class="display" id="display"></div> <button class="button" onclick="addToDisplay('7')">7</button> <button class="button" onclick="addToDisplay('8')">8</button> <button class="button" onclick="addToDisplay('9')">9</button> <button class="button operator" onclick="addToDisplay('+')">+</button> <button class="button" onclick="addToDisplay('4')">4</button> <button class="button" onclick="addToDisplay('5')">5</button> <button class="button" onclick="addToDisplay('6')">6</button> <button class="button operator" onclick="addToDisplay('-')">-</button> <button class="button" onclick="addToDisplay('1')">1</button> <button class="button" onclick="addToDisplay('2')">2</button> <button class="button" onclick="addToDisplay('3')">3</button> <button class="button operator" onclick="addToDisplay('*')">×</button> <button class="button" onclick="addToDisplay('0')">0</button> <button class="button" onclick="addToDisplay('.')">.</button> <button class="button operator" onclick="addToDisplay('/')">÷</button> <button class="button" onclick="clearDisplay()">C</button> <button class="button equals" onclick="calculate()">=</button> </div> <script> function addToDisplay(value) { document.getElementById("display").innerHTML += value; } function clearDisplay() { document.getElementById("display").innerHTML = ""; } function calculate() { var expression = document.getElementById("display").innerHTML; var result = eval(expression); document.getElementById("display").innerHTML = result; } </script> </body> </html>
