效果图：

　　

代码：

<!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. git常见操作---由简入深

    常用命令 常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p 创建目录,若无父目录,则创建p( ...

  2. -sql语句练习50题(Mysql学习练习版)

    –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_id) – –课 ...

  3. java多线程编程核心技术（一）--多线程技能

    1.进程和线程的概念 1.进程:进程是操作系统的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在一个数据集合上运行的过程,他是系统进行资源分配和调度的一个独立单位. ...

  4. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

  5. codevs——1436 孪生素数 2

    1436 孪生素数 2  时间限制: 2 s  空间限制: 1000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 如m=100,n=6 则将输出100 ...

  6. ScrollView双击图片定点放大

    直接先说原理吧--原理:利用了scrollview的回调函数(如下)以及scrollview自己内部的一些缩放规则(其实我也还没弄清楚具体scrollview干了什么事),只是知道了它可以怎么做-_- ...

  7. Tomcat配置文件server.xml（转）

    前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...

  8. CHAPTER 1 Architectural Overview of Oracle Database 11g

    Which SGA structures are required, and which are optional? The database buffer cache, log buffer, an ...

  9. fibonacci数列的题目——剑指Offer

    https://www.nowcoder.net/practice/c6c7742f5ba7442aada113136ddea0c3?tpId=13&tqId=11160&tPage= ...

  10. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...