<!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. WebApp之Meta标签 （关闭自动识别数字为电话号码或邮箱之类）

    iPhone上的Safari(还有些webkit android手机浏览器)会自动对看起来像是电话号码的数字串(包括已经加入连字符或括号格式化过的)添加电话链接,点击之后会询问用户是否想要拨打该号码. ...

  2. KEIL C51之绝对地址定位

    单片机空间分配看*.M51文件,ARM,DSP空间分配看*.map文件 1.函数定位 假如要把C源文件 tools.c 中的函数 int BIN2HEX(int xx) { ... } 放在CODE ...

  3. OpenRisc-47-or1200的WB模块分析

    引言 “善妖善老,善始善终”,说的是无论什么事情要从有头有尾,别三分钟热度. 对于or1200的流水线来说,MA阶段是最后一个阶段,也是整条流水线的收尾阶段,负责战场的清扫工作.比如,把运算指令的运算 ...

  4. 用SQL替换最后一个指定字符后面的所有字符

    下面给出任意字符串,该字符串长度未定,只知道该字符串有许多个‘-’连接起来的,现在要把最后一个‘-’后面的字符替换掉为指定串. 假如字符串为:'x1253-axebx-xcdx-o9kgl-3ddll ...

  5. Android新浪微博客户端（六）——Home界面的ListView

    原文出自:方杰|http://fangjie.info/?p=184转载请注明出处 最终效果演示:http://fangjie.info/?page_id=54该项目代码已经放到github:http ...

  6. has-a关系——包含对象成员的类

    #ifndef _STUDENT_H_ #define _STUDENT_H_ #include <iostream> #include <string> #include & ...

  7. 基本 vi 命令

    前言 本文内容翻译 Basic vi Command, Colorado State University, 翻译原文的大部分内容. 本文介绍的是 UNIX 下的 vi 编辑器,和 Linux 下常用 ...

  8. 【笔试&面试】C#的托管代码与非托管代码

    1. C#中的托管代码是什么? 答:托管代码(ManagedCode)实际上就是中间语言(IL)代码.代码编写完毕后进行编译,此时编译器把代码编译成中间语言(IL),而不是能直接在你的电脑上运行的机器 ...

  9. 使用javascript判断浏览器类型

    之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...

  10. Bloom Filter概念和原理

    Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合.Bloom Filter的这种高效是有一定代价的:在判断一个元素是否属于某 ...