您的位置：首页 > Web前端 > JavaScript

JavaScript实现计算器功能

2016-11-07 21:23 375 查看

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<script language="javascript">
var flag = false;
function display(val){
var display = document.getElementById("display");
if(flag){
display.value = "";
flag = false;
}
display.value += val;
}
function result(){

var display = document.getElementById("display");

var res = eval(display.value);

display.value = res;
flag = true;
}
</script>
<style type="text/css">
input {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table border="1" align="center" frame="box" rules="all">
<tr>
<td colspan="4">
<input type="text" id="display" disabled />
</td>
</tr>

<tr>
<td><input type="button" value="7" onclick="display(this.value)" /></td>
<td><input type="button" value="8" onclick="display(this.value)" /></td>
<td><input type="button" value="9" onclick="display(this.value)" /></td>
<td><input type="button" value="+" onclick="display(this.value)" /></td>
</tr>

<tr>
<td><input type="button" value="4" onclick="display(this.value)" /></td>
<td><input type="button" value="5" onclick="display(this.value)" /></td>
<td><input type="button" value="6" onclick="display(this.value)" /></td>
<td><input type="button" value="-" onclick="display(this.value)" /></td>
</tr>

<tr>
<td><input type="button" value="1" onclick="display(this.value)" /></td>
<td><input type="button" value="2" onclick="display(this.value)" /></td>
<td><input type="button" value="3" onclick="display(this.value)" /></td>
<td><input type="button" value="*" onclick="display(this.value)" /></td>
</tr>

<tr>
<td><input type="button" value="0" onclick="display(this.value)" /></td>
<td><input type="button" value="." onclick="display(this.value)" /></td>
<td><input type="button" value="=" onclick="result()" /></td>
<td><input type="button" value="/" onclick="display(this.value)" /></td>
</tr>

</table>
</body>
</html>

代码中，使用input作为按钮的选择，然后添加点击事件，当点击时调用display(this.value)方法，其中this.value方法将这个按钮的值传给了方法，方法接到后使用display方法进行显示，使用result方法进行计算结果，然后将结果显示到display文本框（这个文本框是disabled属性的）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航