欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页知识笔记正文

html计算器代码,html计算器加减乘除代码

终极管理员 知识笔记 110阅读

以下是一个更复杂的计算器的HTML代码示例

code class="prism language-html"><!DOCTYPE html><html><head> <title>计算器</title> <style> .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .display { width: 100%; height: 60px; margin-bottom: /span>; padding: /span>; font-size: 30px; text-align: right; background-color: #f1f1f1; border: none; border-radius: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: /span>; } .button { width: 70px; height: 50px; background-color: #eee; border-radius: 5px; font-size: 20px; text-align: center; line-height: 50px; cursor: pointer; } .button:hover { background-color: #ddd; } .button.clear { grid-column: span 2; } .button.equals { background-color: #f39c12; color: #fff; } </style></head><body> <div classcontainer> <input typetext iddisplay classdisplay readonly> <div classbuttons> <div classbutton clear onclickclearDisplay()>C</div> <div classbutton onclickappendValue(7)>7</div> <div classbutton onclickappendValue(8)>8</div> <div classbutton onclickappendValue(9)>9</div> <div classbutton onclickappendValue(4)>4</div> <div classbutton onclickappendValue(5)>5</div> <div classbutton onclickappendValue(6)>6</div> <div classbutton onclickappendValue(1)>1</div> <div classbutton onclickappendValue(2)>2</div> <div classbutton onclickappendValue(3)>3</div> <div classbutton onclickappendValue(0)>0</div> <div classbutton onclickappendValue(.)>.</div> <div classbutton onclickappendValue()></div> <div classbutton onclickappendValue(-)>-</div> <div classbutton onclickappendValue(*)>*</div> <div classbutton onclickappendValue(/)>/</div> <div classbutton onclickcalculate()></div> </div> </div> <script> function appendValue(value) { var display document.getElementById(display); var lastChar display.value.slice(-1); if (lastChar . && value .) { return; } display.value value; } function calculate() { var display document.getElementById(display); var expression display.value; if (expression) { try { var result eval(expression); display.value result; } catch (error) { display.value 错误; } } } function clearDisplay() { document.getElementById(display).value ; } </script></body></html>/pre>

标签:
声明:无特别说明,转载请标明本文来源!