效果图：

　　

代码：

<!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. 交友app

    编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...

  2. Junit4使用总结

    常用注解 @Before:初始化方法,在任何一个测试方法执行之前,必须执行的代码. @After:释放资源,在任何一个测试方法执行之后,需要进行的收尾工作.   @Test:测试方法,表明这是一个测试 ...

  3. python实现汉诺塔算法

    汉诺塔 算法分析 1.步骤1:如果是一个盘子,直接将a柱子上的盘子从a移动到c 否则 2.步骤2:先将A柱子上的n-1个盘子借助C移动到B(图1) 已知函数形参为hanoi(n,a,b,c),这里调用 ...

  4. .NET跨平台 - WCF & Mono

    让WCF运行在Linux上(寄宿于服务器程序) WCF介绍请自行 bing 搜索 使用的开发工具为vs2017,系统为 Ubuntu16.04 服务器软件为Jexus ( 详情请看:  Jexus官网 ...

  5. 战术网络安全检查表 | Symantec Connect

    "知己知彼,百战不殆: 不知彼而知己,一胜一负: 不知彼,不知己,每战必殆." 孙子(中国古代军事家). 孙子的话在今日仍能够使我们产生共鸣. 机构只有了解敌人和自己优缺点才能在持 ...

  6. Hadoop生态系统学习路线

    主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...

  7. iOS开发-植入广告(iAd, Admob实例)

    应用中植入广告是一种非常好的盈利手段. 以下介绍主流的两种方法.iAd, Admob 先mark一个非常具体的pdf.   http://pan.baidu.com/share/link?sharei ...

  8. js 里面的 function 与 Function

    function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1.new function 与 new Function 的区别 new 运算符在 js 里面是 创建一个自定 ...

  9. 字节数组byte[]和整型,浮点型数据的转换——Java代码

    近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1.       整数和浮点数的机器表示 在机器内部.不 ...

  10. 让DIV在屏幕上下左右居中

    转自:http://blog.sina.com.cn/s/blog_65d41dff0100v0iz.html 其实解决的思路是这样的:首们需要position:absolute;绝对定位.而层的定位 ...