JAVASCRIPT:计算器代码

最新推荐文章于 2025-08-11 19:52:03 发布
最新推荐文章于 2025-08-11 19:52:03 发布
阅读量1.9k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript button input div border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/goushaoping04/article/details/1117847
本文介绍了一个使用HTML和JavaScript实现的简易网页计算器。该计算器具备基本的算术运算功能，并支持开方和取反操作。文章详细展示了计算器的界面布局及核心代码逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<title>我的计算器</title>
<script language="javascript">
var point=true;
var result=0;
var op="";
var cle=true;
var fristNum =true;
var lastNum;
function count(num)
{
 if((fristNum==true)&&(isNaN(num)==false))
 {
  document.counter.screenTxt.value="";
  fristNum=false;
 }
 
 if((num==".")&&(point==true))
 {
  if(document.counter.screenTxt.value.length==0)
   {
    document.counter.screenTxt.value="0";
    point=false;
   }
  else
   {
        document.counter.screenTxt.value=document.counter.screenTxt.value+num;
    point=false;
   }
   lastNum=document.counter.screenTxt.value;
  
 }
 if(isNaN(num)==false)
 {
  if(document.counter.screenTxt.value.length==0)
   document.counter.screenTxt.value=num;
  else
   document.counter.screenTxt.value=document.counter.screenTxt.value+num;
  lastNum=document.counter.screenTxt.value;
 }

 if((isNaN(num)==true)&&(num!=".")&&(num!="C")&&(num!="x")&&(num!="s"))
 {
  point=true;
  fristNum=true;
  
  
  if(num!="=")
  {
   op=num;
   if(cle==true)
   {
    if(lastNum!="")
     result =eval(result+op+lastNum);
    cle=false;
   }
   else
   {       
   result = eval(result+op+lastNum);
   }
   document.counter.screenTxt.value=result;
  }
  else
  {
      if(lastNum!="")
   document.counter.screenTxt.value=eval(result+op+lastNum);
   result=document.counter.screenTxt.value;
   lastNum="";
   op="";
   cle=true;
  }
  
 }
 if(num=="x")
 {
   document.counter.screenTxt.value=-parseFloat(document.counter.screenTxt.value);
   lastNum="";
   result=document.counter.screenTxt.value;
   
 }
 if(num=="s")
 {
  document.counter.screenTxt.value=Math.sqrt(parseFloat(document.counter.screenTxt.value));    //document.counter.screenTxt.value=parseFloat(document.counter.screenTxt.value)*parseFloat(document.counter.screenTxt.value);
  result=document.counter.screenTxt.value;
 }
 if(num=="C")
 {
  document.counter.screenTxt.value="";
  point=true;
  result=0;
  op="";
  cle=true;
  fristNum =true;
  lastNum = 0;
 }
 if(document.counter.screenTxt.value=="NaN")
        document.counter.screenTxt.value="";
  
}
</script>
</head>

<body>
<table  width="32%"  border="2" align="center" cellpadding="2" bordercolor="#333333" cellspacing="0"><form  name="counter" style="text-align:center" dir="rtl">
  <tr>
    <td  height="60px" colspan="5" align="left" valign="top">
      <label>
      <div align="right">
        <input name="screenTxt" type="text"  style=" border-bottom-color:#003333; height:60px; border:ridge; font-size:40px; color:#000000; width:250px; "    maxlength="15" readonly="true" />
      </div>
      </label>      </td>
  </tr>
  <tr>
    <td width="47" height="40">      <div align="center">
      <input name="7" onClick="count('7')" type="button"  style="width:40px;height:40px"  value="7"/>   
    </div></td>
    <td width="47" height="40">        <div align="center">
      <input name="8" type="button" id="8" onClick="count('8')"  style="width:40px;height:40px"  value="8"/>     
    </div></td>
    <td width="47" height="40">      <div align="center">
      <input name="9" onClick="count('9')"  type="button"  style="width:40px;height:40px"  value="9"/>   
    </div></td>
    <td width="44" height="40">      <div align="center">
      <input name="+" onClick="count('+')"  type="button" id="+" style="width:40px;height:40px"  value="+"/>   
    </div></td>
    <td width="49">      <div align="center">
      <input name="C" type="button" onClick="count('C')"  id="C" style="width:40px;height:40px"  value="C"/>   
    </div></td>
  </tr>
  <tr>
    <td width="47" height="40"><div align="center">
      <input name="4" onClick="count('4')"  type="button" id="4" style="width:40px;height:40px"  value="4"/>
    </div></td>
    <td width="47" height="40"><div align="center">
      <input name="5" onClick="count('5')"  type="button" id="5" style="width:40px;height:40px"  value="5"/>
    </div></td>
    <td width="47" height="40"><div align="center">
      <input name="6" onClick="count('6')"  type="button" id="6" style="width:40px;height:40px"  value="6"/>
    </div></td>
    <td width="44" height="40"><div align="center">
      <input name="-" onClick="count('-')"  type="button" id="-" style="width:40px;height:40px"  value="-"/>
    </div></td>
    <td width="49" height="40"><div align="center">
      <input name="*" type="button" onClick="count('*')"  style="width:40px;height:40px"  value="*"/>
    </div></td>
  </tr>
  <tr>
    <td width="47" height="40"><div align="center">
      <input name="1" onClick="count('1')"  type="button"  value="1" style="width:40px;height:40px"/>
    </div></td>
    <td width="47" height="40"><div align="center">
      <input name="2" onClick="count('2')"  type="button"  style="width:40px;height:40px"  value="2"/>
    </div></td>
    <td width="47" height="40"><div align="center">
      <input name="3" onClick="count('3')"  type="button"  style="width:40px;height:40px"  value="3"/>
    </div></td>
    <td width="44" height="40"><div align="center">
      <input name="/" onClick="count('/')"  type="button" id="/" style="width:40px;height:40px"  value="/"/>
    </div></td>
    <td width="49" height="40"><div align="center">
      <input name="sqrt" onClick="count('s')"  type="button" style="width:40px;height:40px"  value="SQRT"/>
    </div></td>
  </tr>
  <tr>
    <td width="47" height="40"><div align="center">
      <input name="0" onClick="count('0')"  type="button"  style="width:40px;height:40px"  value="0"/>
    </div></td>
    <td width="47" height="40"><div align="center">
      <input name="." onClick="count('.')"  type="button"  style="width:40px;height:40px"  value="."/>
    </div></td>
    <td height="40"><div align="center">
      <input name="-(X)" type="button" id="-(X)"  style="width:40px;height:40px" onClick="count('x')"  value="-(X)"/>
    </div></td>
    <td height="40" colspan="2"><div align="center">
      <input name="=" type="button" onClick="count('=')"  style="width:80px;height:40px;"  value="="/>
    </div></td>
    </tr>
  </form>
</table>
</body>
</html>
 

goushaoping04
关注
JavaScript简单的计算器源代码
WEL测试
11-16 1608
function Compute(a,op,b) { switch(op) { case "+": alert(parseInt(a)+parseInt(b)); document.write(parseInt(a)+parseInt(b)); break; case "-": alert(parseInt(a)-parseInt
JavaScript 普通计算器 思路分析及代码
weixin_42128001的博客
08-09 5887
1。普通计算器代码实现功能： 加减乘除运算功能 取小数 取相反数 清除一位数及运算符 全部清除 2。界面： 此界面参照oppo r9手机自带计算器的界面 3。思路 （1）显示： 显示界面实际为两个框，下方的是showwin，上方的是calwin 用js的字符串拼接将点击的值拼接起来存储在results中，lastkey存储当前鼠标点击的值，然后将results的值放入show...
JavaScript实现计算器
wangshiyi13的博客
07-18 5656
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JavaScript实现简单的四则运算
Marblog
03-22 1万+
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function jsq(op) { var a = parseFloat(document.getElementById("num1").value); var b = parseFloat(document.getElementById("num2").va..
JScalculator:计算器JavaScript实现
05-09
本项目“JScalculator”是一个基于JavaScript实现的简单计算器，它为我们提供了理解JavaScript编程、DOM操作以及事件处理等方面的基础知识。 1. JavaScript基础： JavaScript是一种解释型、弱类型、基于原型的语言...
计算器：计算器-HTML，CSS，JavaScript
02-09
标题中的“计算器：计算器-HTML，CSS，JavaScript”表明我们将探讨一个使用这三种技术构建的交互式计算器项目。HTML（HyperText Markup Language）是网页内容的基础结构语言，CSS（Cascading Style Sheets）用于定义...
计算器：计算器
02-18
【标题】：“计算器：计算器” 在IT领域，计算器是一个基础...总的来说，“Kiddo计算器”项目结合了HTML、CSS和JavaScript等核心技术，为孩子们提供了一个寓教于乐的学习平台，同时也展示了前端开发的基本流程和技巧。
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
JavaScript实现一个简易的计算器实例代码
05-14
- 示例代码：`table.addEventListener('keydown', function(e) { if (e.key === 'Enter') { ... } })` - **兼容性处理**: 考虑不同浏览器之间的差异，提供统一的获取元素样式的解决方案。 - 示例代码：`function ...
js 实现简单计算器+代码
qq_35069563的博客
01-22 1835
计算器 #screen { width: 150px; height: 50px; background-color: white; font-size: 20px; resize:none; } button { width: 35px; height: 35px; background-color: greenyellow; } #title { tex
JS简易计算器功能代码
enenaha的博客
05-11 5328
HTML代码： <!DOCTYPE html> <html> <head> <meta contentS="text/html; charset=utf-8" /> <script type="text/javascript" src="test.js"></script> <title>test</...
基于JavaScript实现网页计算器
苦涩
04-04 2682
基于JavaScript的网页计算器 基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能 界面如下： 有兴趣的朋友可以继续完善 ^ _ ^ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
js 使用console计算代码运行时间
现在学习也不晚
08-23 2万+
需求如果学习前端一定时间以后，就会考虑性能方面的问题。那么问题来了，我们怎么计算出一段代码的运行时间呢？使用console.log配合Date对象计算比如，我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话，可以这么写： var arr = []; for(var i=0; i<100000; i++){ arr.push(Math
JavaScript实现四则运算
穆雄雄的博客
10-25 4423
编写一个带有两个变量和一个运算符的函数，调用时接收prompt输入 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999...
用js写计算器代码
weixin_46176142的博客
07-05 5492
此项目的收获 input[type=“text”]{}的css用法 isNaN（n）:不能转换为数字：ture，可以转换成数字：flase return !isNaN(n); n=n.substr(0,n.length-1); 字符串减少最后一个 [0，NaN，“”，null，undefined]都可以直接转化为false，但这几个值不是完全相等的 return (n==“0”||n.length==0);判断里面是否正确，正确为true，错误为false； NaN 属性是代表非数字值的特殊值。该属性.
前端工程化：pinia
最新发布
西岭千秋雪的博客
08-11 375
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
Vue3学习之创建vue3项目文件
2301_76989410的博客
08-09 341
Vue3是一个更高效、轻量级的渐进式JavaScript框架，专注于构建用户界面。本文介绍了Vue3项目创建流程：首先安装Node.js并验证环境；然后通过PyCharm创建项目文件夹，使用npm命令初始化Vue项目并选择配置（建议选择TypeScript）；最后清理默认文件结构，开始自定义开发。文中还详细说明了如何删除默认组件代码，为个性化开发做好准备。
打造简易JavaScript计算器：完整源代码解析
根据提供的文件信息，我们可以详细探讨使用JavaScript编写的计算器的源代码，包括...以上就是有关JavaScript计算器源代码的知识点总结。在实际开发中，结合HTML和CSS，开发者可以创建出具有良好交互体验的计算器应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值