Vue---计算器

最新推荐文章于 2019-06-29 16:04:35 发布

ShanCW

最新推荐文章于 2019-06-29 16:04:35 发布

阅读量219

点赞数

分类专栏： JS程序文章标签： JS Vue

本文链接：https://blog.csdn.net/FreMePst/article/details/82726720

版权

JS程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2018.12

在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>vue 计算器</title>
<script src="../vue.js"></script>
<style type="text/css" media="screen">
	.tab {
		margin-left:350px;
		top: ;
		border:1px,solid,red;
		border-collapse: collapse;
		table-layout:fixed;
		width: 500px;
		

	}
	thead{
		width: 200px
	}
	th:first-child{
		width: 50px;
	}
	button{
		width:100%;
	}
</style>
</head>
<body>
	<div id="app">
		<table class="tab">
	    	<thead>
	    		<tr>
	    			<th><button @click="init">AC</button></th>
	    			 <th colspan="3"> <input type="text" placeholder="显示数据" v-model="result"></th>
	    			 
	    		</tr>
	    	</thead>
	    	<tbody>
				<tr>
					<td ><button @click="push(7)">7</button></td>
					<td ><button @click="push(8)">8</button></td>
					<td ><button @click="push(9)">9</button></td>
					<td ><button @click="push(11)">*</button></td>
				</tr>
				<tr>
					<td ><button @click="push(4)">4</button></td>
					<td ><button @click="push(5)">5</button></td>
					<td ><button @click="push(6)">6</button></td>
					<td ><button @click="push(22)">-</button></td>
				</tr>
				<tr>
					<td ><button @click="push(1)">1</button></td>
					<td ><button @click="push(2)">2</button></td>
					<td ><button @click="push(3)">3</button></td>
					<td ><button @click="push(33)">+</button></td>
				</tr>
				<tr>
					<td><button @click="push(0)">0</button></td>
					<td><button>.</button></td>
					<td><button @click="switch_method">=</button></td>
					<td><button @click="push(44)">/</button></td>
				</tr>
	    	</tbody>
    </table>
	</div>
	<script type="text/javascript">
		var exampleData={

			num1:[],
			num2:[],
			result:"undefined",
			num_str:"",//缓存器，按完运算符后重置为num_str=""
			flag:0,
			calculate_signal:0
		};
		new Vue({
			el:"#app",
			data:exampleData,
			methods:{
				push:function(num){
					//如果num_str有数字并且按下运算符则存在num2中
					//flag加锁思想 如果输入的是运算符，则将flag置1
					if(num==11||num==22||num==33||num==44){//设定减法的代号为11
						this.calculate_signal = num;
						num=""
						this.flag=1;
						this.num_str="";//缓存器重置
					}
					if(this.flag){
						this.num2.push(num);
						this.num_str = this.num2.join("")
						console.log("NUM2="+Number(this.num2.join("")))
					}
					else {
					this.num1.push(num);
					console.log("NUM1="+Number(this.num1.join("")))
					this.num_str = this.num1.join("")
					}
				},
				init:function(){
					this.num1.splice(0,this.num1.length);
					this.num2.splice(0,this.num2.length);
					this.result = "undefined";
					this.flag=0;
					this.calculate_signal=0;
					this.num_str="" 
					console.log(this.num1,this.num2)

				},
				switch_method:function(){
					// switch (this.calculate_signal){
					// 	case 11: this.mul();break;
					// 	case 22: this.dec();break;
					// 	case 33: this.add();break;
					// 	case 44: this.chu();break;
					// }
					this.num_str=""
					if(this.calculate_signal==11){	
						this.mul();
					}else if(this.calculate_signal==22){
						this.dec();
						// this.num1 = this.result
					}else if(this.calculate_signal==33){
						this.add();
						// this.num1 = this.result
					}else if(this.calculate_signal==44){
						this.chu();
					}

				},
			
				dec:function(){
					let N1=Number(this.num1.join(""));
					let N2=Number(this.num2.join(""));
					this.result=N1-N2;
					// this.num2.splice(0,this.num2.length)
					// this.num1.splice(0,this.num1.length)
					console.log("NUM1="+Number(this.num2.join("")))	;
					console.log("NUM2="+Number(this.num2.join("")))	;
					console.log("RESULT="+this.result)
				},
				add:function(){
					let N1=Number(this.num1.join(""));
					let N2=Number(this.num2.join("")); 
					this.result = N1+N2; 
					console.log("RESULT="+this.result)
				},
				mul:function(){
					let N1=Number(this.num1.join(""));
					let N2=Number(this.num2.join("")); 
					this.result = N1*N2;
					console.log("RESULT="+this.result)
				},
				chu:function(){
					let N1=Number(this.num1.join(""));
					let N2=Number(this.num2.join("")); 
					this.result = N1/N2;
					console.log("RESULT="+this.result)
				}
			}
		});
	</script>
</body>
</html>

2018.9
说明

由于css还没开始学，自己上网搜了一些基础的用法
计算器缺少除法，实现除法的想法是使用 / % 然后连接两个字符串
采用了ASCII表来识别 ±*/ =
代码实现的想法：先输入的数字存入str1，在输入运算符的时候，进行判定，如果确实输入的是运算符则下次输入的数据存入str2。在输入“=”后，根据运算符来决定运算函数的使用
存在的问题：没有考虑先输入= ±*/ 的错误情况需要后期加入限制条件

代码块

<!DOCTYPE html>
<html>
<head>
	<style type="text/css" media="screen">
	body{background-image:
	 url('http://img.juimg.com/tuku/yulantu/140617/330801-14061G05G997.jpg')}
	 .line{
		text-align: left;
		top : 33px;
		left: 20px;
		height: 35px;
		width: 440px;
		font-size: 16px;   
		/* font zi ti */
		/* background-color: red; */
	}	
		</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body >
	<script type="text/javascript" >
		var temp = "";
var str1 ="";//num1
var str2= "";//num2
var calculate = "";//+-*/
function input (target){
	if(target==46){
		target ="."
	}
	if(target == 61){
		choose();//select method
	}
	if(target==43||target==45||target==42){//+		-		*
		calculate += target;//calculate is string
	}
	if(Number(calculate)&&target!=43&&target!=45&&target!=42){//string calculate have symbol and target not calculate
		str2 += target;
	}
	else if(target!=43&&target!=45&&target!=42)
		str1 += target;
}

function choose(){
	switch (Number(calculate))
	{
	case 43: add();break;
	case 45:  subtract();break;
	case 42: mul();break;
//case 47:/

	}
}
function add()	{
	var sum;
	sum = Number(str1)+Number(str2);
	alert(str1+"+"+str2+"="+sum);
}
function subtract(){
	var subtraction;
	subtraction = Number(str1)-Number(str2);
	alert(str1+"-"+str2+"="+subtraction)
}
function mul(){
	var multiplication;
	multiplication = Number(str1)*Number(str2);
	alert(str1+"*"+str2+"="+multiplication);
}
	</script>
    <form class="out_side">
    	<div class = "line" >
    		<!-- test -->
    		<!-- <input type="button " name="1" value = "1"  onclick="input_1(1)"> -->
    		<button type="button" 	onclick="input(1)">1</button>
    		<button type="button"	  	 onclick="input(2)">2</button>
    		<button type="button"	  	 onclick="input(3)">3</button>
    		<!-- test + -->
    		<button type="button"		onclick="input(43)">+</button>
    	</div>
    	<div class = "line">
    		<button type="button" 	onclick = "input(4)">4</button>
    		<button type="button" 	onclick = "input(5)">5</button>
    		<button type="button"	 	onclick = "input(6)">6</button>
    		<button type="button"	 	onclick = "input(45)">-&nbsp</button>


    	</div>
    	<div class = "line">
    		<button type="button" 	onclick = "input(7)">7</button>
    		<button type="button" 	onclick = "input(8)">8</button>
    		<button type="button" 	onclick = "input(9)">9</button>
    		<button type="button"	 	onclick = "input(42)">*</button>


    	</div>
		<div class = "line">
			<button type="button" 	onclick = "input(0)">&nbsp&nbsp&nbsp0&nbsp&nbsp&nbsp&nbsp </button>
			<button type="button" 	onclick = "input(46)">.&nbsp</button>
			<button type="button" 	onclick = "input(61)">=</button>
		</div>
		<div>
			<button type="button"		onclick="location.reload()">AC</button>
		</div>
			

    		

    </form>
</body>
</html>

ShanCW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---计算器

说明由于css还没开始学，自己上网搜了一些基础的用法计算器缺少除法，实现除法的想法是使用 / % 然后连接两个字符串采用了ASCII表来识别 +-*/ =代码实现的想法：先输入的数字存入str1，在输入运算符的时候，进行判定，如果确实输入的是运算符则下次输入的数据存入str2。在输入“=”后，根据运算符来决定运算函数的使用存在的问题：没有考虑先输入= +-*/ 的错误情况...
复制链接

扫一扫