js实现的网页版的计算器（简单、方便）

最新推荐文章于 2021-10-31 21:28:11 发布
最新推荐文章于 2021-10-31 21:28:11 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： button input xhtml javascript border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/youngerhao/article/details/7278168
本文介绍了一个使用HTML和JavaScript实现的简易网页计算器。该计算器能够进行基本的数学运算，如加、减、乘、除等，并通过按钮点击的方式输入数字和运算符。

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>计算器</title>
<script language="javascript" type="text/javascript">
 var clearFlag=false;
 function getNum(num){
 //alert(num);
  var objresult=document.getElementById("result");
  
  if(clearFlag){
   objresult.value="";
   clearFlag=false;
  }
 //alert(objresult);
 objresult.value+=num;
 
 }
function getResult(){
 var objresult=document.getElementById("result");
 objresult.value=objresult.value+"="+eval(objresult.value);
 clearFlag=true;
}

 

</script>
</head>
<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td colspan="4"><input type="text" name="result" id="result" size="33"></td>
  </tr>
  <tr>
    <td width="56"><input type="button" value="  1   " onclick="getNum(1)"></td>
    <td width="56"><input type="button" value="  2   " onclick="getNum(2)"></td>
    <td width="51"><input type="button" value="  3   " onclick="getNum(3)"></td>
    <td width="58"><input type="button" value="  +   " onclick="getNum('+')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  4   " onclick="getNum(4)"></td>
    <td><input type="button" value="  5   " onclick="getNum(5)"></td>
    <td><input type="button" value="  6   " onclick="getNum(6)"></td>
    <td><input type="button" value="  -   " onclick="getNum('-')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  7   " onclick="getNum(7)"></td>
    <td><input type="button" value="  8   " onclick="getNum(8)"></td>
    <td><input type="button" value="  9   " onclick="getNum(9)"></td>
    <td><input type="button" value="  *   " onclick="getNum('*')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  0   " onclick="getNum(0)"></td>
    <td><input type="button" value="  .   " onclick="getNum('.')"></td>
    <td><input type="button" value="  =   " onclick="getResult()"></td>
    <td><input type="button" value="  /   " onclick="getNum('/')"></td>
  </tr>
</table>
</body>
</html>

js实现网页计算器
05-27
一个漂亮的网页计算器，学习的人可以做为参考！
JS实现基本的网页计算器功能示例
10-15
本示例讲解了如何使用JavaScript实现一个基本的网页计算器。这个计算器主要依赖于JavaScript的事件响应和数值运算功能，让网页中的按钮能够响应用户的点击并执行相应的计算操作。 首先，HTML部分创建了一个简单的...
js网页计算器
wgod
06-18 980
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> <style type="text/css"> table input{ width:50px; height:50px; }/*设置按钮格式*/ #scre.
JS网页计算器
microminor
04-19 890
最近刚刚开始学习HTML/CSS/JS，打算
简单计算器
weixin_30617695的博客
05-23 99
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; u...
网页版简单计算器特效代码
03-20
3. JavaScript 功能：计算器的核心功能由JavaScript实现，负责处理用户交互、执行计算逻辑和更新结果显示。JavaScript通过监听按钮点击事件，获取用户输入的数字和运算符，存储在内存中的变量（通常是两个操作数和一...
javascript实现简单的可随机变色网页计算器示例
10-20
本示例介绍的是如何使用JavaScript实现一个简单的网页计算器，该计算器具备基础的四则运算（加、减、乘、除）以及背景颜色随机变换的功能。以下是实现这个功能的关键知识点： 1. **HTML结构**： HTML用于构建...
网页版计算器实现教程：使用JavaScript代码
- JavaScript是一种高级的、解释型的编程语言，它专门为网页开发设计，能够实现网页的动态交互效果。在这个标题中，它被用作主要技术实现一个网页版计算器。 知识点二：网页版计算器的功能实现 - 网页版计算器指的...
Javascript 实现简单计算器实例代码
10-21
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的计算器实例。这个计算器的代码涉及到HTML、CSS和JavaScript的交互，提供基本的数学运算功能，包括加、减、乘、除，并包含清零和退格功能。 首先，我们来...
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
超漂亮JS网页计算器
05-11
摘要:脚本资源,Ajax/JavaScript,网页计算器 超漂亮JS网页计算器，用js实现了加减乘除运算的计算器代码，界面漂亮，功能方面只实现了最基础的基本计算功能，在火狐或Chrome下有更美观的表现，本代码只是介绍你一种用JS实现计算器的方法，若要更复杂的计算，只需要对照扩展即可。 运行环境：HTML/PHP/ASP/
基于JavaScript的网页版计算器
01-07
基于JavaScript的网页版计算器，适合于初学者学习
网页计算器原生js实现
qq_40664548的博客
04-21 614
鼠标点击按钮或者键盘按键都可实现！！！（话不多说，直接上源码） 计算器 简单的计算器 ...
JS版简易网页计算器
Donnie的专栏
10-05 955
var num=""; var operator=""; var front=""; var back=""; function numsend(val){ var getnum=val.value; if(getnum=="+"||getnum=="-"||getnum=="*"||getnum=="/"){ front=num; operator=getnum; num=""
JavaScript原生-网页版计算器
weixin_44897872的博客
10-31 1249
由于无聊看电脑上的系统软件翻到了计算器这个功能 于是无聊就无聊吧,就简单写一下这个计算器的功能吧.这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制即可 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
用js做出计算机界面,网页版计算器的实现(js实现计算功能)
weixin_31826689的博客
07-24 1464
标签都有一个点击事件,appContent(this),相信大家也看得懂,这是把点击的当前的对象当成参数传进方法中,其实这样子做的目的应该能猜到,就是往上面的框框中尾加字符串的意思,除了几个特别的,比如图中的"del","c","="这几个是不能尾加的,所以需要另作考虑,既然这样的话,那我们的代码其实就很简单了:function appContent(td){//找到显示字符串等式的td标签var...
用JavaScript编写网页计算器
热门推荐
程序yan的博客
10-13 1万+
编写网页计算器，首先用两个text文本框接收输入的两个值，然后通过触发按钮的单击事件，即触发calc()函数，传递实参（add、sub、mul或者div），实现相应的加减乘除运算，最后将结果显示在结果的这个文本框，该文本框的属性有只读（readonly），从而实现结果的获取。 通过获取两个文本框的数值，然后赋值给num1和num2。同时也会判断输入是否为数字，否则无法进行运算。 function calc(func){ var result = document...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值