用HTML,CSS,JS实现简单的计算器网页

百科大全

更新时间：2025-10-05 07:08:4142

admin管理员组
文章数量:1794759

用HTML,CSS,JS实现简单的计算器网页

爷爷！！！你关注的UP主终于更新了！！！

首先来HTML style="color:#2aa0ea" target=_blank class=infotextkey>简单解释一下什么是HTML,CSS,JS 1.HTML HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。 2.CSS 中文翻译为“层叠样式表”,主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。 3.JS JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

计算器下面是代码展示,一些需要注意的地方会进行注释供大家更好地理解

这部分是引用jQuery实现的代码

<html> <head> <meta charset="utf-8"> <title>计算器</title>//网页标题 <script src="jquery-1.9.1.min.js"></script>//导入jQuery <script> function MCK(number) { //jQuery("#num1")等效于原生代码中的document.getElementById("num2") //这就是导入jQuery的优点之一 var inputnum1 = jQuery("#num1"); var inputnum2 = jQuery("#num2"); //直接调用val() if(inputnum1.val()==""){ alert("第一个数字没输入呢!"); return false; } if(inputnum2.val()==""){ alert("第二个数字没输入呢!"); return false; } var total=0; //加 if(number==1){ total=parseInt(inputnum1.val())+parseInt(inputnum2.val()); } //减 else if(number==2){ total=parseInt(inputnum1.val())-parseInt(inputnum2.val()); } //乘 else if(number==3){ total=parseInt(inputnum1.val())*parseInt(inputnum2.val()); } //除 else if(number==4){ total=parseInt(inputnum1.val())/parseInt(inputnum2.val()); } //直接调用html给result赋值 jQuery("#result").html( "<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"); //清空 if(number==5){ if(confirm("确定清空吗?")){ //直接调用赋值 inputnum1.val(""); inputnum2.val(""); jQuery("#result").html(""); } return false; } } </script> </head> <body> //用一个大div包住,给居中效果 <div style="text-align: center"> <h1>计算器</h1>  <div> 第一个数字:<input id="num1" type="number" ><p></p> 第二个数字:<input id="num2" type="number"><p></p> </div>  <div> <input type="button" value="相加" style="color: red" onclick="MCK(1)"> <input type="button" value="相减" style="color: purple" onclick="MCK(2)"> <input type="button" value="相乘" style="color: green" onclick="MCK(3)"> <input type="button" value="相除" style="color: yellow" onclick="MCK(4)"> <input type="button" value="清空" style="color: blue" onclick="MCK(5)">  <div id="result" style="font-size: 20px"> </div> </div> </div> </body> </html>

展示效果

下面是DOM原码实现

<html> <head> <meta charset="utf-8"> <title>简易计算器</title> <script> function MCK(type) { var inputnum1=document.getElementById("num1"); var inputnum2=document.getElementById("num2"); if(inputnum1.value==""){ alert("数字1没输入"); return false; } if(inputnum2.value==""){ alert("数字2没输入"); return false; } //加 if(type==1){ var total=parseInt(inputnum1.value)+parseInt(inputnum2.value); document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>" } //减 if(type==2){ var total=parseInt(inputnum1.value)-parseInt(inputnum2.value); document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>" } //乘 if(type==3){ var total=parseInt(inputnum1.value)*parseInt(inputnum2.value); document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>" } //除 if(type==4){ var total=parseInt(inputnum1.value)/parseInt(inputnum2.value); document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>" } if(type==5){ if(confirm("确认清空吗?")){ inputnum1.value=""; inputnum2.value=""; document.getElementById("result").innerHTML=""; } return false; } } </script> </head> <body> <div style="text-align: center"> <div style="margin-top: 100px;font-size: 30px"> <h1>计算器</h1>  数字1:<input id="num1" type="number"><p></p> 数字2:<input id="num2" type="number"><p></p> </div>  <div> <input type="button" value="加" style="color: deeppink;font-size: 20px" onclick="MCK(1)"> <input type="button" value="减" style="color: blue;font-size: 20px" onclick="MCK(2)"> <input type="button" value="乘" style="color: red;font-size: 20px" onclick="MCK(3)"> <input type="button" value="除" style="color: purple;font-size: 20px" onclick="MCK(4)"> <input type="button" value="清" style="color: cyan;font-size: 20px" onclick="MCK(5)"> </div>  <div id="result" style="margin-top: 50px"> </div> </div> </body> </html>

结果展示

从代码上看起来,很明显引入jQuery比原码实现更加的方便简捷. 实现效果都类似

加油，铁汁！！！

本文标签：计算器简单网页 html css

版权声明：本文标题：用HTML,CSS,JS实现简单的计算器网页内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686746262a97724.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。