效果图：

　　

代码：

<!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. noip模拟赛 enc

    [问题背景]zhx 和他的妹子聊天.[问题描述]考虑一种简单的加密算法.假定所有句子都由小写英文字母构成, 对于每一个字母, 我们将它唯一地映射到另一个字母. 例如考虑映射规则:a->b, b- ...

  2. Uva1103 Ancient Messages

    题意:识别图中的象形文字.但是,图形可以任意的拉伸,但不能拉断. 分析:这种题如果图形没有特征是不可做类型的题,不过观察图形可以发现每个图形中的洞的数量是一定的,我们只需要数出每一个封闭图形的洞数就能 ...

  3. JAVA内存模型与线程以及volatile理解

    Java内存模型是围绕在并发过程中如何处理原子性.可见性.有序性来建立的. 一.主内存与工作内存 Java内存模型主要目标是在虚拟机中将变量存储到内存和从内存中取出变量.这里的变量包括:实例字段.静态 ...

  4. 22、Java并发性和多线程-Java中的读/写锁

    以下内容转自http://ifeve.com/read-write-locks/: 相比Java中的锁(Locks in Java)里Lock实现,读写锁更复杂一些.假设你的程序中涉及到对一些共享资源 ...

  5. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  6. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  7. 2 instances of postgresql but I really need one [closed]

    I happen to have 2 installed instances of postgresql at my machine: 9.1 and 9.2: sudo service postgr ...

  8. 写给小白的JVM学习指南

    Java 虚拟机是学习 Java 的基础,也是迈入高级 Java 开发工程师的必备知识点.所以今天这篇文章我们来聊聊如何从零开始学习 Java 虚拟机. 基础 对于刚刚接触 JVM 的同学来说,JVM ...

  9. Excel 常用快捷键键 快捷方式

    移动整行的位置 Shift + Alt + 鼠标拖拽 不加Shit + Alt 移动后 留白 注意:需要移动鼠标到行的最上面,变成十字箭头

  10. tab不显示为空格