#js#简单的在线计算器

啊因为懒得去找素材了，所以做了一个仿win10计算器的灰白色计算器。

参考：http://www.html5tricks.com/jquery-calculator.html

HTML源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Caluculator</title>
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="js/script.js"></script>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<body>
    <div id="counter">
        <h3>在线计算器</h3>
        <input type="text" value="0" id="inputFrame"/>
        <ul>
            <li>7</li><li>8</li><li>9</li><li class="order">+</li>
            <li>4</li><li>5</li><li>6</li><li class="order">-</li>
            <li>1</li><li>2</li><li>3</li><li class="order">×</li>
            <li>0</li><li>C</li><li>=</li><li class="order">÷</li>
        </ul>
    </div>
</body>
</html>

JS源码：

window.onload=function(){
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onmousedown=doInput;
        lis[i].onmouseover=function(){
            this.className="active";
        }
        lis[i].onmouseout=function(){
            this.className="";
        }
    }
}

var refresh=false;
var sum='0';
var preOrder='';

function cal(a,b,order){
    var res=0;
    if(order=='+'){
        res=a+b;
    }
    else if(order=='-'){
        res=a-b;
    }
    else if(order=='×'){
        res=a*b;
    }
    else if(order=='÷'){
        res=a/b;
    }
    else{
        res=b;
    }
    return res;
}

function doInput(){
    var oInput=document.getElementById("inputFrame");
    var iHTML=this.innerHTML;
    
    if(iHTML=='='){
        oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
        refresh=true;
        sum='0';
        preOrder='';
    }
    else if(iHTML=='+'||iHTML=='-'||iHTML=='×'||iHTML=='÷'){
        oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
        refresh=true;
        sum=oInput.value;
        preOrder=iHTML;
    }
    else if(iHTML=='C'){
        oInput.value='0';
        sum='0';
        preOrder='';
    }
    else{
        if(refresh){
            oInput.value=parseInt(iHTML);
            refresh=false;
        }
        else{
            oInput.value=parseInt(oInput.value+iHTML);
        }
    }
}

CSS源码：

@charset "UTF-8";

/* reset.css */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
    margin: 0;
    padding: 0;
}
body{
    font-size: 12px;
}
img{
    border: none;
}
li{
    list-style: none;
}
input,select,textarea{
    outline: none;
    border: none;
}
textarea{
    resize: none;
}
a{
    text-decoration: none;
    color: #656565;
}
/* 清除浮动 */
.clearfix:after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}
/* 设置浮动 */
.fl{
    float: left;
}
.fr{
    float: right;
}

/*************************************************************/

/* main.css */
#counter{
    width: 500px; 
    height: 420px; 
    margin: 50px auto; 
    position: relative;
    border: #cfcfcf solid 1px;
}
#counter h3{
    margin:10px 0 0 10px;
    width: 490px;
    height: 30px;
    font-size: 23px;
    /* font-weight: bold; */
}
#counter input{
    width: 490px;
    height: 99px;
    line-height: 99px;
    padding-right: 10px;
    font-size: 40px;
    font-weight: bold;
    text-align: right;
    border-bottom: #cfcfcf solid 1px;
}
#counter ul{
    width: 500px;
    height: 280px;
}
#counter li{
    float: left;
    width: 125px;
    height: 70px;
    line-height: 70px;
    background-color: #e6e6e6;
    /* font-weight: bold; */
    font-size: 30px;
    text-align: center;
}
#counter .active{
    background-color: #cfcfcf;
}

PS：以后这个博客应该不会写ACM的东西了，今年寒假和暑假撸了一下前端，算是入了门吧。也想告别过去一年的ACM生涯了，感觉自己的天赋真的不够，甚至努力程度也不够，兴趣过了之后只觉烦躁，而且不想以后的假期都耗在环境恶劣的学校宿舍，所以打算放弃了。打算开始体验一下后端开发！Kadima！

posted @ 2016-08-30 18:10  &ATM  阅读(759)  评论(0)  编辑  收藏  举报
……