<!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. Scut 进阶：Schema 自动检测

    Scut 在启动时有一个自动根据代码中数据类型检查数据库字段的功能,要如何使用呢? 脚本引擎动态加载 ModelAssembly: ScriptEngine.cs - InitScriptRuntim ...

  2. UITextFiled自动补全输入，选中补全内容。NSRange和UITextRange的相互转换。-b

    有个需求就是 需要用户输入几位以后账号,可以根据本地存储的登录成功的账号,进行自动补全,并且补全内容为选中状态,不影响用户的新输入. 研究了一下,下面是完整的实现的方法. 补充个下载地址http:// ...

  3. hdu GCD and LCM

    题意:gcd(a,b,c)=g; lcm(a,b,c)=l; 求出符合的a,b,c的所有情况有多少中. 思路:l/g=p1^x1*p2^x2*p3^x3.....;   x/g=p1^a1*p2^a2 ...

  4. 利用Tree命令生成磁盘文件列表

    命令原型:D:/>tree /? 以图形显示驱动器或路径的文件夹结构.TREE [drive:][path] [/F] [/A]/F 显示每个文件夹中文件的名称./A 使用 ASCII 字符,而 ...

  5. COJN 0485 800503寻找平面上的极大点

    800503寻找平面上的极大点 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在一个平面上,如果有两个点(x,y),(a,b) ...

  6. （转载）php反射类 ReflectionClass

    (转载)http://hi.baidu.com/daihui98/item/a67dfb8213055dd75f0ec165   php反射类 ReflectionClass 什么是php反射类,可以 ...

  7. 一个强大的LogParser的UI工具--logparserlizard简介(开源IIS日志分析工具)

    原文地址:http://blog.csdn.net/downmoon/article/details/4509513 日志分析,特别是IIS日志,一般人都会想到LogParser工具,的确很强.但是命 ...

  8. 如何获取jqGrid中选择的行的数据

    原文地址:http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id, ...

  9. Intel 英特尔

    英特尔 英特尔 基本资料   公司名称:英特尔(集成电路公司)    外文名称:Intel Corporation(Integrated Electronics Corporation)    总部地 ...

  10. [转]Java Daemon Startup Script

    How to start a Java program as a Linux daemon with an /etc/init.d script. See also: http://www.sourc ...