<!doctype html>

<html>

    <head>

        <title>计算器</title>

        <meta charset="utf-8">

        <script type="text/javascript">

            //参数e用来接收传入的event事件

            function cal(e){

                //1.获取事件源，只处理button事件

                //浏览器兼容性

                var obj=e.srcElement || e.target;

                if(obj.nodeName != "INPUT"){

                    return;

                }

                var value=obj.value;

                var p=document.getElementById("screen");

                if(value == "C"){

                    //2.如果是[C],清空p

                    p.innerText="";

                }else if(value == "="){

                    //3.如果是[=],则运算

                    try{

                        var sum=parseFloat(eval("("+p.innerText+")")).toFixed(8);

                        p.innerText=sum;

                    }catch(e){

                        //发生异常,给予错误提示

                        p.innerText="Err";

                    }

                }else{

                    //4.其他将value追加到p中

                   p.innerText=p.innerText+value;

                }

            }

        </script>

        <style type="text/css">

            .panel{

                border: 3px solid #ccc;

                width: 160px;

                margin: 150px auto;

            }

            p{

                border: 1px solid #ccc;

                height: 28px;

                width: 70%;

                margin: 5px 3px;

                line-height: 28px;

                font-family: '微软雅黑','文泉驿正体','黑体';

            }

            input{

                display: block;

                width: 30px;

                height: 30px;

                margin: 5px 5px;

                background-color: #ccc;

                border: 0;

                float: left;

            }

            p{

                display: block;

                float: left;

            }

        </style>

    </head>

    <body>

        <div class="panel" onclick="cal(event);">

            <div class="display">

                <p id="screen"></p>

                <input type="button" value="C">

                <!--此div用来消除浮动影响,设置为不可见-->

                <div style="border:0;clear:left;"></div>

            </div>

            <div class="opreator">

                <input type="button" value="7">

                <input type="button" value="8">

                <input type="button" value="9">

                <input type="button" value="/">

                <input type="button" value="4">

                <input type="button" value="5">

                <input type="button" value="6">

                <input type="button" value="*">

                <input type="button" value="1">

                <input type="button" value="2">

                <input type="button" value="3">

                <input type="button" value="-">

                <input type="button" value="0">

                <input type="button" value=".">

                <input type="button" value="=">

                <input type="button" value="+">

                <!--此div用来消除浮动影响,设置为不可见-->

                <div style="border:0;clear:left;"></div>

            </div>

        </div>

    </body>

</html>

JS+CSS+HTML简单计算器的更多相关文章

  1. js css 实现简单的计算器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS CSS 网页 简单 右侧 悬浮

    <!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(thi ...

  3. js+css制作简单的轮播图带有定时功能

    用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. js实现一个简单计算器

    代码如下,仅支持webkit <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  5. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  6. js实现简单计算器

    效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html><html><head> < ...

  7. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  8. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 前端自动化之babel本地化安装

    npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...

  2. Linux内核实现多路镜像流量聚合和复制

    Linux内核实现多路镜像流量聚合和复制: http://www.freebuf.com/tools/44308.html

  3. at命令

    在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...

  4. 5. c++ 内存管理 C/C++ 内存机制

    参考自:http://blog.csdn.net/wpf_ml/article/details/7759911 1. 内存,Cache,寄存器内存:通常计算机将数据存放在物理内存,cache及寄存器中 ...

  5. C# 将数据集以excel的形式输出

    private void SaveLastMonthAuthorPays()        {            string fileName = "LastMonthAuthorPa ...

  6. POJ 2718 穷举

    题意:给定一组数字,如0, 1, 2, 4, 6, 7,用这些数字组成两个数,并使这两个数之差最小.求这个最小差.在这个例子上,就是204和176,差为28. 分析:首先可以想到,这两个数必定是用各一 ...

  7. 在SQL中使用自定义函数

      由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并 ...

  8. Object -C NSValue -- 笔记

    // //  main.m //  NSValue // //  Created by facial on 26/8/15. //  Copyright (c) 2015 facial_huo. Al ...

  9. BitmapFactory.decodeByteArray() 返回null，分析与解决

    问题描述:用android自带的Camera获取图片,上传至远程数据库中(mysql),以BLOB格式存储, 但在提取图片时,始终无法在android界面显示,示例代码如下: .....  .... ...

  10. JDKSDK配置

    变量名:ANDROID_HOME     变量值: E:\android-sdk_r11-windows\android-sdk_r11-windowsclsspath .;%JAVA_HOME%\l ...