js实现一个简易的计算器
利用原生js实现一个简易的计算器（附详细注释），供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.divs {
width: 500px;
height: 600px;
border: 1px solid #000000;
margin: auto;
}
.divs > input {
width: 460px;
height: 45px;
margin-left: 18px;
margin-top: 10px;
font-size: 30px;
background-color: white;
text-align: right;
}
.divs > div {
width: 100px;
height: 100px;
float: left;
border: 1px solid #000000;
margin-left: 18px;
margin-top: 25px;
font-size: 40px;
line-height: 100px;
text-align: center;
user-select: none;
}
</style>
</head>
<body>
<div class="divs">
<input type="text" value="0" id="input1" disabled />
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">-</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">+</div>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">*</div>
<div class="block">C</div>
<div class="block">0</div>
<div class="block">=</div>
<div class="block">/</div>
</div>
js:
<script>
// 获取到所有类名为block的元素
var blocks = document.getElementsByClassName("block");
// 获取到input
var input = document.getElementById("input1");
// 声明第一个数值
var firstValue = 0,
bool = false;
// 声明运算符
var type;
for (var i = 0; i < blocks.length; i++) {
//点击第i个block
blocks[i].onclick = function () {
//点击谁，this就指向谁，在这里this指向每次点击的元素
console.log(this);
//this.innerHTML显示点击的div里面的内容（比如1,2,3,-,+）
//判断点击的为数字的情况（不是NaN，就是数字）
if (!isNaN(this.innerHTML)) {
// bool初始为false,当bool为false时,可以不断输入,当bool为true时，input清空为0
if (bool) {
input.value = "0";
bool = false;
}
// 将input中的value累加点击的内容，将它强转为数字是为了去掉最前面的0，最后再转为字符
input.value = Number(input.value + this.innerHTML).toString();
} else {
//判断点击为+ - * /的情况
if (this.innerHTML !== "C" && this.innerHTML !== "=") {
//将第一个数存到firstValue
firstValue = Number(input.value);
//将运算符存到type
type = this.innerHTML;
//将input中的value重置为0
input.value = "0";
} else if (this.innerHTML === "C") { //判断点击C的情况
// 全都重置
firstValue = 0;
type = undefined;
input.value = "0";
} else { //判断点击=的情况
//根据运算符的类型进行运算
switch (type) {
case "+":
input.value = (firstValue + Number(input.value)).toString();
break;
case "-":
input.value = (firstValue - Number(input.value)).toString();
break;
case "*":
input.value = (firstValue * Number(input.value)).toString();
break;
case "/":
// 除数为0时重置input.value
if (Number(input.value) === 0) input.value = "0";
else
input.value = (firstValue / Number(input.value)).toString();
break;
}
//bool为true时，点击"="后,当再次输入时，input.value为0
bool = true;
}
}
};
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现苹果计算器
本文实例为大家分享了JS实现苹果计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机</title> <style type="text/css"> #phone{ position: relative; width: 380px; height: 700px; box
-
JavaScript 如何计算文本的行数的实现
需求:根据行数决定是否限制展开和收起. 思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准) 要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数.当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行:最后还要考虑 DOM 的样式padding和margin对高度的影响.这样一来我们就可以计算出文本的行数了.总结一下我们需要如下几步: 克隆文本所在的
-
javascript实现简易计算器功能
本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击数字按钮输入数字 2.实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零 3.实现小数点添加功能,并添加异常处理,小数点只能出现一次 4.实现正负号功能 5.实现回退功能,已经是最后一位时,显示框显示为零 6.清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习目
-
js精准的倒计时函数分享
先看看倒计时效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时函数</title> <script> var timer=(function(){ return function (json){ if(json.currentTime){ var now=new Date(
-
超精准的javascript验证身份证号的具体实现方法
编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码 yymmdd: 出生年月日 xx: 顺序类编码,无法确定 p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y 其中 dddddd:地区码 yyyymmdd: 出生年月日 xxx:顺序类编码,无法确定,奇数为男,偶数为女 y: 校
-
js拖拉表格实现内容计算
本文实例为大家分享了js拖拉表格实现内容计算的具体代码,供大家参考,具体内容如下 前言 制作网页版Excel H5新增功能:可拖拉-draggable, 可编辑-contenteditable 实现结果 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table</title&g
-
JavaScript经典案例之简易计算器
本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 效果图: 逻辑: 1.首先通过遍历,为所有元素添加事件: 2.各个按钮功能分别实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
-
javascript模拟实现计算器
本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击按钮录入数字 2.实现基础四则运算功能,并添加必要的异常处理. 3.实现小数点功能并添加异常处理:小数点只能出现一次 4.实现正负号功能 5.实现退位功能,已经是最后一位时,显示框显示为0 6.AC清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习的目的: 1.将css,h
-
js精准计算
var numA = 0.1; var numB = 0.2; alert( numA + numB ); 0.1 + 0.2 = 0.30000000000000004. 计算精度误差问题(和二进制相关). 对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题,而JavaScript是一门弱类型的语言,从设计思想上就没有对浮点数有个严格的数据类型,所以精度误差的问题就显得格外突出. 我们先把 0.1 和
-
js实现一个简易的计算器
利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
-
基于Unity制作一个简易的计算器
目录 一.前言 二.效果图及源工程 三.实现 1.界面搭建 2.代码实现 四.后记 一.前言 Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其他项目的小组件导入. 当然,也可以导出来,发布到网页端,来做一个嵌入式工具也可以. 二.效果图及源工程 效果图: 源工程 三.实现 1.界面搭建 所有的按钮摆放到Background下面. 2.代码实现 首先找到所有的按钮,添加到事件: //结果显示 TextComputeProcess = GameObjec
-
js实现一个简易计算器
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab
-
JavaScript实现一个简易的计算器实例代码
自己期末复习的时候就一直想要写一个计算器,闲暇的时候也在想具体怎么实现,觉得应该不难,但就是想写.昨天终于可以开始动工,刚开始还以为实现出来需要一个周左右至少两天的时间,想着实现完我就可以先回家两天了.但没想到整个实现过程算比较顺利吧,昨天用了大概六个小时完成了从设计到具体实现. 有大概一个月没怎么写代码了,整个大脑都不适应,反应也慢,一些基本的东西都有点模糊不清了.可能是原来就没有太理解,再加上没有其余练习,导致效率有些低. 正文 html代码: <div class="errorHin
-
C#开发简易winform计算器程序
临近年关,今日在学习的过程中感觉甚是无聊,便想用C#来开发一个简易的计算器程序,这里记录下今日下午的实现过程,同时也记录下自己的第一遍博客. 一.需求 首先我们先来决定我们的计算器要实现什么功能 功能需求:1.能够实现加.减.乘.除.求余等两个操作数的运算,以及开方.平方单个操作数的运算 2.能够清除错误的输入,能够实现清零操作 显示需求:能够显示操作数与运算内容,显示结果 二.设计界面 1.在明白我们的功能需求后,我们来设计界面,界面主要包括三个部分,用于显示的两个textBox,以及数字键B
-
iOS实现简易的计算器
本文实例为大家分享了iOS实现简易的计算器的具体代码,供大家参考,具体内容如下 初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created by ma c on 15/8/25. // Copyright (c) 2015年 bjsxt. All rights reserved. // #import "ViewController.h"
-
java实现简易的计算器界面
如何用java写一个简易的计算器界面 前言(与本节重点无关可以忽视) 最近了解了一些界面窗口知识,在老师一步步的悉心教导下我却又一次地走向了迷茫——陌生,理解不充分,照搬.咳咳,但是经过几天的拆解,琢磨,实践,我也渐渐粗浅地认识到了一些本质问题.当时教写的是登录界面,所以这次我打算写一个计算器界面来检测一下自己是不是依然一头雾水. 基本准备 首先给类取名CaculatorInterface(计算器界面) package kallen1014; public class CalculatorInt
-
基于python的Tkinter实现一个简易计算器
本文实例介绍了基于python的Tkinter实现简易计算器的详细代码,分享给大家供大家参考,具体内容如下 第一种:使用python 的 Tkinter实现一个简易计算器 #coding:utf-8 from Tkinter import * import time root = Tk() def cacl(input_str): if "x" in input_str: ret = input_str.split("x") return int(ret[0]) *
-
一个简易的js图片轮播效果
一个简易的js图片轮播效果,话不多说,代码献上. 只有img标签的html代码,做测试用: <body> <img src="images/class1-1.jpg" id="img"> </body> 下面是js代码: var k=0; //当前的索引 var ss = new Array(); //数组,用来存放图片 ss[0] = "images/class1-1.jpg"; ss[1] = "
-
基于Python+Tkinter实现一个简易计算器
目录 设计原理 示例效果 主要代码 设计原理 从结构上来说,一个简单的图形界面,需要由界面组件.组件的事件监听器(响应各类事件的逻辑)和具体的事件处理逻辑组成.界面实现的主要工作是创建各个界面组件对象,对其进行初始化,以及控制各组件之间的层次关系和布局 示例效果 主要代码 import tkinter import math import tkinter.messagebox class Calculator(object): # 界面布局方法 def __init__(self): # 创建主