HTML 写一个计算器

html 复制代码
<!DOCTYPE html>
<html>
<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);
                    console.log(oResult);
                    oShow.innerHTML = oResult==undefined?'0':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>
</body>
</html>
相关推荐
浪裡遊27 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录2 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee2 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo2 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价2 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae
veminhe3 小时前
html怎么设置html5
html·html5
AA-代码批发V哥4 小时前
HTML之表单结构全解析
前端·html
weixin-a1530030831613 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
青皮桔16 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺16 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5