啊因为懒得去找素材了，所以做了一个仿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#对html的操作

    1,获取相对路径的html然后保存到本地路径 /// <summary> /// Html方法 /// </summary> /// <returns></r ...

  2. 利用ie的behavior属性兼容css3的一些属性

    behavior是从Internet Explorer 5开始引入的,是一种通过使用 CSS 向 HTML 元素添加行为的方法. 但是只有 Internet Explorer 支持 behavior ...

  3. 大数据应用日志采集之Scribe 安装配置指南

    大数据应用日志采集之Scribe 安装配置指南 大数据应用日志采集之Scribe 安装配置指南 1.概述 Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它 ...

  4. Google论文之三----MapReduce

    Google论文之三----MapReduce MapReduce:大型集群上的简单数据处理 摘要 MapReduce是一个设计模型,也是一个处理和产生海量数据的一个相关实现.用户指定一个用于处理一个 ...

  5. Winform 单实例运行

    Winform 单实例运行 前言 前两天在博客园看到<如何防止程序多次运行>,文章写的很好,最后还留下一个问题给我们思考.关于Winform的防止多次运行,曾经也想研究过,但是后来工作上没 ...

  6. 三千万数据量下redis2.4的一统计情况

    先说一下工作场景,要求做一个服务,满足:处理千万级别数据,单个请求响应时间在20ms以下.由于是存储的数据格式为key:list[],所以很适合使用redis来存放数据,为了测试一下redis存储的效 ...

  7. Linux设备驱动开发详解-Note(11)--- Linux 文件系统与设备文件系统(3)

    Linux 文件系统与设备文件系统(3) 成于坚持,败于止步 sysfs 文件系统与 Linux 设备模型 1．sysfs 文件系统 Linux 2.6 内核引入了 sysfs 文件系统,sysfs ...

  8. Springboot 入门之Hello World

    首先使用maven进行包加载和配置,但是你maven一定要配置好,maven的setting.xml文件一定要配置好,不然jar包加载不了的. <project xmlns="http ...

  9. Java之路——Java初接触

    本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...

  10. Java排序方法sort的使用详解

    对数组的排序: //对数组排序 public void arraySort(){ int[] arr = {1,4,6,333,8,2}; Arrays.sort(arr);//使用java.util ...