效果图：

　　

代码：

<!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. Linux下汇编语言学习笔记80 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  2. HDU——1134 Game of Connections

    Game of Connections Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  3. Hadoop2.0安装之非HA版

    主要步骤跟Hadoop1.0(1.0安装地址)一致,主要在配置这块有更改 安装 下载地址:http://archive.apache.org/dist/hadoop/core/hadoop-2.6.5 ...

  4. 非常适合新手的jq/zepto源码分析02

    function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...

  5. Open Flash Chart图表的JSON格式基本属性详解

    http://blog.csdn.net/wangwenhui11/article/details/4283571 数据文件必须是JSON格式.JSON对象的基本格式: {} 把所有对象都编写在{}里 ...

  6. 学习node js 之微信公众帐号接口开发 准备工作

    绪:因工作须要,近期開始学习Node js,之前隐隐约约听到过node js 但没有实际见到过,仅仅好google了:至于什么是node js,能做些什么,有多么好.或者有哪些弊端我这里就不多说了,由 ...

  7. Android从源码看ListView的重用机制

    不管是android还是iOS,列表视图应该是最复杂的控件了.android中的listview从命名能够看出是个一维数组,而iOS中的tableview则是二维数组.但事实上须要注意的地方是差点儿相 ...

  8. C#根据规则生成6位随机码

    #region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...

  9. 机器学习A

    订阅地址 :  http://blog.csdn.net/lizhe_dashuju/rss/list

  10. ALSA声卡驱动中的DAPM详解之三：如何定义各种widget

    上一节中,介绍了DAPM框架中几个重要的数据结构:snd_soc_dapm_widget,snd_soc_dapm_path,snd_soc_dapm_route.其中snd_soc_dapm_pat ...