啊因为懒得去找素材了，所以做了一个仿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. c语言，字符串原地翻转

    实现字符串的原地翻转: #include<stdlib.h> #include<stdio.h> #include<assert.h> #define SWAP(a ...

  2. django restful webservice返回json数据

    做这个demo的前提是你已经配好了python ,django ,djangorestframwork(在我的上一篇博客中有介绍,大家也可以google),mysql-python等. djangor ...

  3. 持续集成环境（Hudson）搭建

    持续集成环境(Hudson)搭建 这是在公司写的,公司要求用英文,我也没时间翻译了.还请见谅! Hudson是个非常强大持续集成工具,配合svn,maven,sonar,redmine工具就更加完美了 ...

  4. MySQL中函数、游标、事件、视图基本应用举例（代码）

    MySQL中function用户自定义函数c,fun,fun是面向过程的实现方式只能传入参数,或不传入参数,不能传出参数,必有返回值函数中是不能有create table drop table之类的语 ...

  5. Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)

    JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式                      (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...

  6. $.each()方法，其实挺不错的

    例子为主 html主要代码 <div class="fl search">厂商:<select id="firms"><optio ...

  7. iOS开发-内存管理

    内存管理 对于这篇呢,其实现在都是ARC模式,正常状态下基本不用我们去手动释放内存,所以如果不是要面试呀.装逼或者扎实功底的,就先别看了或者了解下即可,因为像面试时,有些面试官想看你的基础时,就有些人 ...

  8. 用C++实现的八皇后问题

    我是一个C++初学者,控制台实现了一个八皇后问题. 代码如下: //"八皇后问题"V1.0 //李国良于2017年1月11日编写完成 #include <iostream&g ...

  9. linux面试题集锦《转》

    1. 下面的网络协议中,面向连接的的协议是: A . A 传输控制协议 B 用户数据报协议 C 网际协议 D 网际控制报文协议 2. 在/etc/fstab文件中指定的文件系统加载参数中, D 参数一 ...

  10. 为什么需要DevOps

    过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development) 和运维(Operations)这两个领域的合并.(如 ...