用简单的JS代码制作计算器
时间:2019-08-23
本文章向大家介绍用简单的JS代码制作计算器,主要包括用简单的JS代码制作计算器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
代码+注释一共不到200行,是练习交流的必备良药
主界面如下:
操作示意图:
以下是代码部分
HTML:
<div>
<table class="window">
<tr>
<td class="window_prompt">输入 :</td>
<td><div id="userIn"><div class="text">简易的计算器</div></div></td>
</tr>
<tr>
<td class="window_prompt">结果是 :</td>
<td><div id="mathResult"><div class="text">by keats_Coder</div></div></td>
</tr>
</table>
<table id="main">
<tr>
<td colspan="2" id="clear">C</td>
<td id="back">退格</td>
<td id="operator4">/</td>
</tr>
<tr>
<td id="num7" class="num">7</td>
<td id="num8" class="num">8</td>
<td id="num9" class="num">9</td>
<td id="operator3">x</td>
</tr>
<tr>
<td id="num4" class="num">4</td>
<td id="num5" class="num">5</td>
<td id="num6" class="num">6</td>
<td id="operator2">-</td>
</tr>
<tr>
<td id="num1" class="num">1</td>
<td id="num2" class="num">2</td>
<td id="num3" class="num">3</td>
<td id="operator1">+</td>
</tr>
<tr>
<td id="minus">±</td>
<td id="num0" class="num">0</td>
<td id="dot">.</td>
<td id="result">=</td>
</tr>
</table>
</div>
CSS部分:
<style>
.text{
float: right;
height: 30px;
width: 238px;
font-size: 20px;
line-height: 30px;
color: #aaaaaa;
}
div{
float: left;
margin-left: 40%;
}
.window{
margin-left: 2px;
border: black 1px solid;
}
.window_prompt{
width: 70px;
text-align: right;
}
#mathResult,#userIn{
margin-left: 10px;
border: black 1px solid;
height: 30px;
width: 238px;
text-align: right;
font-size: 25px;
line-height: 30px;
padding-right: 10px;
}
#main td{
border: black 1px solid;
height: 50px;
width: 80px;
text-align: center;
font-size: 30px;
}
#main td:hover{
background-color: #dddddd;
}
#main td:active{
background-color: #505050;
}
</style>
JavaScript部分:
<script>
//定义变量存储用户当前输入(即上一个运算符之后,下一个运算符之前)的内容
var string = "";
//数组用来存储用户在一次运算结束前的所有的数字
var nums = new Array();
//数组用来存储运算符
var maths = new Array();
//函数:显示当前输入
function showScreen(){
document.getElementById("userIn").innerText = string;
}
//清除按钮功能:清除屏幕内容,并重置数据(当前输入内容,运算符,运算符之前的内容)
document.getElementById("clear").onclick = function () {
string = "";
nums = new Array();
maths = new Array();
document.getElementById("userIn").innerHTML = "<div class=\"text\">简易的计算器</div>";
document.getElementById("mathResult").innerHTML = "<div class=\"text\">by keats_Coder</div>";
}
//退格按钮功能:删除当前输入栏最后一个输入的数字
document.getElementById("back").onclick = function () {
if( string ){
string = new String(string).substring(0,string.length-1)
}
showScreen();
}
//小数点
document.getElementById("dot").onclick = function () {
string = string + ".";
showScreen();
}
//正负号
document.getElementById("minus").onclick = function(){
if (string) {
string = parseInt(string) * (-1);
}
showScreen();
}
//运算符功能,1 --> +; 2 --> -; 3 --> *; 4 --> /
for (var i = 1; i <= 4; i++) {
document.getElementById("operator"+i).onclick = (function (i){
return function() {
maths.push(i);
nums.push(string);
string = "";
showScreen();
}
})(i);
}
//数字按钮
for (i = 0; i < 10; i++) {
document.getElementById("num"+i).onclick = (function (i) {
return function () {
string = string + i;
showScreen();
}
})(i);
}
//等号按钮。运算并显示结果
document.getElementById("result").onclick = function () {
//定义变量-结果
var result;
//如果用户参与运算的只有一个
if (nums.length == 0) {
result = string;
}else {
//将最后一个数存入数组
nums.push(string);
//取出数组中的值进行运算
for (var i = 0; i < nums.length - 1; i++) {
var right = nums[i + 1];
var math = maths[i];
if (i == 0) {
result = nums[0];
}
switch (math) {
case 1:
result = parseFloat(result) + parseFloat(right);
break;
case 2:
result = parseFloat(result) - parseFloat(right);
break;
case 3:
result = parseFloat(result) * parseFloat(right);
break;
case 4:
result = parseFloat(result) / parseFloat(right);
break;
}
}
}
//将结果安排到结果栏
document.getElementById("mathResult").innerText = result;
//重置计算器
string = "";
nums = new Array();
maths = new Array();
}
</script>
欢迎留言交流与指正!
原文地址:https://www.cnblogs.com/keatsCoder/p/11398257.html
- 史上十大最严重黑客袭击事件盘点
- LinearLayout(线性布局)
- 服务化了,没想到耦合更加严重?
- 利用好注册的域名
- Android中TextView
- 腾讯 DCI 上线基于集中控制的 SR-TE 方案
- 如何从VS2003升级到VS2008
- js中多个Date对象变量间赋值互相影响
- 并发编程之Executor,Executors,ExecutorService和ThreadPoolExecutor
- 【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效
- 未来人工智能将把人类分为3层,而你会在哪一层呢?
- IIS 7.0探索用于 Windows Vista 的 Web 服务器和更多内容
- 初学Python 之抓取当当网图书页面目录并保存到txt文件
- JavaScript 基础(二)数组
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「高并发通信框架Netty4 源码解读(三)」NIO缓冲区Buffer详解
- UML类图符号:各种关系说明以及举例
- 「高并发通信框架Netty4 源码解读(四)」NIO缓冲区之字节缓冲区ByteBuffer详解
- 「influxDB 原理与实践(三)」连续查询
- 为什么使用OPA而不是原生的Pod安全策略?
- 浅入浅出 Java ConcurrentHashMap
- 「高并发通信框架Netty4 源码解读(五)」NIO通道Channel详解
- 图解一致性哈希算法,全网(小区局域网)最通俗易懂
- 「高并发通信框架Netty4 源码解读(六)」NIO通道之Socket通道
- 「高并发通信框架Netty4 源码解读(番外篇)」NIO实现大文件传输
- 「高并发通信框架Netty4 源码解读(七)」NIO通道之Selector选择器
- Python与seo工具脚本,360/搜狗相关搜索词采集源码参考
- 逐行阅读Spring5.X源码(八)Mybatis是如何利用MapperScan完成扫描的?
- KEDA|Kubernetes中基于事件驱动的自动伸缩
- 「高并发通信框架Netty4 源码解读(八)」NIO应用——聊天案例及Reactor线程模式