JavaScript版简易计算器

最新推荐文章于 2022-08-09 08:55:35 发布
最新推荐文章于 2022-08-09 08:55:35 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： JavaScript My Software 文章标签： javascript button class function input html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KimSoft/article/details/616005
版权

在JavaScript版搜索了一下“计算器”，只搜索到三条记录。所以发出来，今天没事写着玩儿的。比较简单，没有什么技术含量和实用价值，只供新手学习，高手看看有没问题，再完善一下。

测试环境：IE6 + FireFox1.5下测试通过

技术说明：
1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法

源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简易计算器-JavaScript版</title>
</head>
<style type="text/css">
<!--
body td {
 font-size: 12px;
}
table {
 border: 2px outset #F5F5F5;
 background-color: #D6D3CE;
}
input {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 width: 24px;
 height: 24px;
 color: #0000FF;
}
.r {
 width: 120px;
 height: auto;
 background-color: #F5F5F5;
 color: #000000;
}
.b {
 width: 80px;
 color: #FF0000;
}
.color_red {
 color: #FF0000;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
  var elements = document.getElementsByTagName("input");
  for(i = 0; i < elements.length; i++){
    if (elements[i].type == "button"){
      switch (elements[i].id){
        case "b": elements[i].onclick = backSpace; break;
        case "c": elements[i].onclick = clear; break;
        case "=": elements[i].onclick = calculate; break;
        default : elements[i].onclick = oper; break;
      }
    }
  }
}

function backSpace() {
  var value = this.form.r.value;
  this.form.r.value = value.substr(0, value.length - 1);
}

function clear(){
  this.form.r.value = "";
}

function calculate(){
  try{
    var result = eval(this.form.r.value);
    if (isNaN(result)){
      this.form.r.value = "无法计算";
    }else if (!isFinite(result)){
      this.form.r.value = "无意义";
    } else {
      this.form.r.value = result;
    }
  } catch (e){
    this.form.r.value = "发生错误";
  }
}

function oper(){
  this.form.r.value += this.value;
}
//-->
</script>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="100" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
      <td colspan="4"><input name="r" type="text" class="r" id="r" size="16" maxlength="16" readonly="readonly"/></td>
    </tr>
    <tr>
      <td colspan="3" align="right"><input name="b" type="button" class="b" id="b" value="BackSpace"/></td>
      <td><input name="c" type="button" class="color_red" id="c" value="C" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input name="(" type="button" class="color_red" id="(" value="(" /></td>
      <td><input name=")" type="button" class="color_red" id=")" value=")" /></td>
    </tr>
    <tr>
      <td><input name="7" type="button" id="7" value="7" /></td>
      <td><input name="8" type="button" id="8" value="8" /></td>
      <td><input name="9" type="button" id="9" value="9" /></td>
      <td><input name="/" type="button" class="color_red" id="/" value="/" /></td>
    </tr>
    <tr>
      <td><input name="4" type="button" id="4" value="4" /></td>
      <td><input name="5" type="button" id="5" value="5" /></td>
      <td><input name="6" type="button" id="6" value="6" /></td>
      <td><input name="*" type="button" class="color_red" id="*" value="*" /></td>
    </tr>
    <tr>
      <td><input name="1" type="button" id="1" value="1" /></td>
      <td><input name="2" type="button" id="2" value="2" /></td>
      <td><input name="3" type="button" id="3" value="3" /></td>
      <td><input name="-" type="button" class="color_red" id="-" value="-" /></td>
    </tr>
    <tr>
      <td><input name="0" type="button" id="0" value="0" /></td>
      <td><input name="." type="button" id="." value="." /></td>
      <td><input name="=" type="button" class="color_red" id="=" value="=" /></td>
      <td><input name="1+" type="button" class="color_red" id="1+" value="+" /></td>
    </tr>
  </table>
</form>
</body>
</html>

KimSoft
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-简易计算器
weixin_46217915的博客
01-22 525
目标：用H5+JS制作一个简易的计算器 效果： 我们所要达到的效果就是在第一个第二个文本框输入数字，按一个按钮在计算结果内输出结果 初学JS，其实我觉得JS和java差不多，写过java感觉还不是很难 代码奉上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script type="
用javascript制作简易计算器,js制作一个简易计算器
最新发布
2301_79533350的博客
10-25 1563
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！通过js实现一个可以完成加减乘除的简易计算器。
JavaScript简单计算器
热门推荐
⁣  ⁡⁣⁣
10-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <!--页面布局--> <input type="text" id="num1" placeholder="请输入第一个数字"/> <input type="text" id.
初学者用JavaScript实现简单的计算器
qq_53577699的博客
08-09 334
运用switch case和if else语句对与各按钮各种事件的分类，还有点击事件的运用。整体逻辑都十分简单，对初学者来比较容易理解，不过功能还是比较有限。
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2542
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
javascript编写简易计算器
10-19
总的来说，创建这个JavaScript简易计算器涉及HTML布局、CSS美化以及JavaScript逻辑实现。通过这个项目，我们可以学习到网页交互的基本原理，以及如何使用JavaScript处理用户输入并执行计算。这是一个很好的实践项目...
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
javascript实现简易计算器功能
10-14
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
用JS+HTML实现简单计算机源码
11-09
使用Js控制 实现简单计算机 主要用于获取表单元素的值
利用JavaScript制作一个简易计算器
qq_39139905的博客
08-30 7966
在学习javascript过程中，利用了标签和标签，制作了一个简单的计算器。 function jia(){ var n1 =document.getElementById("one").value; var n2 =doc...
JavaScript简单版计算器
程宇寒
12-08 621
JavaScript简单版计算器 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- meta标签很有用，有利于搜索引擎SEO的抓取 --&gt; &lt;meta http-equiv="description" content="JavaScr
JavaScript编写简易计算器
柠檬树
02-14 8449
一、前言 在看DRP视频的过程中，再次复习到了HTML、CSS、JavaScript。下面做一个简易计算器来复习一下相关知识。 二、HTML应用 首先呢，就是使用HTML画页面，咱们应该先把计算器的大概模样画出来，至于长相如何，尚且不管。         calculater 0 1 2
用JavaScript实现简单的计算器
sinat_37503265的博客
05-30 7894
基于JavaScript实现计算器中的加减乘除等基本功能
JS实现简易计算器
weixin_40758850的博客
03-31 2471
我是用bootstrap做的一个简易界面： 我觉得这里面最有价值讲的就是 eval() —— 它可以直接对内部的内容进行简单运算哦！ eval（“2+3”）——返回5 那我就直接上代码啦： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
用原生javascript实现简易计算器
DAYDAYUP
06-19 3881
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
JavaScript 实现简单计算器
唐傘皮
03-22 769
JavaScript + HTML的表格 实现简单计算器 首先看效果图 有点小bug,就是点击表格外会把不想出现的东西显现到input里 一，写出HTML的主体布局 <body> <div id="main" οnclick="cal(event);"> <table id="numb"> <tr> ...
javascript实现简易计算器
05-14
简易计算器 <script type="text/javascript"> function calculate() { var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var operator = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值