js 实现的简易计算器
<!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 实现的简易计算器的更多相关文章
- 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 ...
随机推荐
- The iOS 7 Design Cheat Sheet
http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
- 指向字符串的指针和char类型的数组
指针数组的效率比二维字符数组的效率高 指针数组不能修改字符串字面量,而二维字符数组中的内容可以更改
- 对于“2017面向对象程序设计（JAVA）第四周学习总结”存在问题的反馈
对于“2017面向对象程序设计(JAVA)第四周学习总结”存在问题的反馈 “这部分同学博文总结没有写,实验作业没有提交.”——1.关于博文作业.实验作业教学功能的正解:学习知识.暴露问题.衔接课上.2 ...
- crontab -e文件存放路径
crontab -e结果存放在/var/spool/cron/crontabs中
- python进程之守护进程
标签(空格分隔): 守护进程 主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了: 关于守护进程需要强调两点: 其一:守护进程会在主 ...
- Java 面向切面 AOP
参考: :http://www.blogjava.net/supercrsky/articles/174368.html AOP: Aspect Oriented Programming 即面向切面编 ...
- 四、API使用参考
官方文档:https://docs.blender.org/api/blender_python_api_current/info_api_reference.html Blender有很多互连数据类 ...
- CSS:opacity:0,visibility:hidden,display:none的区别
CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...
- 获取标签as3.0
import flash.utils.Timer; import flash.events.TimerEvent; var time:Timer=new Timer(25); time.addEven ...
- pta7-20 畅通工程之局部最小花费问题（Kruskal算法）
题目链接:https://pintia.cn/problem-sets/15/problems/897 题意:给出n个城镇,然后给出n×(n-1)/2条边,即每两个城镇之间的边,包含起始点,终点,修建 ...