js简单实现计算器

最新推荐文章于 2024-01-23 16:40:43 发布
最新推荐文章于 2024-01-23 16:40:43 发布
阅读量1.8k 收藏 2
点赞数
文章标签： button function xhtml javascript border input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php_897721669/article/details/7299743
版权
<!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=utf-8" />
<title>js-计算器</title>
</head>
<script language="javascript" type="text/javascript">


var clearmsg=false;
//获取点击获得的参数
function getNum(num){

var objResult = document.getElementById("result");
if(clearmsg){
objResult.value ="";
clearmsg=false;
}
//将获得的值进行累加
objResult.value += num;
}

//进行计算
function  getResult(){

var objResult = document.getElementById("result");

objResult.value = objResult.value + "=" + eval(objResult.value);
clearmsg=true;

}


</script>


<body>
<table width="250" border="1" align="center">
<caption>js-计算器</caption>
  <tr>
    <td colspan="4"><input type="text" name="result" id="result" size="40"/></td>
  </tr>
  <tr>
    <td><input type="button" value="    1    "  οnclick="getNum(1)"/></td>
    <td><input type="button" value="    2    "  οnclick="getNum(2)"/></td>
    <td><input type="button" value="    3    "  οnclick="getNum(3)"/></td>
    <td><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>
php_897721669
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS计算器函数
liukaixuan917的专栏
03-05 938
function Point () //小数运算函数 { var PointReadOut = FKeyPad.ReadOut.value; if (FlagNewNum) { PointReadOut = "0."; FlagNewNum = false; } else { if (PointReadOut.indexOf(".") == -1) PointReadOut
JS函数实现基本计算器计算
穿着裤衩跳
03-29 2026
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> Insert title here function checknum(){ var x = document.getElementById("name1");//操作数1 var y = docu
基于JavaScript的贷款计算器
03-11
基于JavaScript的贷款计算器，计算每月付款、付款总额、利息总额，并用图形友好的进行显示
js函数计算器
qq_51273290的博客
05-19 307
函数计算器 ← C % √ 7 8 9 ÷ 4 5 6 × 1
js函数实现简易计算器
ovocc的博客
12-18 4416
var n = prompt('欢迎使用简易计算器:\n1.加法计算器:\n2.减法计算器:\n3.乘法计算器:\n4除法计算器:\n5.退出:\n请输入你的选择:'); function Calculate(n) { n = parseInt(n); while (n != 5) { switch (n) { case 1: ...
javascript计算器
01-03
需要用 JavaScript 编写一个简单的计算器。•实现一个类似Windows附件中的标准型计算器的基本功能； •实现加，减，乘，除，取余，开平方，求倒数这七种基本运算（可以自行决定支持更多的运算类型）； •支持正负号，小数点输入；实现Backspace, CE, C键的功能； •要求实现行为与结构的分离，页面的XHTML文件中不要出现事件响应句柄（即onclick等），全部计算在JavaScript文件(.js)中完成； •要求该 JavaScript 程序在IE6/8，Firefox下测试通过，运行中没有错误/警告/异常；老规矩，程序的各个文件同样要通过各种认证； •需用到的技术有：事件与事件响应，DOM 操作
javascript实现计算器功能
10-15
JavaScript实现计算器功能的知识点可以分为以下几个方面详细阐述： 1. HTML结构设计：文章中提供了一个简易计算器的HTML布局，其中使用了div元素来构建计算器的基本外观。在这个布局中，计算器被分为三个主要部分：...
利用Javascript实现BMI计算器
10-21
根据提供的文件内容，我们可以生成关于如何使用JavaScript实现一个BMI（Body Mass Index，身体质量指数）计算器的知识点。 ### BMI计算器的背景和重要性 BMI指数是一种计算方法，用于评估一个人的体重是否处于健康...
js实现简单计算器
10-23
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的...
js网页版计算器的简单实现
10-27
### JS网页版计算器的简单实现 #### 一、概述 本文档将详细介绍一个简单的JS网页版计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法、除法以及数字输入等功能。对于学习前端开发尤其是...
javascript简易计算器
a17783481239的博客
09-18 2688
查看历史记录
用JS实现一个简单的计算器
weixin_44049725的博客
12-26 980
首先我们先是在HTNL页面中去进行计算器界面的一个构建，这里我就直接上代码了： HTML页面代码： <div> //包裹整个界面的大盒子 <input type="text" id="content"> //计算输入、输出框 <ul id="calcu"> //计算器的全部按钮 <li>1</li> <...
js实现简单的计算器
Spring_East的博客
07-19 927
js实现一个简单的计算器，有加减乘除的基本功能。 首先使用HTML写一个界面，需要三个文本框，包括两个输入框，一个输出框，输出框不能被操作，还需要一个选择框，用来选择运算方式，最后还需要两个按钮，等于按钮以及清零按钮。 选择框使用标签select 输出按钮不能被操作则应使用属性disabled="true" 清零功能则使用reset,可以清零整个表单，不
使用 js 实现 贷款计算器功能
风之使者的博客
02-07 5684
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table> <tr> <th>Enter Loan Data:</th> <td></td> <th
用js实现简单计算器方法
weixin_46515050的博客
04-06 1636
用js实现简单计算器方法 <style> .div1 { width: 208px; height: 308px; margin: auto; border: 2px solid #000000; font-size: 0; } .div2 { width: 208px; height: 100px; font...
JS原生——计算器（非eval，附源码）
最新发布
前端小白一枚
01-23 1452
带括号的加减乘除运算、清空、清空末位、历史记录、字体切换、主题切换。主要利用弹栈的思想实现：定义calculateExpression函数，接受一个表达式作为参数。如果表达式中包含了括号，则使用递归的方式处理括号内的子表达式。具体来说，首先找到左括号的位置left和右括号的位置right，然后将括号内的子表达式提取出来，并调用自身并传入子表达式作为参数，得到子表达式的计算结果subResult。
JavaScript实现计算器方法拓展
慕白博客
07-23 268
一、最终效果 由于主要是逻辑的实现，就没有过多的样式，效果图如下 HTML代码 &lt;div id="calculator"&gt; &lt;p&gt; &lt;input type="text" class="formerInput" value="1" /&gt; &lt;span class="sign&q
纯原生JS+bootstrap4贷款计算器(等额本息、等额本金)
A123474JJ的博客
12-05 553
因为工资业务上的需要，研究一下贷款吧，这玩意挺烧脑，哈哈哈~觉得有用的小伙伴记得关注一下哦。
【JavaScript】在学习JS时，写一个简易计算器，发现clear不可以作为自定义函数名。
29的博客
11-27 572
在学习JS时，写一个简易计算器，发现clear不可以作为自定义函数名。 一开始 当实现C为清除文本框中的value值时，自然想到的就是clear这个清除单词，所以就用了以下的函数调用： function clear(){ str = document.getElementById(&amp;amp;amp;quot;result&amp;amp;amp;quot;); str.value = &amp;amp;amp;quot;&amp;amp;amp;quot;;
JavaScript实现简易计算器
"这篇文档提供了一个使用JavaScript实现的简易计算器的代码示例，涵盖了加法、减法、乘法和除法操作。用户通过选择不同的选项进行相应的计算，并可以选择退出程序。" 在JavaScript中实现一个简单的计算器功能，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值