zoukankan      html  css  js  c++  java
  • js实现计算器效果

    <!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>

    效果图:

  • 相关阅读:
    MyBatis基础面试题
    MyBatis面试题
    Spring MVC @RequestBody自动转JSON HTTP415错误解决方法
    【GDKOI 2016】地图 map 类插头DP
    【Codechef FRBSUM】【FJOI2016】【BZOJ4299】【BZOJ 4408】 可持久化线段树
    【NOI2005】聪聪和可可 概率与期望 记忆化搜索
    【bzoj 1076】【SCOI2008】奖励关
    BZOJ 1009 HNOI 2008 GT考试 递推+矩乘
    BZOJ 3809 Gty的二逼妹子序列
    BZOJ 2821作诗(Poetize) 分块
  • 原文地址:https://www.cnblogs.com/heyiming/p/6872310.html
Copyright © 2011-2022 走看看