`
qiannianhua
  • 浏览: 18922 次
社区版块
存档分类
最新评论

JavaScript----完成一个简单的计算器功能

 
阅读更多

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

二、获取元素的值设置和获取方法为:

     例:赋值:document.getElementById(“id”).value = 1;

            取值:var = document.getElementById(“id”).value;

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

function count(){

}

 

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

        //获取第一个输入框的值
    var first = document.getElementById('txt1').value;
	//获取第二个输入框的值
    var second = document.getElementById('txt2').value;
	//获取选择框的值
    var select = document.getElementById('select').value;

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

 

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

1)、如果选择框的值为“+”,则输出:

var result;
    if(select == '+')
    {
        result = parsefloat(first) + parsefloat(second);   
    }

 

2)、如果选择框的值为“+”,则输出:

else if(select == '-')
    {
        result = parsefloat(first) - parsefloat(second);
    }

 

3)、如果选择框的值为“+”,则输出:

else if(select == '*')
    {
        result = parsefloat(first) * parsefloat(second);
    }

 

4)、否则,输出:

else
    {
        result = parsefloat(first) / parsefloat(second);
    }

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


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

 <!--通过 = 按钮来调用创建的函数,得到结果--> 
<input type='button' value=' = ' onclick="count()"/>

 

四、总结:第三步中,其实可以用Swith代替if,使代码更精简:

switch(select){

case '+': result=first+second;break;

case '-': result=first-second;break;

case '*': result=first*second;break;

case '/': result=first/second;break;

}

 

 

分享到:
评论

相关推荐

    JavaScript-简单计算器

    在这个“JavaScript-简单计算器”项目中,我们将会探讨如何利用JavaScript、HTML和CSS创建一个基本的计算工具。 首先,HTML(HyperText Markup Language)是网页内容的结构标准,它定义了页面的布局和元素。在这个...

    JavaScript-计算器

    在这个项目中,我们讨论的是一个使用JavaScript实现的按钮式计算器。这个计算器具有基础的数学运算功能,同时还提供了额外的特性,如连续运算、数据清除、平方根计算、百分比计算以及记忆加减功能。下面我们将详细...

    JavaScript实现一个简易的计算器实例代码

    本项目旨在通过JavaScript技术实现一个简易的计算器功能,使用户能够进行基础的数学运算(加、减、乘、除)。该项目不仅锻炼了开发者对于HTML、CSS及JavaScript基础知识的应用能力,还涉及到了事件处理、异常捕获等...

    JavaScript,HTML制作简易图形化界面计算器

    JavaScript是实现计算器功能的核心,它负责处理用户与界面的交互,执行计算逻辑。以下是一些关键的JavaScript概念和操作: - **事件监听器**:为HTML元素添加事件监听器(如`click`),当用户点击按钮时触发相应的...

    javascript经典特效---特酷高级计算器.rar

    在这个“特酷高级计算器.rar”压缩包中,我们有一个名为“特酷高级计算器.htm”的文件,这表明它包含了一个使用JavaScript实现的高级计算器的HTML页面。 这个计算器可能采用了JavaScript的核心特性,如变量、数据...

    网页计算器 Javascript简易版

    网页计算器 Javascript简易版用网页来实现,选择运算符号的

    基于javascript脚本开发的网页计算器

    本项目"基于JavaScript脚本开发的网页计算器"旨在实现一个基本的网页计算器,提供与标准桌面计算器类似的功能,如加、减、乘、除等基本运算。 在JavaScript中,我们可以利用DOM(Document Object Model)来操作HTML...

    JavaScript计算器

    在这个项目中,我们将深入探讨如何使用JavaScript来创建一个基本的计算器,实现加法、减法、乘法和除法功能。 首先,我们需要在HTML中创建一个用户界面,包含数字按钮、运算符按钮以及显示计算结果的文本框。HTML...

    实现简易计算器 html javascript

    在本文中,我们将深入探讨如何使用HTML和JavaScript实现一个简易计算器。这个计算器具备回退、基本的算术运算、符号转换、求倒数以及求幂等实用功能。 首先,我们从HTML部分开始。HTML(超文本标记语言)是构建网页...

    jquery做的一个web计算器

    本项目是一个基于jQuery的Web计算器,旨在展示如何利用这个库来创建具有基本计算功能的应用。 【描述】详细解析: 1. **jQuery基础**:jQuery的核心是它的选择器机制,它允许开发者通过CSS选择器快速定位到DOM元素...

    javascript白色简洁计算器

    在这个“javascript白色简洁计算器”的项目中,我们将会探讨如何使用JavaScript来实现一个功能齐全、界面简洁的计算器。 首先,让我们了解计算器的基本结构。一个计算器通常包括数字键、运算符键以及清除键等,这些...

    javascript 计算器 源代码

    首先,一个JavaScript计算器的核心功能包括数字输入、运算符选择、结果显示以及清除等操作。这些功能通过监听用户在HTML元素(如按钮)上的点击事件来实现。HTML文件`js计算器~.html`中,会包含一个布局结构,用于...

    JavaScript实现简单计算器

    完成所有编写后,通过浏览器加载页面,你应该能看到一个能正常工作的简单计算器。 以上就是使用JavaScript实现简单计算器的主要步骤和知识点。通过这个项目,你不仅能熟悉JavaScript的基本语法,还能深入理解DOM...

    javascript网页版计算器

    通过分析"calculator1.htm"这个文件,我们可以深入理解JavaScript在网页应用中的实际运用,了解事件驱动编程模型,以及如何通过JavaScript与HTML、CSS进行交互,构建一个功能完备的网页版计算器。同时,这也是学习...

    基于JavaScript的网页版计算器

    本教程将深入讲解如何利用JavaScript构建一个简单的网页版计算器,这对于初学者来说是一个很好的实践项目。 首先,我们需要理解网页计算器的基本结构。一个计算器通常包括数字键、运算符键以及结果显示区域。在HTML...

    javascript计算器

    需要用 JavaScript 编写一个简单的计算器。•实现一个类似Windows附件中的标准型计算器的基本功能; •实现加,减,乘,除,取余,开平方,求倒数这七种基本运算(可以自行决定支持更多的运算类型); •支持正负号...

    【JavaScript源代码】vue实现简易计算器功能.docx

    在本示例中,我们将探讨如何使用Vue.js框架来实现一个简单的计算器功能。Vue.js是一个流行的前端JavaScript框架,用于构建用户界面。以下是实现这个计算器的关键步骤和知识点: 1. **HTML布局**: HTML部分是...

    DW实现计算器功能

    在本主题中,我们将探讨如何使用Dreamweaver(DW)这个前端开发工具,结合JavaScript语言,来实现一个基本的计算器功能。Dreamweaver是Adobe公司出品的一款强大的Web设计和开发工具,它支持代码编辑、可视化设计以及...

    多功能计算器JS版

    总的来说,"多功能计算器JS版"是一个利用JavaScript的计算和DOM操作能力,为用户提供直观、便捷计算服务的Web应用程序。开发者可以轻松将其集成到自己的项目中,以提供即时的计算支持,而无需依赖第三方插件或服务。...

    房贷计算器-表单提交案列

    在这个“房贷计算器-表单提交案例”中,我们主要关注如何设计和实现一个具有验证功能的房贷计算器表单。这个案例涵盖了表单验证的多种策略,包括非空检查、数字验证以及正则表达式验证。 首先,让我们从表单设计的...

Global site tag (gtag.js) - Google Analytics