啊因为懒得去找素材了，所以做了一个仿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！

#js#简单的在线计算器的更多相关文章

  1. js加减乘除在线计算器代码

    js加减乘除在线计算器代码 在线演示本地下载

  2. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  3. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  4. baguetteBox.js - 简单易用的 lightbox 插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示  ...

  5. 基于PHP实现一个简单的在线聊天功能（轮询ajax ）

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  6. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  7. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  9. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

随机推荐

  1. poj2236无线网络

    这一题的大意:在救灾当中需要用网络,这堆人就用笔记本建了一个无线网,但是来,互相通信都是有距离限制的,一台电脑只能和距离他为d的电脑通信,然后一台电脑也可以通过几台电脑搭成线这样通信.然后就是输入每台 ...

  2. [原创]opencv实现图像拼接，制做全景图

     转载请注明:http://www.cnblogs.com/ausk/p/3332255.html    调用opencv2.4.6中的库函数,实现图像的拼接功能,傻瓜式拼接,不需要太多的专业知识.. ...

  3. 四.redis 事务

    redis对事务的支持目前还比较简单.redis只能保证一个client发起的事务中的命令可以连续的执行,而中间不会插入其他client的命令. 由于redis是单线程来处理所有client的请求的所 ...

  4. js正则验证邮箱格式

    首先总结一下邮箱的格式,邮箱由@分隔,左侧为用户名,右侧为邮箱域名,用户名可以由字母.数字._.-以及.组成,但是必须是以字母或数字开头,邮箱的域名是由字母.数字.-和.组成的,但是必须以.加上字母的 ...

  5. 一键搭键php网站环境的系统

    QzzmServer v2.0正式版发布 首先,感谢网友的热情的测评及反馈,现QzzmServer 2.0正式版已发布.有些朋友反馈制作一个服务器专用版本,在下已将此列入计划中,敬请大家耐心等候. Q ...

  6. Linq 结果转成 json

    public string BindGrid(string page,string rows)        {            int pageIndex = 0;            if ...

  7. SQLAlchemy on the way

    SQLAlchemy Trial This is a great ORM ( Object-Relational Mapper ) which is compatible with  xxxx and ...

  8. win7 VS2008 ffmpeg release 版本崩溃 0x00905a4d 处未处理的异常

    这个坑, 我始终不相信编码的问题,但还是花了一上午加各种调试代码.一般加个断点,调试几下就知道是什么问题.在最后找不到解决办法的情况下google了一下,短短几分钟解决了这个问题. 程序都是踩着各种坑 ...

  9. C语言之break和continue

    一 break 和 continue 的介绍 break: 1).跳出当前所在的switch语句(tips:可查看前面 switch 部分)   2).跳出当前所在的循环 continue: 结束本次 ...

  10. 如何成为一名hacker?

    很多人问我如何成为黑客,一般来说我总是会扯一大堆废话,告诉他们要时刻保持好奇心,要学会打破规则挑战权威之类的. 但这类话肯定不是提问者想听的.我揣摩了一下他们的心情,他们想问的应该是这个问题:如何学习 ...