JavaScript简易计算器：实现基础运算功能

下载需积分: 10 | DOC格式 | 58KB | 更新于2024-09-24 | 164 浏览量 | 举报

本文档介绍了如何使用JavaScript语言编写一个简单的计算器程序。HTML结构和JavaScript代码被嵌入其中，用于实现计算器的基本功能，如数字输入、小数点添加、清除操作以及基础的加减乘除运算。以下是详细步骤和关键知识点： 1. **HTML结构**: - 使用`<html>`标签定义HTML文档的根元素，同时包含了`<head>`和`<body>`部分。 - `<head>`中包含元数据（`<meta>`标签）来指定字符编码为UTF-8，并设置页面标题为"UntitledDocument"。 - `<body>`部分包含一个文本框`<input type="text" id="cal.total">`，作为计算器的显示区域。 2. **JavaScript函数**: - `setStartState()`函数初始化计算器的状态，将`curState`设为"beStart"（表示开始状态），清空`num1`变量，`curOper`设为"start"（初始运算符），并设置`preOper`为false（用于处理连续输入的数字）。 - `addNum(i)`函数接收一个数值`i`，根据当前状态执行相应操作：如果`preOper`为真，则将新输入的数字追加到总和；否则，如果总和为空或为零，设置总和为当前输入，进入整数阶段；否则，将`i`加到总和上。 - `addPoint()`函数在"beStart"或"beInteger"状态下添加小数点，将`curState`设置为"beFloat"，允许后续输入小数部分。 - `cleartext()`函数用于清空计算器的显示结果，重置所有状态变量。 - `count()`函数是核心逻辑，根据`curOper`的值（存储着当前运算符）执行加法（+）、减法（-）、乘法（*）或除法（/）操作。它首先确保`curOper`不为"start"，然后使用`switch`语句根据运算符进行相应的数学计算。通过这些函数的组合，用户可以逐个输入数字，选择运算符，添加小数点，最终完成计算。整个过程体现了JavaScript如何与用户界面交互，处理实时输入并在网页上显示计算结果。这个简单计算器实例是学习JavaScript编程和前端开发的基础实践项目。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

var curState;

var curOper;

num1;

var preOper;

function setStartState()

{

curState="beStart";

num1=0;

curOper="start";

preOper=false;

}

function addNum(i)

{

if(preOper==true)

{

cal.total.value=i;

preOper=false;

}

else

{

if(cal.total.value=="0")

{

cal.total.value=i;

curState="beInteger";

}

else

cal.total.value+=i;

}

function addPoint()

{

if(curState=="beStart"||curState=="beInteger")

{

cal.total.value+=".";

curState="beFloat";//将当前状态设置为 float

}

下载后可阅读完整内容，剩余6页未读，立即下载

身份认证购VIP最低享 7 折!

30元优惠券

ailifei

粉丝: 0

JavaScript简易计算器：实现基础运算功能

JavaScript编程实现简易计算器教程

JavaScript实现简易计算器教程

JavaScript打造简易计算器教程与代码分析

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

js制作一个简易计算器

web做一个简易计算器

在页面上使用javascript写一个计算器

JavaScript_这个科学计算器是一个免费的工具，通过支持几个内置函数来解决复杂的数学表达式.zip

javaScript简单计算器程序

最新资源