js 实现的简易计算器

<!DOCTYPE html>
<html lang="zh-CN">
<head>

<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 实现的简易计算器的更多相关文章

js小效果-简易计算器
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解的项目:JS实现简易计算器案例
原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS简易计算器的实现，以及代码的优化
用JS实现简易计算器首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
js之简易计算器
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
JS实现简易计算器的7种方法
先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

随机推荐

使用支持向量机（SVM）算法进行分类
1 支持向量机(SVM)的基本概念 SVM是一种分类算法,其侧重于模式识别方面.使用SVM可以大大提高分类的准确性. 分类相当于模式识别的子集合,模式识别重点在于对已知数据进行特征发现与提取. ...
VC++ 获取系统时间、程序运行时间(精确到秒，毫秒)的五种方法
1.使用CTime类(获取系统当前时间,精确到秒) CString str; //获取系统时间 CTime tm; tm=CTime::GetCurrentTime();//获取系统日期 str=tm ...
python基础学习Day14 内置函数匿名函数
一.内置函数里几个高频重要函数 (1)min\max函数的用法以min函数的为例: min:返回可迭代对象的最小值(可加key,key为函数名,通过函数的规则,返回最小值). l1 =[(,),(, ...
Halcon常用算子01
F1:Help F2:重置 F3:激活一行程序 F4:注销一行程序 F5:执行到stop()或程序结尾 F6:步执行(一步步调试) F10:添加或撤销断点 dev_open_window:打开图像窗口 ...
wamp添加本地虚拟域名
修改一下文件位置,引入文件下面是配置文件添加配置指向目录 <VirtualHost *:80> ServerAdmin 979996962@qq.com DocumentRoot &qu ...
mysql数据库主从同步读写分离（一）主从同步
1.mysql数据库主从同步读写分离 1.1.主要解决的生产问题 1.2.原理 a.为什么需要读写分离? 一台服务器满足不了访问需要.数据的访问基本都是2-8原则. b.怎么做? 不往从服务器去写了 ...
2.2、CDH 搭建Hadoop在安装(安装Java Development Kit)
第2步:安装Java Development Kit 要安装Oracle JDK,您可以使用Cloudera Manager安装Cloudera提供的版本,也可以直接安装Oracle的其他版本. 继续 ...
SpringJDBC数据库的基本使用
SpringJDBC的基础使用部分内容云笔记项目数据库部分采用的是Spring-MyBatis,前面学过了JDBC,SpringJDBC,Mybatis和Spring-MyBatis,有必要重新复习 ...
创建java项目思路
一.搭建 1.创建搭建项目 2.创建分层二.理解项目(理清总体思路) 1.是否有共同部分(过滤或者拦截) 常用量 (static) 2.搭建单表基本增(是否需要返回值) 删(条件) 查(条 ...
web漏洞详解及修复建议
1.漏洞描述跨站脚本攻击(Cross-site scripting,通常简称为XSS)发生在客户端,可被用于进行窃取隐私.钓鱼欺骗.偷取密码.传播恶意代码等攻击行为. 恶意的攻击者将对客户端有危害的 ...

js 实现的简易计算器

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

随机推荐

热门专题