<!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. [Ioi2005]River

    设f[i][j][k]表示i上游最近的一个伐木场为j且在i所在的子树里共建了k个伐木场(不包含在i的)的最小运费和 设v为u的儿子,dist[u]为u到0号点的距离. 则当i>=j时 f[u][ ...

  2. redis 扩展安装使用

    Redis的php客户端库非常之多, Redis推荐客户端链接是:http://redis.io/clients 推荐用phpredis,下载地址:https://github.com/nicolas ...

  3. 【HDOJ】4986 Little Pony and Alohomora Part I

    递推.设n个盒子的Spell次数为S(n),期望为E(n).当有n个盒子时,可能第n把钥匙在第n个盒子中,此时的Spell次数应该为(n-1)!+S(n-1):当第n把钥匙不在第n个盒子中,混合排列, ...

  4. （转载）php的类中可以不定义成员变量，直接在构造方法中使用并赋值吗？

    (转载)http://s.yanghao.org/program/viewdetail.php?i=184313 php的类中可以不定义成员变量,直接在构造方法中使用并赋值吗? class block ...

  5. CentOS 6.5 安装realtek RTL8188CE无线网卡

    首先,要检查一下网络适配器的型号. [root@localhost sam]# lspci -nn | grep -i net03:00.0 Ethernet controller [0200]: R ...

  6. 关于group by【转载】

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.G ...

  7. adb devices: no permissions

    现象: #sudo adb root Error:insufficient permissions for device #adb devices List of devices attached ? ...

  8. java创建XML及开源DOM4J的使用

    java import java.io.File; import java.io.StringWriter; import javax.xml.parsers.DocumentBuilder; imp ...

  9. windows下的类似grep命令findstr

    windows下的类似grep命令findstr findstr后面跟的字符串不能加引号 C:\Users\Administrator>netstat -an|findstr 10.1.151 ...

  10. Tomcat中server.xml配置及Context的配置说明

    server.xml配置简介         下面是这个文件中的基本配置信息,更具体的配置信息见tomcat的文档         server:         port     指定一个端口,这个 ...