<!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. MySQL笔记--查询语句实践

    有一个用户表,属性为 id,age,buytime 创建表以及插入数据的语句 CREATE TABLE USER( id INT, age INT, buytime INT ) ,,); ,,); , ...

  2. 哟西，CLOUDSTACK第一步，搞定

    安装了N十次,找个RESET SERVER的脚本.

  3. 禁止ultraedit自动检查更新的方法

    菜单栏: 高级->配置->应用程序布局->其他 取消勾选“自动检查更新”

  4. adb Monkey用法

    以这条Monkey指令为例: #monkey -s --throttle -p com.android.cameraswitch -- 这条monkey指令是测试:在camera模块中产生1万次伪随机 ...

  5. WPF: How to use DatePicker in XAML-DataGrid

    https://msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn(v=VS.100).as ...

  6. Docker 初级实践

    Docker 应用 优势 与虚拟相比Docker更加轻量高效,更加方便移植.虚拟机提供的是完整的操作系统环境,包含了大量类似硬件驱动.虚拟处理器.网络接口等等并不需要的信息,也需要比较长时间的启动,同 ...

  7. javascript 属性的特性

    /* 属性的特性: 可以通过调用Object.getOwnPropertyDescriptor()可以获得某个对象特定属性的属性描述符, 从函数名字就可以看出, Object.getOwnProper ...

  8. 什么是IP地址、子网掩码、路由和网关

    什么是IP地址.子网掩码.路由和网关?经常有朋友问我,的确这些术语常常被我们看到,今天就给大伙说说这几个术语的意思: 1.IP地址: IP地址有一个32位的连接地址,由4个8位字段组成,8位字段称为8 ...

  9. 【科研论文】W5100在远程电力质量监测设备中的应用

    摘要: 针对传统电力质量监测方法实时性.多参数测试性能较差的缺点,提出了将以太网接入技术与电能采集相结合进行电力质量现场和远程在线监测的设计方案.硬件设计采用微控制器STM32FI03和以太网控制芯片 ...

  10. [Javascript] JavaScript Array Methods in Depth - push

    Array push is used to add elements to the end of an Array. In this lesson we'll see how the push met ...