<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- <meata charset='utf-8'> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--解决火狐浏览器中文乱码问题-->
<title></title>
<style type="text/css">
button {
height: 50px;
width: 50px;
}
ul {
list-style: none;
width: 150px;
}
li {
float: left;
}
div {
width: 150px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>

<ul>
<li><button id='1' onclick="getText(this)"> 1</button></li>
<li><button id='1' onclick="getText(this)"> 2</button></li>
<li><button id='1' onclick="getText(this)"> 3</button></li>
<li><button id='1' onclick="getText(this)"> 4</button></li>
<li><button id='1' onclick="getText(this)"> 5</button></li>
<li><button id='1' onclick="getText(this)"> 6</button></li>
<li><button id='1' onclick="getText(this)"> 7</button></li>
<li><button id='1' onclick="getText(this)"> 8</button></li>
<li><button id='1' onclick="getText(this)"> 9</button></li>
<li><button id='1' onclick="getText(this)"> 0</button></li>
<li><button id='1' onclick="getText(this)"> +</button></li>
<li><button id='1' onclick="getText(this)"> -</button></li>
<li><button id='1' onclick="getText(this)"> *</button></li>
<li><button id='1' onclick="getText(this)"> /</button></li>
<li><button id='1' onclick="getText(this)"> =</button></li>
</ul>
<ul>
<li><div id='showText' style="font-size: 12px;">不支持负数</div></li>
</ul>
<script type="text/javascript" charset="utf-8">
var sum_1='';
var sum_2='';
var oper='';//加减乘除
var sign=false;
var showMsg='';
var num=false;
var div_ele=document.getElementById('showText');

function getText(obj){
var tagText=obj.innerHTML;

tagText=tagText.replace(' ','');//剔除空格

if (tagText != "="){
this.showMsg=this.showMsg.replace('undefined','');
this.showMsg+=tagText;
div_ele.innerHTML=this.showMsg;
}

switch(tagText)
{
case '-':isOper(tagText);break;
case '+':isOper(tagText);break;
case '/':isOper(tagText);break;
case '*':isOper(tagText);break;
case '=':operation(this.oper);break;
default:inputAdd(tagText,this.sign);

}

}
// if(isNaN(this.num_2) || isNaN(this.num_1)){
// div_ele.innerHTML='计算 你妹看清楚再点！';
// initConfig();
// return '';
// }

//计算
function operation(oper)
{
// if (this.num_1=='' && this.num){
// this.num_1=this.num;
// alert('复合条件');
// }

switch(oper)
{
case '-':subtraction();break;
case '+':addition();break;
case '/':division();break;
case '*':multiplication();break;
}
}

//检测用户是不是已经单击过 加减乘除了
function isOper(str)
{

// alert(this.num_1.length);

if (this.oper=='')
{
this.oper=str;
this.sign=true;
}
else
{
div_ele.innerHTML='你妹看清楚再点！';
initConfig();
}
}

//字符串的拼接
function inputAdd(num,sign){
if (!sign)
{
this.num_1=this.num_1+num;
}
else
{
this.num_2=this.num_2+num
}
}

function typeTran(){
this.num_1=this.num_1.replace('undefined','');
this.num_2=this.num_2.replace('undefined','');
}
//加法
function addition(){
typeTran();
// this.num=(Number(this.num_2)+Number(this.num_1));
this.div_ele.innerHTML=(Number(this.num_2)+Number(this.num_1));
initConfig();
}

//减法
function subtraction(){
typeTran();
this.div_ele.innerHTML=(Number(this.num_1)-Number(this.num_2));
initConfig()
}

//除法
function division(){
typeTran();
this.div_ele.innerHTML=(Number(this.num_1)/Number(this.num_2));
initConfig()
}

//乘法
function multiplication(){
typeTran();
this.div_ele.innerHTML=(Number(this.num_1)*Number(this.num_2));
initConfig()
}
function initConfig(){
this.oper=''
this.num_1='';
this.num_2='';
this.showMsg='';
this.sign=false;
// div_ele.innerHTML='美女你好！';
}

</script>
</body>
</html>

js 实现的简易计算器的更多相关文章

  1. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  3. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  5. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. js之简易计算器

    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS编写简易计算器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...

  9. JS实现简易计算器的7种方法

    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

随机推荐

  1. 使用__all__限制模块可被导入对象

    经常我们会编写自定义模块,用于被别的脚本调用;有时候为了方便,会使用from module_name import *的方式导入,这样会把模块中全部对象导入进来; 使用__all__结合列表,可以控制 ...

  2. ArcGIS自定义工具箱-判断字段值是否相等

    ArcGIS自定义工具箱-判断字段值是否相等 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:判断两个字段值是否相等 使用方法: 结果: 联系方式:谢老师,13 ...

  3. python 引用和对象理解（转）

    引用和对象分离 从最开始的变量开始思考: 在python中,如果要使用一个变量,不需要提前进行声明,只需要在用的时候,给这个变量赋值即可 (这个和C语言等静态类型语言不同,和python为动态类型有关 ...

  4. 2018面向对象程序设计（Java）第8周学习指导及要求

    2018面向对象程序设计(Java)第8周学习指导及要求 (2018.10.18-2018.10.21)   学习目标 掌握接口定义方法: 掌握实现接口类的定义要求: 掌握实现了接口类的使用要求: 理 ...

  5. 七个不可错过的React组件库与开发框架

    React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...

  6. 游戏AI技术

    [Unity3D人工智能编程精粹] 1.运动层.决策层.战略层. 运动层.决策层包含的算法是针对单个角色的,战略层是针对小队乃至更大规模群体的. 导航和寻路是运行层的主要任务. 决策层决定角色下一时间 ...

  7. MO拆分计划行程序中写入PRODUCTIONORDERS表数据出现重复导致报错（BUG）20180502

    错误提示:ORA-00001: 违反唯一约束条件 (ABPPMGR.C0248833319_6192)ORA-06512: 在 "STG.FP_MO_SPLIT", line 19 ...

  8. 找回密码的url分析

    https://www.example.com/reset?email=user@example.com&key=b4c9a289323b21a01c3e940f150eb9b8c542587 ...

  9. python--第二天总结

    一.作用域只要变量在内存中存在,则就可以使用.(栈) 二.三元运算result = 值result = 值1 if 条件 else 值2 如果条件为真:result = 值1如果条件为假:result ...

  10. 【Nodejs】Node.js(Express)の環境構築

    [Express]の環境 参考URL:http://expressjs.com/en/starter/generator.html ①Node.jsの準備 (参考URL:https://www.cnb ...