JS实现一个简单的计算器

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。效果如上:

第一步: 创建构建运算函数count()。

第二步: 获取两个输入框中的值和获取选择框的值。

提示:document.getElementById( id名 ).value 获取或设置 id名的值。

第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示:使用switch判断运算法则。

第四步:  通过 = 按钮来调用创建的函数,得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

代码:

 1 <!DOCTYPE html> 2 <html> 3  <head> 4   <title> 事件</title>   5   <script type="text/javascript"> 6    function count(){ 7     var a = document.getElementById("txt1").value; 8     var b = document.getElementById("txt2").value; 9     //获取第一个输入框的值10     //获取第二个输入框的值11     //获取选择框的值12     var c = document.getElementById("select").value;13     a = parseFloat(a);14     b = parseFloat(b);15     //获取通过下拉框来选择的值来改变加减乘除的运算法则16     //设置结果输入框的值 17     switch(c){18         case "+":19         document.getElementById("fruit").value=parseInt(a)+parseInt(b);20         break;21         case "-":22         document.getElementById("fruit").value=parseInt(a)-parseInt(b);23         break;24         case "*":25         ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);26         break;27         case "/":28         document.getElementById("fruit").value=parseInt(a)/parseInt(b);29         break;30     }31    }32   </script> 33  </head> 34  <body>35    <input type=‘text‘ id=‘txt1‘ /> 36    <select id=‘select‘>37         <option value="+">+</option>38         <option value="-">-</option>39         <option value="*">*</option>40         <option value="/">/</option>41    </select>42    <input type=‘text‘ id=‘txt2‘ /> 43    <input type=‘button‘ value=‘ = ‘ onclick = "count()"/>44    <input type=‘text‘ id=‘fruit‘ />   45  </body>46 </html>

时间: 2024-10-24 14:08:44

JS实现一个简单的计算器的相关文章

使用JS完成一个简单的计算器功能

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElement

用js实现一个简单的计算器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Js计算器</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .box{            ma

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

Swift之旅:1.概述-用Swift实现一个简单的计算器

学习所用到的资源: 斯坦福大学公开课:iOS 8开发 网易空开课地址链接:斯坦福大学公开课:IOS8开发 github上字幕链接:字幕 百度网盘资源下载链接:百度网盘 1.详解IOS编程的四个层 ①cocoa touch层 这是我们最长用到的层,里面最长用到的当然是最基础的控件 ②媒体层(Media) ③核心服务层 ④核心操作系统层 2.新建一个Swift的IOS工程 ①打开Xcode,按照图示新建一个工程 ②选择Application 然后 单击Sigle View Application.

初学者如何做一个简单的计算器,代码分享

先新建一个类 startCalculator 声明如下 #import <Foundation/Foundation.h> @interface StartCalculator : NSObject //声明两个要计算的变量 @property float opValue1; @property float opValue2; //声明一个运算符 @property char op; //普通方法 //- (float) gzyWorkAdd; // //- (float) gzyWorkSu

学习用node.js建立一个简单的web服务器

一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解),如http.url等.模块封装特定的功能,提供相应的方法或属性,要使用这些模块,需要先请求模块获得其操作对象. 例如要使用系统的http模块,可以这样写: var libHttp = require('http'); //请求HTTP协议模块 这样,以后的程序将可以通过变量libHttp访问ht

使用qt制作一个简单的计算器

前言:今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下. 这里先跟大家说说使用到的函数: 一.槽连接函数 connect(信号发送者,发送的信号,信号接收者,信号接收者的槽函数) //前面我有一篇文章已经介绍过槽函数的使用了,大家有兴趣可以看看,这里就不详细说了.  二.取出按钮中的字符 QString line = ui->pushButton1->text() //取出按钮pushButton1中的字符存放到line中 三.设置输入框中显示的内容 ui->