如何用JavaScript编写一个支持长尾关键词的智能计算器程序？

2026-04-02 22:571阅读0评论SEO问题

内容介绍
文章标签
相关推荐

本文共计1037个文字，预计阅读时间需要5分钟。

原文：本文实例为大家分享了JavaScript实现简易计算器功能的具体代码，供大家参考。具体内容如下：+ 效果图 + 源代码：!DOCTYPE

本文展示了如何使用JavaScript编写一个简易计算器的代码示例，并提供参考。主要内容包括：+ 效果展示 + 源代码示例：!DOCTYPE

本文实例为大家分享了JavaScript实现简易计算器功能的具体代码，供大家参考，具体内容如下

效果图：

源代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .dome { width: 400px; height: 430px; margin: 50px auto; background: #CCC; padding: 20px; } .dome>input { width: 100%; height: 50px; font-size: 24px; margin-bottom: 30px; } .dome>button { width: 90px; height: 60px; background-color: white; border: none; margin: 5px; float: left; font-size: 18px; } button:hover { cursor: pointer; } </style> </head> <body> <div class="dome">  <input type="" name="" id="ipt" value="0" /> <button class="num">7</button> <button class="num">8</button> <button class="num">9</button> <button id="del">←</button> <button class="num">4</button> <button class="num">5</button> <button class="num">6</button> <button class="ysf">+</button> <button class="num">1</button> <button class="num">2</button> <button class="num">3</button> <button class="ysf">-</button> <button>%</button> <button class="num">0</button> <button class="num">.</button> <button class="ysf">*</button> <button id="clear">AC</button> <button class="ysf">/</button> <button id="result" style="width: 190px; background-color: #333; color: white;">=</button> </div> </body> </html> <script type="text/javascript"> //1.把数字和小数点归为一类。class="num" //2.把加减乘除运算符归为一类。 //3.显示框，退格键，归零键，等号单独设置id。 //4.把显示框，归零键，等号，退格标签对象获取出来。 //5.点击数字，在显示框上显示 //6.要做运算，条件得两个数和一个运算符 //7.定义三个变量用来接收第一个数，第二个数和运算符。 //8.四则运算 var numValue1 = ''; var numValue2 = ''; var czf = ''; var ipt = document.getElementById("ipt"); var del = document.getElementById("del"); var clear = document.getElementById("clear"); var result = document.getElementById("result"); var numArr = document.getElementsByClassName("num"); for (var i = 0; i < numArr.length; i++) { //给每个数字绑定单击事件 numArr[i].onclick = function() { //判断用户是否在输入小数点 if(this.innerText=="."){ //alert("点小数点了"); if(numValue1.indexOf(".")==-1&&numValue1.length>=1){ // var num = this.innerText; // alert(num); numValue1 += this.innerText; //乘1会去掉首尾无效的0 ipt.value = numValue1*1; } }else{ // var num = this.innerText; // alert(num); numValue1 += this.innerText*1; //乘1会去掉首尾无效的0 ipt.value = numValue1; } } } //给运算符绑定单击事件 var ysfArr = document.getElementsByClassName("ysf"); for (var i = 0; i < ysfArr.length; i++) { //给每个数字绑定单击事件 ysfArr[i].onclick = function() { //当用户点击了运算符，把第一个数字给第二个数字，然后把第一个数字清空，用来接收用户输入的第二个数字 //alert(this.innerText); if (numValue2 == '') { numValue2 = numValue1; numValue1 = ''; czf = this.innerText; //alert("普通运算"); } else { //有可能会进行四则运算 //alert("有可能会进行四则运算"); if(numValue1!=''){ resultFun(); } } //保存操作符 czf = this.innerText; } } //给等号绑定单击事件，进行运算 result.onclick = function() { resultFun(); } //运算结果 function resultFun() { var one = Number(numValue2); var two = Number(numValue1); var r = null; switch (czf) { case '+': r = one + two; break; case '-': r = one - two; break; case '*': r = one * two; break; case '/': if (two == 0) { alert("除数不能为0"); numValue1 = ''; numValue2 = ''; czf = ''; r = 0; } else { r = one / two; } break; } //四则运算时，把上一次运算的结果给numValue2，然后把numValue1 清空 numValue2 = new Number(r).toFixed(4)*1; numValue1=''; ipt.value = numValue2; } //归零键 clear.onclick = function() { numValue1 = ''; numValue2 = ''; czf = ''; ipt.value = '0'; } //退格键 del.onclick = function() { if (numValue1.length >= 1) { numValue1 = numValue1.substring(0, numValue1.length - 1); ipt.value = numValue1; }else if(numValue2.length >= 1){ numValue2 = numValue2.substring(0, numValue2.length - 1); ipt.value = numValue2; }else { numValue1 = ''; numValue2 = ''; czf = ''; ipt.value = '0'; } } </script>

补充说明：仍有部分bug尚未解决，因作者水平有限，代码仅供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

标签：简易计算器功能本文实