简单的网页计算器

实现功能：

1.基础加减乘除

2.清空数据

3.计算机结果显示
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

知识点：

1.网页的表格布局

2.input标签

3.javascript关键字 this

4.javascript 函数eval（)

5.onclick事件
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

网页表格布局

这是一种比较传统的网页布局方式。与现在的div+css布局相比结果更加固化，不够灵活，代码较多。但是并不是不在需要这种类型的布局方式，在页面中，出现表格，或者排布较为规整的小控件时，我们还是需要使用表格布局。
  • 1.

结构：

这货是标题

这货是表格 input标签

当type属性为"text"时显示输入框。

当type属性为"button"时显示为按钮。

javascript关键字 this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。

如果单独使用，this 表示全局对象。

在函数中，this 表示全局对象。

在函数中，在严格模式下，this 是未定义的(undefined)。

在事件中，this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

javascript函数eval（)

和其他语言相同，eval（)可以执行字符串中的代码。

var x="1+2="
eval（x)
>>>3
  • 1.
  • 2.
  • 3.

onclick事件

点击事件，点击后触发相应的函数。

<input type="button" value="0" onclick="alert(1)" />
  • 1.

上源码：

<table border="1">
    <tr>
        <td colspan="4">
            <input type="text" name="expr" action="compute(this.form)"/>
        </td>
    </tr>
    <tr>
        <td><input type="button" value="7" onclick="enter(this.form,'7')"/></td>
        <td><input type="button" value="8" onclick="enter(this.form,'8')" /></td>
        <td><input type="button" value="9" onclick="enter(this.form,'9')" /></td>
        <td><input type="button" value="/" onclick="enter(this.form,'/')" /></td>
    </tr>
    <tr>
        <td><input type="button" value="4" onclick="enter(this.form,'4')" /></td>
        <td><input type="button" value="5" onclick="enter(this.form,'5')" /></td>
        <td><input type="button" value="6" onclick="enter(this.form,'6')" /></td>
        <td><input type="button" value="*" onclick="enter(this.form,'*')" /></td>
    </tr>
    <tr>
        <td><input type="button" value="1" onclick="enter(this.form,'1')" /></td>
        <td><input type="button" value="2" onclick="enter(this.form,'2')" /></td>
        <td><input type="button" value="3" onclick="enter(this.form,'3')" /></td>
        <td><input type="button" value="-" onclick="enter(this.form,'-')" /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="0" onclick="enter(this.form,'0')" /></td>
        <td><input type="button" value="." onclick="enter(this.form,'.')" /></td>
        <td><input type="button" value="+" onclick="enter(this.form,'+')" /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="=" onclick="compute(this.form)"/></td>
        <td colspan="2"><input type="button" value="AC" onclick="A_clear(this.form)" /></td>
    </tr>
</table>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

效果图：

javascript学习:计算器_表格布局


javascript学习:计算器_学习_02