JavaScript实现网页版简易计算器功能
本文实例为大家分享了vue + element ui实现锚点定位的具体代码，供大家参考，具体内容如下
运行效果
运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后用任意浏览器打开即可。
实现思路以及代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页版的简易计算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
/*设置input的宽度和高度*/
input{
width: 396px;
height: 50px;
font-size: 30px;
}
/*表格的行文本左右居中*/
tr{
/*text-align*/
text-align: center;
}
/*设置单元格的内容宽度和高度以及字体大小*/
td{
width: 100px;
height: 119px;
font-size:30px;
}
/*伪类选择器:hover*/
td:hover{
/*指定背景色*/
background-color: greenyellow;
/*cursor:pointer
* 鼠标经过的时候,变成小手
*/
cursor:pointer ;
}
</style>
</head>
<body>
<!--
cellspacing:单元边沿和单元格之间的空间
cellpadding:单元格和单元格之间的空间
-->
<!--在input上面写一个div: 指定这个当前系统时间-->
<!--禁用文本框的输入功能:disabled:disabled-->
<center><input type="text" value="0" id="show" disabled="disabled" /></center>
<table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px"
height="600px">
<tr>
<td id="clear">C</td>
<td id="del">退格</td>
<td>%</td>
<td class="operator">/</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="operator">*</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="operator">-</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="operator">+</td>
</tr>
<tr>
<td colspan="2" class="num">0</td>
<td class="num">.</td>
<td id="result">=</td>
</tr>
</table>
</body>
<script>
/**
* -
1.页面布局
要么使用div+css,要么table布局
table布局:5行4列的表格
div+css布局:大的div 嵌套两个字div(输入框的和键盘)
2.逻辑处理
2.1 将数字键和小数点看成一类:clas="num"
2.2 将运算符看成一类:class="operator"
2.3 将清除键,退格键,=(等号),显示框,单独设置id属性
2.4 获取显示框,清除键,=号,推格键所在的标签对象
2.5 获取数字键所在的对象并设置点击事件
2.6 获取运算符所在的对象并设置点击事件
*/
//获取显示框所在的标签对象
var showResult = document.getElementById("show") ;
//获取清除键所在的标签对象
var clear = document.getElementById("clear") ;
//获取退格键所在的标签对象
var del = document.getElementById("del") ;
//获取等号所在的对象
var result = document.getElementById("result") ;
//定义三个变量,分别保存第一个数,第二个数以及运算符
//第一个数
var numValue1 = "" ;
//第二个数
var numValue2 = "" ;
//操作符
var oper ="" ;
//获取数字键,包含小数点,并设置点击事件
var nums = document.getElementsByClassName("num") ;
//遍历数字,分别设置点击事件
for(var i = 0 ; i< nums.length ; i++){
//设置点击事件:使用匿名函数
nums[i].onclick = function(){
//小数点的问题：只能出现一个：
/**
* 如果这个this.innerTest==.
* //小数点只能出现一个
* 否则：
* 不是小数点，就属于整数运算
* numValue1 += this.innerText;
showResult.value = numValue1*1 ; //去掉首尾无效0
*/
//测试
// alert("获取到了每一个数字对象") ;
//将点击的数字显示到文本框上
//将nums[i]--->看成一个this:代表当前数字键对象的内存地址值
//var text = this.innerText ; //普通文本
//测试
// alert(tesxt) ;
//改变显示框对象的value属性
//showResult.value = text;
//问题1:目前:用户输入第一个数只能是一位数的
//将数字内容赋值给第一个数,然后将第一个数展示到文本框上
// numValue1 = this.innerText ;
numValue1 += this.innerText;
// showResult.value = numValue1*1 ; //去掉首尾无效0
showResult.value = numValue1 ; //去掉首尾无效0
//问题2:小数点的问题(小数点只能出现一个)
}
}
//获取运算符所在的对象并设置点击事件
var operators = document.getElementsByClassName("operator") ;
//遍历操作符,设置点击事件
for(var i = 0 ; i < operators.length ; i++){
//设置点击
operators[i].onclick = function(){
/**
* 判断numValue2的值是否为空：
* 如果是numValue2==""
* 如果numValue2不是空字符串
* 用户可能点击等号或者运算符
*/
if(numValue2==""){
numValue2 = numValue1 ;
numValue1 = "" ;
//保存操作符
oper = this.innerText ;
}else{
//用户要么点击=号要么进行四则运算
//问题：应该将计算的结果赋值numValue2,清空numvalue1
if(numValue1!=""){
resultFn() ;
}
//保留操作符
oper = this.innerText ;
}
//测试
//alert("运算符获取到了") ;
//做运算 :思考如何做运算,最终处理
//将第二个数赋值第一个数,然后将第一个数清空,等待接收用户下一次输入的数据
/* numValue2 = numValue1 ;
numValue1 = "" ;
//保存操作符
oper = this.innerText ;*/
}
}
//关于其他的操作:清除键
//设置清除键的点击事件
clear.onclick = function(){
//将第一个数,第二个数以及运算符都情况掉
//显示框显示默认值0
numValue1 = "" ;
numValue2 = "" ;
oper = "" ;
showResult.value = "0" ;
}
//删除键的逻辑,设置点击事件
del.onclick = function(){
// alert("abc") ;
//可以用到String :substring()截取功能
if(numValue1.length!=1){
//进行截取:从0索引开始截取到当前numValue1.length-1处的位置结束,将其值
//赋值给numValue1
//场景:删除剩余一个数字即可
numValue1 = numValue1.substring(0,numValue1.length-1) ;
//alert(numValue1) ;
//将numValue1显示文本框上
// showResult.value = numValue1 *1 ; //去掉首位无效0
showResult.value = numValue1 ; //
}
// else{
// //自己处理
//将第一个数,第二个数,运算符清空掉
// }
}
//给等号添加点击事件,做四则运算
result.onclick = function(){
//抽取出一个方法
resultFn() ;
}
//具体做四则运算的方法
function resultFn(){
//定义运算的两个数据: one ,two
//数据类型转换
var one = new Number(numValue2) ;//实际是第二个数
var two = new Number(numValue1) ;//实际第一个数
//保存计算结果
var r = null ;
//根据运算符进行判断，switch语句
switch(oper){
case "+":
r = one + two ;
break ;
case "-":
r = one - two ;
break;
case "*":
r = one * two ;
break ;
case "/":
//除数不能为0
//判断
/* if(two==0){
//将数据情况掉
//并且弹框提示；除数不能为0
r = 0
}else{
one /two ;
}*/
r = one /two ;
break ;
}
//将计算结果展示到显示框上
// showResult.value = r ;
//将计算的结果进行保留小数点的有戏位
// numValue2 = r ;
numValue2 = new Number(r).toFixed(6) ;
numValue1 = "" ; //numValue1清空了
showResult.value = numValue2*1; // numValue2*1
//问题1 :1.2 * 3 = 3.599999996
//问题2：去掉首尾无效0 ：parseFloat()
//问题3：在四则元素：判断用户如果是点击等号或者点击继续运算，每一次都将第一个数清空掉了，
//判断第一个数是否为空
//问题4：小数点问题：小数点只能出现一个
//四则运算的问题：
/**
* 用户输入两个数据目前是直接处理结果，那么如何判断用户是要点击=号还是继续进行四则运算？
* 在运算符点击监听事件中去坐
* 判断numValue2的值是否为空：
* 如果是numValue2==""
* 如果numValue2不是空字符串
* 用户可能点击等号或者运算符
*
*/
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul
-
用JS写的简单的计算器实现代码
1.本页效果图片 2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.
-
js实现简单计算器
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
-
纯javascript代码实现计算器功能(三种方法)
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
Vue.js实现的计算器功能完整示例
本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc
-
js网页版计算器的简单实现
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&
-
javascript-简单的计算器实现步骤分解(附图)
知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果: 代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
js实现一个简易计算器
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab