简易的ＪＳ计算器

最新推荐文章于 2022-08-03 14:19:42 发布
最新推荐文章于 2022-08-03 14:19:42 发布
阅读量534 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： button input function xhtml javascript border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zwt90/article/details/7277363
 

新的一年，新的开始！

新的学期，开始了我们新一轮的学习！

首先，老师带领我们复习了JS的知识，在老师的指导下，写出了下面的简易的JS计算器：

<!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>10级PHP 简易计算器</title>
<script language="javascript" type="text/javascript">
//是否清除上次计算的结果
var clearFlag=false;
//获取用户输入的内容
function getNum(num){
 //首先获取文本框的对象
 var objresult=document.getElementById("result");
 //判断是否要清除上次计算的结果
 if(clearFlag){
   //清空上一次计算的结果
   objresult.value="";
   clearFlag=false;
 }
 //拼接等待计算的表达式
 objresult.value+=num;
}

function getResult(){
 var objresult2=document.getElementById("result");
 objresult2.value=objresult2.value+"="+eval(objresult2.value);
 clearFlag=true;
}
</script>
</head>

<body>
<table width="290" border="1">
  <caption>简易计算器</caption>
  <tr>
    <td colspan="4"><input type="text" name="result" id="result" size="40" /></td>
  </tr>
  <tr>
    <td width="67"><input type="button" value="    1    " onclick="getNum(1)" /></td>
    <td width="67"><input type="button" value="    2    " onclick="getNum(2)" /></td>
    <td width="63"><input type="button" value="    3    " onclick="getNum(3)" /></td>
    <td width="65"><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>

寥寥几句代码，一个简易的计算器就出来了，ＪＳ就是这么强！

zwt90
关注
JS计算机
weixin_57956725的博客
04-03 260
二、使用计算机属性computed。四、使用methods方法。三、使用watch侦听器。
javascript 计算机
黄长旭的专栏
03-05 973
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     Javascript实现计算器 input{ width:30px; height:20px; text-align:center; } #tbCalculator td { text-
js实现计算机
FAFA_ll的博客
01-03 327
用js代码实现计算机
js 计算器
两个人的幸福online
01-22 542
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;计算器&
js 简易计算机
qq_44644708的博客
03-15 983
js 简易计算机
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> ...
简易JavaScript计算器代码分享
#### 标题：“javascript计算器代码” ##### 知识点1：JavaScript概述 JavaScript是一种高级的、解释执行的编程语言，广泛用于网页开发中，能够实现网页的动态效果和数据交互。它具有面向对象的特点，并且是一种...
简易JS计算器：HTML+JavaScript实现教程
根据提供的文件信息，我们可以生成一系列关于JavaScript和HTML结合制作简易计算器的知识点。以下是详细说明： ### 标题知识点 1. **JavaScript (JS)**：是一种高级的、解释型的编程语言，用于增强网页交互性。标题...
打造简易JavaScript计算器：完整源代码解析
下面是一个简单的JavaScript计算器实现示例： ```html <!DOCTYPE html> 简单计算器 // 初始化一些变量 var firstNumber = ""; var secondNumber = ""; var operator = ""; var result = ""; function ...
简易JavaScript计算器代码教程
资源摘要信息:"本资源为一个简易的JavaScript加减乘除计算器的压缩包，包含了完成基本计算功能的代码。通过这个项目，开发者可以了解到JavaScript的基础语法和基本应用，例如如何使用JavaScript实现用户界面与逻辑...
Js做出计算机
XJ_TK的博客
08-08 133
Js做出计算机 1. 三个值 三个文本框. 一个 Button 2. 使用 Switch 语句。 3. 计算出的值赋值给第三个文本框. 4. 加++ 5. 减- - 6. 乘××（**） 7. 除//
JS-计算机篇
weixin_44908855的博客
11-18 672
1. 计算机组成 2. 数据的存储 计算机内部使用二级制 0 和 1 来表示数据 所有的数据，包括文件、图片等最终都是以二进制数据（0和1）的形式存放在硬盘中 所有的程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件 ，其实就是把程序文件复制到硬盘中 硬盘、内存都是保存的二进制数据 3. 数据存储单位 bit < byte < kb < GB < TB ... 位（bit）：1bit可以保存一个0或者1（最小的存储单位） 字节（B
简单计算机的js
积极废人的博客
08-02 1009
计算机样式 js
JS ------ 网页计算机
qq_42412646的博客
10-26 493
<html> <head> <title>网页计算机</title> <meta charset="UTF-8"/> <style type="text/css"> #jsjdiv{ border: solid 1px black; border-radius: 5px; w...
js实现简单计算机
qq_69555866的博客
06-13 1370
js实现简单计算机
JavaScript 实例：计算器
houyanhua1的专栏
11-07 693
计算器 function calcu(){ var num1=document.getElementById("text1").value; var num2=document.getElementById("text2").value; var num3=document.getElementById("text3"); if(num
js实现简单计算机,原生js实现计算机
weixin_33437929的博客
07-30 1545
好久没有更新了。通过原生js实现计算机这是html文档calculator这是样式文档body{margin: 0;padding: 0;}#a{width: 200px;background-color: #000;margin: 20px auto;text-align: center;border: #000 1px solid;color: #fff;}#b #answer,#answer...
JS 制作简易计算机
qq_46032261的博客
11-01 1982
给大家分享一个简单的计算机 <div class="a1" id="a"> <input type="text" id="res"/> <div id="c"> <button type="button" onclick="calc(0)">0</button> <button type="button" onclick="calc(1)">1</button> <button
JS基础实现-简单计算机（可实现连续运算）
weixin_54118834的博客
08-03 257
js实现简单的网页计算器，可以连续运算
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值