使用JS写一个计算器
先上效果图：
简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。
根据预期效果，可以确定页面中的布局要用到table tr td。
所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，用name来命名：
<body>
<table border="1">
<!--显示结果行-->
<tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
<!--第一行 清除按钮-->
<tr>
<td><input type="button" value="Clear" onclick="inputPCB(this)"/></td>
</tr>
<!--第二行-->
<tr>
<td><input type="button" value="1" onclick="inputEvent(this)"/></td>
<td><input type="button" value="2" onclick="inputEvent(this)"/></td>
<td><input type="button"value="3" onclick="inputEvent(this)"/></td>
<td><input type="button" value="4" onclick="inputEvent(this)"/></td>
</tr>
<!--第三行-->
<tr>
<td><input type="button" value="5" onclick="inputEvent(this)"/></td>
<td><input type="button" value="6" onclick="inputEvent(this)"/></td>
<td><input type="button"value="7" onclick="inputEvent(this)"/></td>
<td><input type="button" value="8" onclick="inputEvent(this)"/></td>
</tr>
<!--第四行-->
<tr>
<td><input type="button" value="9" onclick="inputEvent(this)"/></td>
<td><input type="button" value="0" onclick="inputEvent(this)"/></td>
<td><input type="button"value="." onclick="inputEvent(this)"/></td>
<td><input type="button" value="=" onclick="inputEquel(this)"/></td>
</tr>
<!--第五行-->
<tr>
<td><input type="button" value="+" onclick="inputOper(this)"/></td>
<td><input type="button" value="-" onclick="inputOper(this)"/></td>
<td><input type="button"value="*" onclick="inputOper(this)"/></td>
<td><input type="button" value="/" onclick="inputOper(this)"/></td>
</tr>
</table>
</body>
除了清除按钮是晴空所有外，其他1234567890的按钮通用onclick=inputEvent(this)，来直接键入它的value值，这是唯一的值。运算符±*/通过操作函数inputOper来执行运算命令。
下面是JS内容，JS的各部分功用标注在注释里面：
<script type="text/javascript">
/* 定义一个Calculator类*/
function Calculator(){
this.jisuan=function(num1,num2,oper){
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
}
return res;
}
}
//创建对象
var calculator=new Calculator();
/*定义全局变量*/
var val=0; //放置输入的值
var xval=0;//保存转换Number类型的值
var temp=0; //保存第一次输入的值
var oper="";//保存输入的操作符
/*获取输入数字*/
function inputEvent(e){
val=e.value
var xsval=document.getElementById("inp1");
xsval.value+=val; //连续输入数字(String类型)
//转换Number类型
xval=parseFloat(xsval.value);
}
/*获取第一行的数据*/
function inputPCB(e){
//window.alert(e.value);
var xsval=document.getElementById("inp1");
if(e.value=="Clear"){
xsval.value="";
}
}
/*输入操作符*/
function inputOper(e){
oper=e.value;
//window.alert(typeof oper);
//oper=oper.substr(0);
if (e.value=="+"){
var xsval=document.getElementById("inp1");
//保存上次计算结果，并对字符串进行转换Number类型
temp=parseFloat(xsval.value);
//第一次输入的值设置为空
xsval.value="";
}else if(e.value=="-"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="*"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="/"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}
}
/*计算结果*/
function inputEquel(e){
var xsval=document.getElementById("inp1");
if(e.value=="="){
//window.alert(xval);
//调用对象方法
xsval.value=calculator.jisuan(temp,xval,oper);
}
}
</script>
样式表简单写一下：
<style>
input{
width:60px;
}
#inp1{
width:280px;
text-align:right;
}
</style>
这就是一个简单的完整的使用原生JS写出来的计算器效果。
使用JS写一个计算器的更多相关文章
- 用JS写一个计算器（兼容手机端）
先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <m ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 用VBA写一个计算器
着急的 玩家 可以 跳过“============”部分 ======================================可以跳过的 部分 开始==================== ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 【Part1】用JS写一个Blog（node + vue + mongoDB）
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...
- [NodeJS]使用Node.js写一个简单的在线聊天室
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...
随机推荐
- 【C++初学者自学笔记二】函数重载（模块一）
1.概念:同意作用域的一组参数列表不同,函数名相同的函数,这组函数叫函数重载(C语言是不能定义相同名称的函数,但是C++可以允许定义). 2作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...
- CSS阴影 box-shadow属性用法
box-shadow: 它可以设置一个或者多个下拉阴影的框 语法:box-shadow:h-shadow v-shadow blur spread color inset 注意:该属性把一个或者多个下 ...
- 【原】简单shell练习（四）
1.查看已开启端口信息 #ss -ln 2.列出谁在使用某个端口(如:80) #lsof -i:80 3.显示文件夹下文件信息 #find /home/root -type f#find -type ...
- LeetCode简单题(一)
题目一: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组 ...
- hexo 安装和部署
因为投递论文需要个人网站,所以今天又来了一次hexo 安装和部署. 参考官方文档:https://hexo.io/zh-cn/docs/ git是需要的哈.自行安装 node需要大于8.10 node ...
- FineReport帆软报表需求：根据url传递过来的参数值决定显示隐藏列
需求:角色id传递到报表页面中,然后根据角色id,决定隐藏第1列,显示第2-4列,还是隐藏第2-4列,显示第1列. 解决方法:
- iOS 开发之 开发一款自己的美颜相机
以前在公司做项目时很少遇到对相机.图片进行处理的(非公司业务),只是偶尔上传,裁剪,预览下.近期自己准备写个相机应用,把图片处理的这些技术细节整理下.包含美颜相机,图片美化,简单拼图,艺术拼图等主要模 ...
- freemarker.core.InvalidReferenceException: [... Exception message was already printed; see it above ...]
FreeMarker template error:The following has evaluated to null or missing:==> product [in templat ...
- IDEA启动项目的时候，控制台中显示的都是乱码
解决办法: 找到intellij idea安装目录,bin文件夹下面idea64.exe.vmoptions和idea.exe.vmoptions这两个文件,分别在这两个文件中添加:-Dfile.en ...
- linux编译C
1. 编译单个源文件 为了进行测试,你可以创建"Hello World"程序: #include #include int main(int argc, char **argv) ...