您的位置：首页 > 编程语言 > Java开发

java web week two

2017-05-22 00:04 141 查看

开发简易计算器

http://www.lai18.com/content/439235.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css">

<script type="text/javascript">
let result; //保存点击运算符之前输入框中的数值
let operator; //保存运算符
let isPressEqualsKey = false; //记录是否按下”=“键
//数字键事件
function connectionDigital(control) {
var txt = document.getElementById('text');
if (isPressEqualsKey) {
txt.value = ""; //已进行过计算，则清空数值输入框重新开始
isPressEqualsKey = false;
}

if (txt.value.indexOf('.') > -1 && control.value == '.')
return false;
txt.value += control.value; //将控件值赋给数值输入框中
}
//ce键事件：清空数字输入框
function clearAll() {
document.getElementById('text').value = "";
result = "";
operator = "";
}
// +、-、*、/ 事件
function calculation(control) {
operator = control.value;
let txt = document.getElementById('text');
if (txt.value == "")return false; //数值输入框中没有数字，则不能输入运算符
result = txt.value;
txt.value = "";
}
//计算结果
function getResult() {
let opValue;
let sourseValue = parseFloat(result);
let txt = document.getElementById('text');
if (operator == '*')
opValue = sourseValue * parseFloat(txt.value);
else if (operator == '/')
opValue = sourseValue / parseFloat(txt.value);
else if (operator == '+')
opValue = sourseValue + parseFloat(txt.value);
else if (operator == '-')
opValue = sourseValue - parseFloat(txt.value);
txt.value = opValue;
isPressEqualsKey = true;
result = "";
opValue = "";
}
function percent() {
let txt = document.getElementById('text');
if (txt == 0) {
document.getElementById('text').value = 0;
}else {
document.getElementById('text').value /= 100;
}
}
function abs() {
let txt = document.getElementById('text');
if (txt.value.indexOf('.') > -1 && control.value == '.')
return false;
document.getElementById('text').value = -(document.getElementById('text').value)
}
</script>
</head>
<body>
<div id="jisuanqi">
<table>
<caption>
<h3>计算器</h3>
</caption>

<tbody>
<tr>
<td colspan="4">
<input type="text" id="text" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="buttonGray" id="btnAC" value="AC" onclick="clearAll();"/>
</td>
<td>
<input type="button" class="buttonGray" id="btnabs" value="+/-" onclick="abs();"/>

</td>
<td>
<input type="button" class="buttonGray" id="btnPercent" value="%" onclick="percent();"/>
</td>
<td>
<input type="button" class="buttonYellow" id="btnChu" value="/" onclick="calculation(this);"/>
</td>
</tr>

<tr>
<td>
<input type="button" class="button" id="btn7" value="7" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn8" value="8" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn9" value="9" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="buttonYellow" id="btnCheng" value="*" onclick="calculation(this);"/>
</td>
</tr>

<tr>
<td>
<input type="button" class="button" id="btn4" value="4" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn5" value="5" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn6" value="6" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="buttonYellow" id="btnJian" value="-" onclick="calculation(this);"/>
</td>
</tr>

<tr>
<td>
<input type="button" class="button" id="btn1" value="1" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn2" value="2" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btn3" value="3" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="buttonYellow" id="btnPlus" value="+" onclick="calculation(this);"/>
</td>
</tr>

<tr>
<td colspan="2">
<input type="button" class="button" id="btn0" value="0" onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="button" id="btnDian" value="." onclick="connectionDigital(this);"/>
</td>
<td>
<input type="button" class="buttonYellow" id="btnEqual" value="=" onclick="getResult();"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

style.css

*{
margin: 0 auto;
}

#jisuanqi{
width: 100%;
height: 100%;
}

#text{
width: 99%;
height: 100%;
text-align: right;
border: 1px none;
}

.button,.buttonGray,.buttonYellow{
width:100%;
height: 100%;
border: 1px none;
}

.buttonGray{
background-color: rgba(15, 44, 61, 0.61);
}

.buttonYellow{
background-color: rgba(255, 155, 38, 0.91);
}

table,tr,td{
border: 1px solid #BBB;
border-collapse: collapse;
min-width: 60px;
min-height: 60px;
}

table{
height: 360px;
width: 240px;
line-height: 40px;
}

body {
background-color: antiquewhite;
}

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

标签： java web

相关文章推荐

新的分享

章节导航