DHTML实现简单的windows计算器

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <style>
 body{
	margin:0px auto;
	}
.border{
	border:1px;
	border-color:#30F;
	border-style:solid;
	}
.aniu{
	width:60px;
	height:30px; ;	
	}
.aniu_s{
	width:50px; 
	height:30px
	}
.aniu_top{
	width:84px; 
	height:30px
	}
.aniu_color{
	color:red;
	}
.aniu_color_s{
	color:#00F;
	}
#content{
	width:330px;				
	}
#menu{
	width:330px;
	height:50px;
	margin:0px auto;
	line-height:50px;
	font-size:1cm;
	color:#30F;
	}
#left{
	width:60px;
	height:180px;
	float:left;
	}
#right{
	width:252px;
	height:180px;
	float:right;
		}
.text{
	width:330px;
	height:30px;
		}
.leftmenu{
	height:30px;
	widht:50px;		
		}
 </style>
<TITLE>DHTML实现简单的windows计算器</TITLE>
</HEAD>
<script language="javascript">
 function closeMain(){   
 var closeMain = document.getElementById('main');   
 var getMin = document.getElementById('getMin');   
 if(closeMain.style.display == 'block'){   
  closeMain.style.display = 'none';   
  getMin.value = '最大化';   
  getMin.style.color = 'red';   
  return false;   
 }   
 else{   
  closeMain.style.display = 'block';   
  getMin.value = '最小化';   
  getMin.style.color = '#8BB9E2';   
  return true;   
 }   
}   
//window.onload = closeMain;   
function closeCalc(){   
 var calc = document.getElementById('calc');   
 if(calc.style.display == 'block')   
 {   
  calc.style.display = 'none';   
 }    
}  
   </script>
 <BODY>
 
 <div id="content" class="border">
     <div id="menu" align="center">
    <strong>计算器</strong>
     </div>
     <form action="" name="keypad">
     <div  class="text">     		
            	<input type="text" name="readout" value="0" readonly class="text">              
           
     </div>
     <div align="right">
     		 <button  class="aniu_top aniu_color" onClick="backspace()"> Backspace</button>
             <button  class="aniu_top aniu_color" onClick="ce()"> CE</button>
             <button  class="aniu_top aniu_color" onClick="cleartext()"> C</button>
        
     </div>
     <div id="left" class="leftmenu">
            <button  class="aniu aniu_color" > MC</button><br/>
            <button  class="aniu aniu_color" > MR</button><br/>
            <button  class="aniu aniu_color" > MS</button><br/> 
            <button  class="aniu aniu_color" > M+</button><br/>           
        
     </div>
     <div id="right" >
     		<button  class="aniu_s aniu_color_s" onClick="numP(7)"> 7</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(8)"> 8</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(9)"> 9</button> 
            <button  class="aniu_s aniu_color" onClick="operation('/')"> /</button> 
            <button  class="aniu_s aniu_color_s" > sqrt</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(4)"> 4</button>  
            <button  class="aniu_s aniu_color_s" onClick="numP(5)"> 5</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(6)"> 6</button> 
            <button  class="aniu_s aniu_color" onClick="operation('*')"> *</button> 
            <button  class="aniu_s aniu_color_s" > %</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(1)"> 1</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(2)"> 2</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(3)"> 3</button> 
            <button  class="aniu_s aniu_color" onClick="operation('-')"> -</button> 
            <button  class="aniu_s aniu_color_s" > 1/x</button> 
            <button  class="aniu_s aniu_color_s" onClick="numP(0)"> 0</button> 
            <button  class="aniu_s aniu_color_s" > +/-</button>  
            <button  class="aniu_s aniu_color_s"  onClick="dian()"> .</button> 
            <button  class="aniu_s aniu_color" onClick="operation('+')"> +</button> 
            <button  class="aniu_s aniu_color" onClick="operation('=')"> =</button> 
    
     </div>
	</form>
 </div>
 <script>
 	fkeypad = document.forms['keypad']
	var lastcommand="";
	var result=0;
	var start=false;
	/*输入0判断*/
	function numP(num){
		if(start){
			fkeypad.readout.value="0";
			start=false;
			}
		if(fkeypad.readout.value=='0'){
			fkeypad.readout.value=num							
		}else{
			fkeypad.readout.value+=num;
			}
		}
	/*点的判断*/
	function dian(){
		var curout = fkeypad.readout.value;
		if(curout.indexOf(".")==-1){
			curout+="."
			}
		fkeypad.readout.value = curout;
		}
	/*backspace*/
	function backspace(){
		var space = fkeypad.readout.value;
		if(space.length ==1){
			
			}else
				fkeypad.readout.value = space.substr(0,space.length-1);
			
		}
	/*clear清除按钮*/
	function cleartext(){
		fkeypad.readout.value = "0";
		}
	/*计算*/
	function operation(command){
		var i=fkeypad.readout.value;
		calculate(parseFloat(i));
		lastcommand = command;
		start=true;
		}
	function calculate(x){
		switch(lastcommand)
		{
			case"+":
				result+=x;
				break;
			case "-":
				result -= x;
				break;
			case "*":
				result *= x;
				break;
			case "/":
				result /= x;
				break;
			default:
				result=x;
		
			}
			fkeypad.readout.value=result;
		}
	function ce(){
		
		fkeypad.readout.value = "0";
		result="0";
		}
 </script>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

DHTML实现简单的windows计算器

分类

网站常用

描述

使用DHTML技术实现的简单windows计算器，界面是简陋了点，不过功能倒是挺可爱，不但可以轻松实现加减乘除运算，还可以实现MC/MR/MS/M+等数字运算功能，本代码在ie8、ff下css有点乱，建议用ie6观看，也请高手修改一下在ie8、ff下显示不正...