效果图：

　　

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /* Basic Reset */

            * {

                border: none;

                font-family: 'Open Sans', sans-serif;

                margin: ;

                padding: ;

            }

            body {}

            .center {

                background-color: #fff;

                border-radius: %;

                height: 600px;

                margin: auto;

                width: 600px;

            }

            h1 {

                color: #;

                font-size: 30px;

                margin-top: 20px;

                padding-top: 50px;

                display: block;

                text-align: center;

                text-decoration: none;

            }

            a {

                color: #;

                font-size: 30px;

                display: block;

                text-align: center;

                text-decoration: none;

                padding-top: 20px;

            }

            form {

                background-color: #;

                box-shadow: 4px 4px #3d4a65;

                margin: 40px auto;

                padding: 40px  30px 40px;

                width: 280px;

            }

            .btn {

                outline: none;

                cursor: pointer;

                font-size: 20px;

                height: 45px;

                margin: 5px  5px 10px;

                width: 45px;

            }

            .btn:first-child {

                margin: 5px  5px 10px;

            }

            .btn,

            #display,

            form {

                border-radius: 25px;

            }

            #display {

                outline: none;

                background-color: #98d1dc;

                box-shadow: inset 6px 6px 0px #3facc0;

                color: #;

                font-size: 20px;

                height: 47px;

                text-align: right;

                width: 165px;

                padding-right: 10px;

                margin-left: 10px;

            }

            .number {

                background-color: #72778b;

                box-shadow:  5px #5f6680;

                color: #dededc;

            }

            .number:active {

                box-shadow:  2px #5f6680;

                -webkit-transform: translateY(2px);

                -ms-transform: translateY(2px);

                -moz-tranform: translateY(2px);

                transform: translateY(2px);

            }

            .operator {

                background-color: #dededc;

                box-shadow:  5px #bebebe;

                color: #72778b;

            }

            .operator:active {

                box-shadow:  2px #bebebe;

                -webkit-transform: translateY(2px);

                -ms-transform: translateY(2px);

                -moz-tranform: translateY(2px);

                transform: translateY(2px);

            }

            .other {

                background-color: #e3844c;

                box-shadow:  5px #e76a3d;

                color: #dededc;

            }

            .other:active {

                box-shadow:  2px #e76a3d;

                -webkit-transform: translateY(2px);

                -ms-transform: translateY(2px);

                -moz-tranform: translateY(2px);

                transform: translateY(2px);

            }

        </style>

    </head>

    <body>

        <div class="center">

            <h1>HTML CSS, JavaScript 计算器</h1>

            <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>

            <form name="calculator">

                <input type="button" id="clear" class="btn other" value="C">

                <input type="text" id="display">

                <br>

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn operator" value="+" onclick="get(this.value);">

                <br>

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn operator" value="*" onclick="get(this.value);">

                <br>

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn operator" value="-" onclick="get(this.value);">

                <br>

                <input type="button" class="btn number" value="" onclick="get(this.value);">

                <input type="button" class="btn operator" value="." onclick="get(this.value);">

                <input type="button" class="btn operator" value="/" onclick="get(this.value);">

                <input type="button" class="btn other" value="=" onclick="calculates();">

            </form>

        </div>

    </body>

</html>

<script type="text/javascript">

    /* limpa o display */

    document.getElementById("clear").addEventListener("click", function() {

        document.getElementById("display").value = "";

    });

    /* recebe os valores */

    function get(value) {

        document.getElementById("display").value += value;

    }

    /* calcula */

    function calculates() {

        var result = ;

        result = document.getElementById("display").value;

        document.getElementById("display").value = "";

        document.getElementById("display").value = eval(result);

    };

</script>

HTML CSS, JavaScript 计算器的更多相关文章

  1. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  2. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. HTML+CSS+JAVASCRIPT 总结

    1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...

  5. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  6. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  7. MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.

  8. CSS+Javascript的那些框架

    CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Ela ...

  9. 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference

    Preloading images is a great way to improve the user experience. When images are preloaded in the br ...

随机推荐

  1. 一文教你用 Neo4j 快速构建明星关系图谱

    更多有趣项目及代码见于:DesertsX/gulius-projects 前言 本文将带你用 neo4j 快速实现一个明星关系图谱,因为拖延的缘故,正好赶上又一年的4月1日,于是将文中的几个例子顺势改 ...

  2. [bzoj1176]Mokia[CDQ分治]

    啃了一天论文,发现CDQ分治的原理其实很简单,大概就是这样的一类分治:将左右区间按一定规律排序后分开处理,递归到底时直接计算答案,对于一个区间,按照第二关键字split成两个区间,先处理左区间,之后因 ...

  3. java查询MySQL时，MySQL中tinyint长度为1时转换为boolean

    看到别人代码,MySQL数据库中,有下面这个字段,tinyint(1) 这时候java代码中取出来的数据类型就是boolean类型,如果长度 > 1的话,就会变成int类型,特意查了一下,这里参 ...

  4. HDU1530（最大团）

    Given a graph G(V, E), a clique is a sub-graph g(v, e), so that for all vertex pairs v1, v2 in v, th ...

  5. codevs——1530 大质数

    1530 大质数  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小明因为没做作业而被数学老师罚站,之后数学老师 ...

  6. HDU——1267 下沙的沙子有几粒？

    下沙的沙子有几粒? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. W3School Memcached教程（安装/基本操作/高级操作/命令）

    来自W3School的Memcached教程,基本上涵盖了从安装到状态监控的教程. 不过最全的应该是官方提供在GitHub上的Wiki教程,一切的标准都来自官方,参考:https://github.c ...

  8. C/C++异常处理机制

    1.C语言异常处理   1.1 异常终止   标准C库提供了abort()和exit()两个函数,它们可以强行终止程序的运行,其声明处于<stdlib.h>头文件中.这两个函数本身不能检测 ...

  9. jeewx 微信管家 - 举办商业版本号免费试用活动

    jeewx 微信管家 举办商业版本号免费试用活动 1,关注微信账号:jeecg_scott 2.输入:"jeewx商业版本号试用活动: 你的邮箱(比如:zhangsan@11.com)&qu ...

  10. PAT Broken Keyboard (20)

    题目描写叙述 On a broken keyboard, some of the keys are worn out. So when you type some sentences, the cha ...