<!DOCTYPE html>

<html>

<!--

Created using jsbin.com

Source can be edited via http://jsbin.com/acurec/123/edit

-->

<head>

    <meta charset=utf-8 />

    <title>Calculator</title>

    <style id="jsbin-css">

        div,span{

            margin:0;padding:0;

            font-weight:bold;

            font: bold 16px Arial, sans-serif;

            /*禁止选中文本*/

            -moz-user-select:none;

            -webkit-user-select:none;

            -o-user-select:none;

            user-select:none;

        }

        body{

            background:radial-gradient(circle,#fff,#aaa);

            background:-webkit-radial-gradient(circle,#fff,#aaa);

            background:-o-radial-gradient(circle,#fff,#aaa);

            background:-moz-radial-gradient(circle,#fff,#aaa);

            background-size:cover;

        }

        #calculator{

            width:325px;

            height:auto;

            margin:100px auto;

            padding:20px;

            background:linear-gradient(#9dd2ea, #8bceec);

            background:-o-linear-gradient(#9dd2ea, #8bceec);

            background:-webkit-linear-gradient(#9dd2ea, #8bceec);

            background:-moz-linear-gradient(#9dd2ea, #8bceec);

            border-radius:5px;

            box-shadow:0 7px 8px #0000ff

        }

        .keys,.head{overflow:hidden;}

        .keys span,.clear{

            float:left;

            width:66px;

            height:40px;

            margin:0 5px 10px 8px;

            text-align:center;

            line-height:40px;

            border-radius:3px;

            background:#eee;

            box-shadow:0 5px 1px #999;

            cursor:pointer;

            transition:all 0.3s ease;

        }

        .keys span:hover{

            background:#87cefa;

            box-shadow:0 5px 1px #1e90ff;

            color:#fff;

        }

        .keys .sign{

            background:#fffacd;

        }

        .clear{

            float:left;

            background:#ffb6c1;

            box-shadow:0 5px 1px #ff86c1;

        }

        .clear:hover{

            background:#ff96a1;

            box-shadow:0 5px 1px #ff4691;

            color:#fff;

        }

        .show{

            width:213px;

            height:40px;

            float:right;

            margin:0 16px 5px 0;

            border-radius:3px;

            background:#999;

            font-size:20px;

            line-height:40px;

            text-align:right;

            padding-right:10px;

            box-shadow:inset 0 4px 5px #333;

        }

    </style>

</head>

<body>

<div id="calculator">

    <div class="head">

        <span class="clear">c</span>

        <div class="show"></div>

    </div>

    <div class="keys">

        <span>7</span>

        <span>8</span>

        <span>9</span>

        <span class="sign">+</span>

        <span>4</span>

        <span>5</span>

        <span>6</span>

        <span class="sign">-</span>

        <span>1</span>

        <span>2</span>

        <span>3</span>

        <span class="sign">*</span>

        <span>0</span>

        <span>.</span>

        <span>=</span>

        <span class="sign">/</span>

    </div>

</div>

<script>

    window.onload=function()

    {

        var oShow=getByClass("calculator","show")[0];

        var aNum=document.getElementById("calculator").getElementsByTagName("span");

        for(var i=0,iLen=aNum.length;i<iLen;i++)

        {

            aNum[i].onclick=function()

            {

                var oShowVal=oShow.innerHTML;

                var oNumVal=this.innerHTML;

                var num1,num2=null;

                num1=oShowVal;

//判断按键

                if(oNumVal=="c")

                {

                    oShow.innerHTML="";

                }

                else if(oNumVal=="=")

                {

                    var oResult=eval(oShowVal);

                    oShow.innerHTML=oResult;

                }

                else

                {

                    oShow.innerHTML+=oNumVal;

                }

            }

        }

    }

    function getByClass(root,sClass)

    {

        var obj=document.getElementById(root);

        var arr=[];

        var aItems=obj.getElementsByTagName("*");

        for(var i=0;i<aItems.length;i++)

        {

            if(aItems[i].className==sClass)

            {

                arr.push(aItems[i]);

            }

        }

        return arr;

    }

</script>

效果图：

js实现计算器效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  7. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  9. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

随机推荐

  1. Email 发送

    namespace 99999 { /// <summary> /// Common interfaces to connect mail server to process e-mail ...

  2. [转] Linux多线程编程之pthread

    转载出处:https://blog.csdn.net/skyroben/article/details/72793409 1.背景知识 Linux没有真正意义上的线程,它的实现是由进程来模拟,所以属于 ...

  3. [BZOJ4011][HNOI2015]落忆枫音：拓扑排序+容斥原理

    分析 又是一个有故事的题目背景.作为玩过原作的人,看题目背景都快看哭了ToT.强烈安利本境系列,话说SP-time的新作要咕到什么时候啊. 好像扯远了嘛不管了. 一句话题意就是求一个DAG再加上一条有 ...

  4. Zookeeper选举机制(转)

    源:http://blog.csdn.net/tototuzuoquan/article/details/54426684 1.Zookeeper选举机制 Zookeeper虽然在配置文件中并没有指定 ...

  5. vue php实战项目开发（一）

    说在前面 项目开发过程中一直在学习,所以记录的过程可能比较乱,打算前台使用vue,后台使用php开发手机端的项目,这里记录遇到的问题和学习的过程 phpstudy环境下搭建虚拟域名,并开启URL重写 ...

  6. Linux下用jar命令更新jar包文件

    jar -uvf SDK_Web_ChartReport.war  view/global/header.jsp echo '样式文件替换进包中'   查看jar包中的文件: jar -tvf SDK ...

  7. qemu-kvm: unable to map backing store for guest RAM: Cannot allocate memory

    当给 KVM 虚拟机设置 hugepage 时,需要在虚拟机的配置文件里加上下面一段: <memoryBacking> <hugepages/></memoryBacki ...

  8. leetcode-easy-array-283 move zeros

    mycode  77.24% class Solution(object): def moveZeroes(self, nums): """ :type nums: Li ...

  9. system系统调用返回值判断命令是否执行成功

    system函数对返回值的处理,涉及3个阶段: 阶段1:创建子进程等准备工作.如果失败,返回-1. 阶段2:调用/bin/sh拉起shell脚本,如果拉起失败或者shell未正常执行结束(参见备注1) ...

  10. NIO组件之channel

    Java NIO指的是new IO ,相对OIO,也称non-blocking IO,对应四种基本IO类型中的IO多路复用,主要有有三大核心组件,Channel(管道),Buffer(缓冲区),sel ...