啊因为懒得去找素材了，所以做了一个仿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. A2D规则引擎

    A2D规则引擎 写了个简单的规则引擎,普通情况够用了: 比如2家公司有各自的利率计算规则,如下: 在C#方面,没有写在C#的业务逻辑代码中,而是移到了外部规则文件中,如(ACompanyRatePol ...

  2. Redis安装介绍

    Redis安装介绍 一.Linux版本及配置 1.  Linux版本:Red Hat Enterprise Linux 6虚拟机 2.  配置: 内存:1G:CPU:1核:硬盘:20G 二.Redis ...

  3. 利用servicestack连接redis

    利用servicestack连接redis 引言:作为少有的.net架构下的大型网站,stackoverflow今日发表了一篇文章,介绍了其技术体系,原文链接http://highscalabilit ...

  4. javascript中的promise和deferred：实践（二）

    javascript中的promise和deferred:实践(二) 介绍: 在第一节呢,我花了大量的时间来介绍promises和deferreds的理论.现在呢,我们来看看jquery中的promi ...

  5. Sqlite in Android

    在Android上保存本地数据有三种方式,SharedPreferences.Files和Sqlite.SharedPreferences主要是用来保存键值对形式的程序配置信息,与ini.proper ...

  6. 超详细LAMP环境搭建

    一.准备工作 1.安装编译工具gcc.gcc-c++ 注意解决依赖关系,推荐使用yum安装,若不能联网可使用安装光盘做为yum源—— 1)编辑yum配置文件: # mount /dev/cdrom / ...

  7. .NET对象占内存多少

    .NET对象占内存多少 一直有一个小小的疑惑——.NET一个对象或者一个集合占多少内存?有没有很快速的方法获取,而不是简单的估计分析对象大小? 查了MSDN,和一些其他人的分析,得到解决是托管代码对象 ...

  8. hdu 1253 胜利大逃亡（BFS）

    题目链接:点击链接 三维的BFS,刚开始一直超内存,超无语......  改了n多次终于AC了 #include <iostream> #include <stdio.h> # ...

  9. JavaScript中null和undefined

    JavaScript的数据类型大体分为两类:原始类型和对象类型.其中,原始类型包括数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null(空)和undefined(未定义), ...

  10. Web 请求响应原理(转)

    用Java实现Web服务器 减小字体 增大字体 摘要:WWW的工作基于客户机/服务器计算模型,由Web 浏览器(客户机)和Web服务器(服务器)构成,两者之间采用超文本传送协议(HTTP)进行通信,H ...