计算器

4.在浏览器中测试

三.基本功能实现

1.新建app.js

以下的实现计算器功能的javascript都放在里面。

2.引用app.js

在中加入下面代码：

3.定义字符

在使用计算器时，数字键和运算符号先定义，可以方便后面的调用。

代码如下：

varone='1';

vartwo='2';

varthree='3';

varfour='4';

varfive='5';

varsix='6';

varseven='7';

vareight='8';

varnine='9';

varzero='0';

varplus='+';

varminus='-';

varmultiply='*';

vardivide='/';

vardecimal='.';

4.输入功能的实现

要让计算器运算之前，先输入运算的式子。

现在我们要定义每个按钮点击时，把数值或者符号显示在text栏中。

innerHTML属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。

代码：

functionenter（num）

{

vartext=document.getElementById（"textarea"）;//获取id

vars=text.value;//获取文本框里的值

//把一个一个输入的值，连接成字符串。

if（s==null）{//为空值的时候

n=num;

}else{

n=s+num;

}

text.innerHTML=n;//把输入的值显示在文本框中。

}

5.“等于”功能的实现

eval（）函数可计算某个字符串，并执行其中的的JavaScript代码。

获得输入的字符串后，调用eval（）函数即可得到运算的结果。

functionequal（）

{

vartext=document.getElementById（"textarea"）;

vars=eval（text.value）;//计算输入算式的值

text.innerHTML=s;

}

6.清空功能的实现

清空只需把文本框的值设置为空即可实现。

functionclean（）

{

vartext=document.getElementById（"textarea"）;

text.innerHTML="";//将文本框设置为空

}

7.退格功能的实现

substr（）方法可在字符串中抽取从start下标开始的指定数目的字符。

我们要实现退格功能，也就是我们需要第一到倒数第二个的字符串。

functiondel（）

{

vartext=document.getElementById（"textarea"）;

varn=text.value.substr（0,text.value.length-1）;

//substr（）方法可在字符串中抽取从start下标开始的指定数目的字符。

text.innerHTML=n;

}

8.Javascript在html中引用

当点击button时通过onCLick调用javascript中的方法。

修改后html代码：

计算器

C

←

7

8

9

/

4

5

6

*

1

2

3

-

.

0

=

+

计算器

9.在浏览器中调试

四.拓展功能

1.按键声音

HTML5规定了一种通过audio元素来包含音频的标准方法。

audio元素能够播放声音文件或者音频流。

把声音文件复制到工程目录下，在html中加载声音资源：

在javascript中引用audio后用play（）方法即可播放按键音。

document.getElementById（"chatAudio"）.play（）;

del（），clean（），enter（），equal（）方法里都加入上面的代码，就可以实现所有按键的按键音。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

html5 计算器

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。