码迷,mamicode.com
首页 > Windows程序 > 详细

dHTML实现简单的windows计算器

时间:2015-08-12 01:08:01      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>DHTML实现简单的windows计算器丨Daniel wellington官网</TITLE>
    <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>
    </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>Daniel wellington官网</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>
    <br><br><hr>
    

 

dHTML实现简单的windows计算器

标签:

原文地址:http://www.cnblogs.com/youtianxia/p/4722708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!