啊因为懒得去找素材了，所以做了一个仿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. django 创建一个通用视图

    创建一个通用视图   抽取出我们代码中共性的东西是一个很好的编程习惯. 比如,像以下的两个Python函数:     def say_hello(person_name): print 'Hello, ...

  2. journaling保证意外故障下的数据完整性

    mongoDB研究笔记:journaling保证意外故障下的数据完整性   mongoDB的Journaling日志功能与常见的log日志是不一样的,mongoDB也有log日志,它只是简单记录了数据 ...

  3. 广播，多播，IGMP：网际组管理协议

    广播,多播,IGMP:网际组管理协议 1.概述      IP有三种地址:单播地址, 广播地址,多播地址.      广播和多播仅应用于UDP.      每个以太网帧包含源主机和目的主机的以太网地址 ...

  4. 使用Struts2实现文件的上传和下载

    (一)单个文件的上传步骤: 1.拷贝jar包:commons-fileupload.jar,  commons-io.jar 下载链接(文件上传.rar):http://www.cnblogs.com ...

  5. JSP实现页面跳转的方式

    js实现页面跳转的几种方式普通方式 第一种: <script language="javascript" type="text/javascript"&g ...

  6. Android屏幕相关设置

    锁屏设置: 1. 初始值 : <integer name="def_screen_off_timeout">60000</integer> 2. 数据库/d ...

  7. Dockerfile与Docker构建流程解读

    摘要 本文主要讨论了对docker build的源码流程进行了梳理和解读,并分享了在制作Dockerfile过程中的一些实践经验,包括如何调试.优化和build中的一些要点.另外,还针对现有Docke ...

  8. git 本地给远程仓库创建分支 三步法

    命令如下: 1:本地创建分支dev Peg@PEG-PC /D/home/myself/Symfony (master) $ git branch dev 2:下面是把本地分支提交到远程仓库 Peg@ ...

  9. Python中的各种装饰器详解

    Python装饰器,分两部分,一是装饰器本身的定义,一是被装饰器对象的定义. 一.函数式装饰器:装饰器本身是一个函数. 1.装饰函数:被装饰对象是一个函数 [1]装饰器无参数: a.被装饰对象无参数: ...

  10. 瑶瑶GBK好的,UTF-8卡死

    请求地址: 开发环境核心 esb : http://10.15.22.120:8866/0203000007/EmpAndDptRelateInfoSync/V1 用gbk可以马上返回. 用utf-8 ...