问题遇到的现象和发生背景
用javascript写一个计算器,现在想让输入的第一个值不能为乘号,除号,取余号,但是可以为加号和减号。
问题相关代码,请勿粘贴截图
在这个函数中
<!-- 下面是CSS样式 -->
<style>
.top{
width: 465px;
height: 60px;
margin: auto;
background-color: gray;
margin-top: 100px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.point-red{
width: 20px;
height: 20px;
background-color: red;
float: left; /*浮动,可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-blue{
width: 20px;
height: 20px;
background-color: blue;
float: left; /*浮动,可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-green{
width: 20px;
height: 20px;
background-color: green;
float: left; /*浮动,可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
#counter{
font-size: 25px;
color: white;
float: right;
line-height: 60px;
margin-right: 35px;
}
/* 设置显示结果和计算过程的部分 */
#result{
width: 451px;
height: 55px;
border: 2px solid brown;
margin: auto;
text-align: right;
font-size: 30px;
padding-right: 10px;
padding-top: 5px;
}
/* 设置按钮区域的样式 */
.button{
width: 465px;
height: 413px;
background-color:gray;
margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.button div{
width: 110px;
height: 80px;
float: left;
background-color:aquamarine;
border: 1px gray solid;
margin-left: 3.3px;
text-align: center;
font-size: 25px;
line-height: 80px;
font-weight: bold;
}
/* 使用伪类,可以产生一个鼠标悬停的效果 */
.button div:hover{
background-color: bisque;
/* 鼠标放在上面有放大的效果 */
font-size: 28px;
}
</style>
<!-- 下面是JavaScript代码 -->
<script type="text/javascript">
//解释:在你点击了7那个按钮,就会调用这个函数,定义一个result变量,将整个文件中的class名字为
//result的值赋给result这个变量,然后再把7赋给result。
//innerHTML获取HTML当前标签的起始和结束里面的内容
//给函数传递参数(number),用于输入哪一个数字
function clicknumber(number){
var result = document.getElementById("result");
//前面那个数加上后面你输入的数(不是相加成和,而是相加为一前一后,就是输入7和8,变成78
//innerHTML提取出来的是字符串,所以会变成输入的数字变成连接而不是相加
result.innerHTML += number; //这里的result是前面那个变量名,给变量名赋值为7
}
// 输入运算符
function clickoperator(operator){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length; //用len变量获取string长度
var last = string[len-1]; //last变量是字符串的最后一个字符
if(last == "+" || last =="-" || last == "*" || last == "/" || last == "%"){
//下面的代码是从string的数组下标为0开始往后获取len-1个长度,然后最后一位用新输入的那个运算符代替
var temp = string.substr(0,len-1) + operator; //substr(x,y),x是数组开始的下标,y是往后获取y个
result.innerHTML = temp;
}
else{
result.innerHTML += operator; //如果不是字符那就正常执行
}
}
// 计算结果
//思路,先找到ID名为result的元素赋给result这个变量,然后用innerhtml将元素获取给到中间变量expression
//最后将结果赋给变量result,我认为最后的innerHTML是替换的作用。
function docalc(){
var result = document.getElementById("result");
var expression = result.innerHTML;
result.innerHTML = eval(expression);
}
// 清空
function doclear(){
var result = document.getElementById("result");
result.innerHTML = " "; //给这个结果赋空值
//或者可以这么写
//document.getElementById("result").innerHTML = " ";
//最简单的理解,就是将原来里面的东西替换成了空。因为innerhtml有获取的作用也有替换的作用
//可能有疑问为什么有时候innerhtml放在document那一句的后面,有时候是放在下一行的
//innerhtml放在哪一行就是获取这一行的标签的里面的元素的
}
// 删除,退格,回退删除最后一个字符
// 要利用数组,在计算器中12345分别的是第01234位
function doback(){
var result = document.getElementById("result");
var len = result.innerHTML.length;//取长度,这个字符串有多少位的长度
// substr(x,y)里面有两个参数,x是从数组的第几位开始,y是往后取多少位。(0,5)意思就是从第一个开始取,一直取五个数字
result.innerHTML = result.innerHTML.substr(0,len-1);
}
//获取字符串最后一个字符,如果是一个运算符,你还想输入一个运算法,那就把这个运算符替换了
function getlastchar(){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
if(last == "+" || last =="-" || last == "*" || last == "/" || last == "%"){
}
}
// 这个函数是模仿了运算符来写的
function clickpoint(point){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
if(last == "."){
last = string.substr(0,len-1) + point;
result.innerHTML = last;
}
else{
result.innerHTML += point;
}
}
</script>
<!-- onload元素事件:页面加载完成后则自动执行 -->
<body onload="countertitle()">
<div class="top"> <!-- 这是最上面那个灰色的 -->
<div class="point-red"></div>
<div class="point-blue"></div>
<div class="point-green"></div>
<div id="counter">计算器</div>
</div>
<!-- 显示计算结果和计算过程 -->
<div id="result"></div>
<!-- <div name="result">123456</div> 这个没有直接的用处,是为了验证一个命令来写的 -->
<!-- 设置按钮区域 -->
<div class="button">
<!-- 当元素被单击时,调用countertitle()这个函数,不一定是弹窗啊,只是这个函数正好是弹窗 -->
<div onclick="doclear()">AC</div><!--清空-->
<!--%是一个字符串,所以不能直接写入括号,要用引号包起来,但是外面有双引号了,所以要用单引号-->
<div >+/-</div>
<div onclick="clickoperator('%')">%</div>
<div onclick="clickoperator('/')">÷</div>
<div onclick="clicknumber(1)">1</div>
<div onclick="clicknumber(2)">2</div>
<div onclick="clicknumber(3)">3</div>
<div onclick="clickoperator('*')">*</div>
<div onclick="clicknumber(4)">4</div>
<div onclick="clicknumber(5)">5</div>
<div onclick="clicknumber(6)">6</div>
<div onclick="clickoperator('-')">-</div>
<div onclick="clicknumber(7)">7</div>
<div onclick="clicknumber(8)">8</div>
<div onclick="clicknumber(9)">9</div>
<div onclick="clickoperator('+')">+</div>
<div onclick="clicknumber(0)">0</div>
<!-- 双击时,调用countertitle()这个函数 -->
<div onclick="doback()">删除</div>
<div onclick="clickpoint('.')">.</div>
<div onclick="docalc()">=</div>
</div>
</body>
</html>
运行结果及报错内容
没有报错,但是想尽量完善这个计算器
我的解答思路和尝试过的方法
刚开始想在输入数值的函数中进行一个过滤,只要第一个输入不为数值那就不能输出,但是如果这样那加和减也会被过滤掉,于是我选择在运算符的函数中过滤,只要第一个输入为乘除取余就取空值,但是不知道怎么取到第一个值。因为我的代码是将显示的结果里的值全部提出。
我想要达到的结果
让输入的第一个值不能为乘号,除号,取余号,但是可以为加号和减号。