Html+js+css实现计算器功能
<!DOCTYPE html><html lang="en"><head> <meta charset="" ="utf-8"> <link rel="stylesheet" type="text/css" href="./css/a.css"> <script type=text/javascript src="./js/b.js"></script></head> <title>caculator</title></head><body onload="onload"> <p id="main"> <p class="jieguo"> <input type="text" id="screenname" name="screenname" class="screen" value="" onfocus="jsp(this)"> </p> <p class="keys"> <p class="key1"> <input type="button" id="AC" onclick="clearNum()" value="AC" class="buttons"> <input type="button" id="←" onclick="tuiGe()" value="←" class="buttons"> <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons"> <input type="button" id="&pide;" onclick="jsq(this.id)" value="&pide;" class="buttons" style="background-color: #ffbb66"> </p> <p class="key2"> <input type="button" id="7" onclick="clearNum()" value="7" class="buttons"> <input type="button" id="8" onclick="tuiGe()" value="8" class="buttons"> <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons"> <input type="button" id="×" onclick="jsq(this.id)" value="×" class="buttons" style="background-color: #ffbb66"> </p> <p class="key3"> <input type="button" id="4" onclick="clearNum()" value="4" class="buttons"> <input type="button" id="5" onclick="tuiGe()" value="5" class="buttons"> <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons"> <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="background-color: #ffbb66"> </p> <p class="key4"> <input type="button" id="1" onclick="clearNum()" value="1" class="buttons"> <input type="button" id="2" onclick ="tuiGe()" value="2"class="buttons"> <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons"> <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons" style="background-color: #ffbb66"> </p> <p class="key5"> <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons"> <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons" style="width: 100px;height: 50px;"> <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="width: 100px;height: 50px;background-color: #ffbb66"> </p> </p> </p></body></html>a.css
body,html,.key{ margin: 0px; padding: 0px;} #main{ margin-left: 35%; } .jieguo input{ width: 400px; height: 40px; top: 500px; text-align: center; border-radius: 8px; text-align: center;} .keys{ margin-left: 0; width: 400px;} .key1 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #AAAAAA; border:1px solid black;} .key2 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #DDDDDD; border:1px solid black;} .key3 input{ width: 100px; height: 50px; float: left; padding: 0px,auto; background-color: #DDDDDD; border:1px solid black;} .key4 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #DDDDDD; border:1px solid black;} .key5 input{ width: 200px; height: 50px; background-color: #DDDDDD; float: left; margin-left: 0px; border:1px solid black;}bjs
var numresult; var str; var input ;function onclicknum(nums) { input = document.getElementById("screenname"); input.value= input.value + nums; } function onclickclear() { input = document.getElementById("screenname"); input.value= ""; } function onclickresult() { input = document.getElementById("screenname"); numresult = eval(input.value); input.value= numresult; } function onclickback() { input = document.getElementById("screenname"); str=input.value.substring(0,input.value.length-1); document.getElementById("screenname").value=str; }下面放两张例子图 
这里有两个示例图
以上是用html+js+css实现计算器功能的简单方法的细节。请多关注AdminJS.cn的其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！