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

最新推荐文章于 2023-12-01 19:30:20 发布
最新推荐文章于 2023-12-01 19:30:20 发布
阅读量1k 收藏
点赞数
分类专栏： js 文章标签： button input xhtml javascript border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngerhao/article/details/7278168
版权
 

<!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   " οnclick="getNum(1)"></td>
    <td width="56"><input type="button" value="  2   " οnclick="getNum(2)"></td>
    <td width="51"><input type="button" value="  3   " οnclick="getNum(3)"></td>
    <td width="58"><input type="button" value="  +   " οnclick="getNum('+')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  4   " οnclick="getNum(4)"></td>
    <td><input type="button" value="  5   " οnclick="getNum(5)"></td>
    <td><input type="button" value="  6   " οnclick="getNum(6)"></td>
    <td><input type="button" value="  -   " οnclick="getNum('-')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  7   " οnclick="getNum(7)"></td>
    <td><input type="button" value="  8   " οnclick="getNum(8)"></td>
    <td><input type="button" value="  9   " οnclick="getNum(9)"></td>
    <td><input type="button" value="  *   " οnclick="getNum('*')"></td>
  </tr>
  <tr>
    <td><input type="button" value="  0   " οnclick="getNum(0)"></td>
    <td><input type="button" value="  .   " οnclick="getNum('.')"></td>
    <td><input type="button" value="  =   " οnclick="getResult()"></td>
    <td><input type="button" value="  /   " οnclick="getNum('/')"></td>
  </tr>
</table>
</body>
</html>

王浩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简单计算器
natural_live的博客
08-01 1477
先看一下效果图： 可能是最近一段时间用ul用多了，这些块都是li元素，后面发现button好像更好用一些。但还是能做的。 布局就不说了，会html和css的这个肯定会，贴上代码： body{margin:0;padding:0;} .container{ margin:auto; margin-top:200px; width:300px; height:3
JS实现基本的网页计算器功能示例
10-15
本示例讲解了如何使用JavaScript实现一个基本的网页计算器。这个计算器主要依赖于JavaScript的事件响应和数值运算功能，让网页中的按钮能够响应用户的点击并执行相应的计算操作。 首先，HTML部分创建了一个简单的...
JavaScript 网页简易计算器
weixin_62630571的博客
02-06 847
JavaScript 设计简易计算器
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
tutu6663的博客
12-01 4057
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
用javascript做一个计算器,用js做一个计算器代码
阿发狗伪原创
10-18 3638
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！  由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。   .html文件：   .css文件：   静态页面如图示： 1.功能：实现简单的数值的加减乘
用JavaScript实现一个简单的网页版计算器
run_bear的博客
08-05 9474
背景 实现效果 最终展现的页面如下图 用到的技术 实现思路 具体实现代码
js_实现网页中简易计算器
zl202111的博客
12-07 806
网页中实现简易的计算器功能
javascript实现简单的可随机变色网页计算器示例
10-20
本示例介绍的是如何使用JavaScript实现一个简单的网页计算器，该计算器具备基础的四则运算（加、减、乘、除）以及背景颜色随机变换的功能。以下是实现这个功能的关键知识点： 1. **HTML结构**： HTML用于构建...
网页版简单计算器特效代码
03-20
3. JavaScript 功能：计算器的核心功能由JavaScript实现，负责处理用户交互、执行计算逻辑和更新结果显示。JavaScript通过监听按钮点击事件，获取用户输入的数字和运算符，存储在内存中的变量（通常是两个操作数和一...
JS实现的最方便实用的网页计算器特效代码
03-20
这是一款基于JS实现的最方便实用的网页计算器源码，可实现基本的四则运算，并在上方的输入框记录算式，下方的输入框显示结果。是一款非常简单实用的JS计算器源码。该源码具有良好的兼容性，可兼容目前最新的各类主流...
js网页版手机计算器
06-12
js模拟手机计算器效果，实现网页版手机计算器，UI设计效果很棒，其他代码，懒人之家推荐下载
JavaScript网页计算器-栈实现.html
05-18
使用 JavaScript 写的网页版计算器。可以很好的完成加减乘除，但是并没有括号提供使用。内部实现的话，主要基于入栈出栈，与大学算法书中的简易计算器原理一致。
Javascript 实现简单计算器实例代码
10-21
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的计算器实例。这个计算器的代码涉及到HTML、CSS和JavaScript的交互，提供基本的数学运算功能，包括加、减、乘、除，并包含清零和退格功能。 首先，我们来...
基于js的网页计算器实现
学习小使者 的专栏
06-17 2278
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制、双曲函数、角度制、弧度制的运算，支持公式计算，以及一些常用的功能。
javascript简易计算器代码,用js做一个计算器代码
chatgpt001的博客
11-14 2014
大家好，小编来为大家解答以下问题，利用javascript制作简单的计算器，javascript简易计算器代码，今天让我们一起来看看吧！
JavaScript实现网页计算器
Alanx的博客
03-21 4972
Hbuilder X中实现网页计算器（+-*/） 文章目录 一、计算器代码 二、代码分析 一、计算器代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style type="text/css"> .kuang { border: 2px black soli...
用JavaScript编写网页计算器
程序yan的博客
10-13 8821
编写网页计算器，首先用两个text文本框接收输入的两个值，然后通过触发按钮的单击事件，即触发calc()函数，传递实参（add、sub、mul或者div），实现相应的加减乘除运算，最后将结果显示在结果的这个文本框，该文本框的属性有只读（readonly），从而实现结果的获取。 通过获取两个文本框的数值，然后赋值给num1和num2。同时也会判断输入是否为数字，否则无法进行运算。 function calc(func){ var result = document...
js简单计算器的实现,javascript简单计算器
神经网络爱好者
11-27 128
大家好，给大家分享一下js简单计算器的实现，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
javascript简易计算器
a17783481239的博客
09-18 2400
查看历史记录
js实现网页版计算器的基础上增加sin、cos、tan三角函数计算功能。
最新发布
01-13
要在JavaScript实现网页版计算器的基础上增加sin、cos、tan三角函数的计算功能，可以进行如下操作： 1. 在网页版计算器的HTML文件中，添加三个按钮，分别代表sin、cos、tan三角函数。 ``` ('sin')">sin ('cos')">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值