一,利用JS实现计算器
1核心操作
当点击每个按钮时,需要响应点击时间,并输入相应的值在result元素中显示出来。 要能够计算结果并将结果显示出来,怎么计算结果? 如何避免连续输入运算符?
2响应单击事件显示输入数字
function clickName(number){
var result = document.getElementById("result");
// result.innerHTML += number;
result.innerHTML = result.innerHTML + number
}
<div onclick="clickName(7)">7</div>
<div onclick="clickName(8)">8</div>
3响应点击时间输入运算符
function clickOperator(operatot){
var result = document.getElementById("result");
result.innerHTML += operatot;
}
<div onclick="clickOperator('%')">%</div>
<div onclick="clickOperator('/')">÷</div>
4如何运算result中表达是的结果
//在JavaScript中,有一个函数叫:eval,可以吧函数里面的字符串当成一段代码执行
//计算结果
function doCalc(){
var result = document.getElementById("result");
var expression = result.innerHTML;
result.innerHTML = eval(expression);
}
<div onclick="doCalc()">=</div>
5清空结果
//清空结果
function doClear(){
document.getElementById("result").innerHTML = "";
}
<div onclick="doClear()">AC</div>
6删除
//回退删除最后一个字符
function doBack(){
var result = document.getElementById("result");
var len = result.innerHTML.length; //取字符串长度
result.innerHTML = result.innerHTML.substr(0,len-1);
}
<div onclick="doBack()">删除</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV计算器</title>
<style>
/* 设置顶部标题栏样式 */
#top{
width: 450px;
height: 50px;
margin: auto;
/* border-radius: 5px; */
background-color: grey;
border-top-left-radius: 10px; /*左上角圆弧*/
border-top-right-radius: 10px; /*右上角圆弧*/
}
#top .point{
width: 20px;
height: 20px;
float: left;
margin-left: 10px;
margin-top: 15px;
border-radius: 10px;
}
#top .red{
background-color: red;
}
#top .blue{
background-color: blue;
}
#top .green{
background-color: green;
}
#calc-title{
float: right;
margin: 10px 10px 0 0;
font-size: 22px;
color: white;
}
/* 设置结果栏样式 */
#result{
width: 436px;
height: 50px;
margin: auto;
background-color: rgb(239, 232, 232);
border: solid 2px grey;
text-align: right;
font-size: 35px;
padding-right: 10px;
}
/* 按钮区域的样式 */
#button{
width: 450px;
height: 400px;
background-color: gray;
margin: auto;
}
#button div{
width: 108px;
height: 73px;
float: left;
margin-top: 2px;
background-color: aqua;
border: solid 2px gray;
line-height: 80px;
text-align: center; /*文字内容水平居中*/
font-size: 22px;
}
/* 鼠标悬停效果 */
#button div:hover{
background-color: coral;
}
</style>
<!-- 表示下面是JS代码 -->
<script type="text/javascript">
//给函数传递一个参数,用于输入哪一个数字
function clickName(number){
var result = document.getElementById("result");
// result.innerHTML += number;
result.innerHTML = result.innerHTML + number
}
function clickOperator(operatot){
var result = document.getElementById("result");
result.innerHTML += operatot;
}
//JavaScript中的Eval函数,用于将字符串变成字符串执行
//计算结果
function doCalc(){
var result = document.getElementById("result");
var expression = result.innerHTML;
result.innerHTML = eval(expression);
}
//清空结果
function doClear(){
document.getElementById("result").innerHTML = "";
}
//回退删除最后一个字符
function doBack(){
var result = document.getElementById("result");
var len = result.innerHTML.length; //取字符串长度
result.innerHTML = result.innerHTML.substr(0,len-1);
}
</script>
</head>
<!-- onload元素时间,页面加载完成之后自动执行 -->
<body >
<!-- 头部 -->
<div id="top">
<div class="point red"></div>
<div class="point blue"></div>
<div class="point green"></div>
<div id="calc-title">计算器</div>
</div>
<!-- 结果 -->
<div id="result" name="result">
</div>
<!-- 按钮 -->
<div id="button">
<div onclick="doClear()">AC</div>
<div onclick="clickOperator()">+/-</div>
<div onclick="clickOperator('%')">%</div>
<div onclick="clickOperator('/')">÷</div>
<div onclick="clickName(7)">7</div>
<div onclick="clickName(8)">8</div>
<div onclick="clickName(9)">9</div>
<div onclick="clickOperator('*')">*</div>
<div onclick="clickName(4)">4</div>
<div onclick="clickName(5)">5</div>
<div onclick="clickName(6)">6</div>
<div onclick="clickOperator('-')">-</div>
<div onclick="clickName(1)">1</div>
<div onclick="clickName(2)">2</div>
<div onclick="clickName(3)">3</div>
<div onclick="clickOperator('+')">+</div>
<div onclick="clickName(0)">0</div>
<!-- ondblclick:当元素被双击时执行代码 -->
<div onclick="doBack()">删除</div>
<div onclick="clickOperator('.')">.</div>
<div onclick="doCalc()">=</div>
</div>
</body>
</html>