实现类windows计算器

最新推荐文章于 2023-06-03 10:29:51 发布

SuperBetterMan

最新推荐文章于 2023-06-03 10:29:51 发布

阅读量322

点赞数

分类专栏：数据可视化与前端技术

本文链接：https://blog.csdn.net/SuperBetterMan/article/details/105846146

版权

数据可视化与前端技术专栏收录该内容

15 篇文章 1 订阅

订阅专栏

学习js也有一段时间了，根据要求做了一个简单的计算器
首先我们查看windows计算器是什么样子的
在这里插入图片描述
有了这样一个模板，我们可以先设计好需求

要实现鼠标点击控制
键盘输入控制

在这个基础上我又增加了查看历史记录，和点击变色这两个需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="calculator3.plus.css" type="text/css"  rel="stylesheet" >
    <script src="calculator3.plus.js" type="text/javascript"></script>
</head>
<body>
<div class="top">
    <div class="top-left">window计算器3.0.plus</div>
    <div id="top-right">
        <button title="历史记录" id ='look'></button>
    </div>

</div>

<ul id="keys">
    <input id="inputExp" /><br/>
    <li class="opt">(</li><li class="opt">)</li><li class="opt">C</li><li class="opt">BackSpace</li>
    <li>7</li><li>8</li><li>9</li><li  class="opt">/</li>
    <li>4</li><li>5</li><li>6</li><li  class="opt">*</li>
    <li>1</li><li>2</li><li>3</li><li  class="opt">+</li>
    <li>0</li><li>.</li><li>=</li><li  class="opt">-</li>



</ul>
</body>
</html>

我这里用的是li，当然可以直接button，都是可以的
也可以增加一些数学模块之类，根据大家兴趣

*{margin: 0;padding: 0;list-style-type: none;}
.top{width: 338px;height: 60px;margin: auto;border:  3px #ddd ridge;}
.top-left{float: left;line-height:60px;font-size: 25px;text-align: center;}
#top-right{width:30px;height:60px;float: right;}
#top-right button{width: 30px; height: 60px;background: url("new-look.png");}
#inputExp{width: 320px; height: 50px;font-size: larger;padding: 8px;text-align: right;border: 3px #ddd ridge;}
#keys{width: 344px;margin: auto;}
#keys li{float: left;width: 80px;height: 50px;border: 3px #bbb outset;text-align: center;line-height: 50px;background-color: #eef;}
#key li :hover{background-color: salmon;}
#keys.opt{color: #fe6600; background-color: #f9f9f9;}

onload=init;
keys=['0','1','2','3','4','5','6','7','8','9','\.','\-','\*','\/','\+','=','C']
BgColor=['red','blue','green','yellow']
//定义一个数组来存储历史字符串
var lastNums = [];
function init() {
    var exp = document.getElementById("inputExp");
    exp.value = "";
    // exp.focus();
    //获取所有的li对象数据组
    var liArray = document.getElementsByTagName("li");
    var look =document.getElementById('look');
    //获取所有的li，然后给他们添加点击事件
    function getRandomNumberByRange(start, end) {
        return Math.floor(Math.random() * (end - start) + start)
    }
    look.onclick=function(){
        let allstr=''
        // alert("历史记录第一次"+lastNums[0]);
        // exp.value=lastNums[0];
        for(var i=0; i<lastNums.length;i++){
            let str="历史记录第"+(i+1)+"次:"+lastNums[i]+'\n';
            allstr +=str;
        }alert(allstr);
    }
   
    for (var i = 0; i < liArray.length; i++) {
        let item = liArray[i];//获取所有的li元素，给其添加点击事件
        // let number=Math.random()

        // item.οnmοuseοver=function() {
        //     let num=getRandomNumberByRange(0,4)
        //     this.style.backgroundColor=BgColor[num];
        // }
        // item.οnmοuseοut=function(){
        //     this.style.backgroundColor='#eef';
        // }

        item.onclick = function () {
            exp.focus();
            let num=getRandomNumberByRange(0,4)//注意let的作用域
            this.style.backgroundColor=BgColor[num];
            try {
                if (item.innerHTML == '=') {
                    lastNums.push(exp.value);
                    let result = eval(exp.value);
                    if (!isFinite(result)) {
                        throw "Err1";
                    }
                    exp.value = result;
                } else if (item.innerHTML == 'C') {
                    exp.value = "";
                } else if (item.innerHTML == 'BackSpace') {
                    let str = exp.value;
                    exp.value = str.substring(0, str.length - 1);

                } else {
                    exp.value += item.innerHTML;

                }
            } catch (e) {
                if(e=="Err1"){
                    alert("结果无穷大！");}
                else {
                    alert("你的运算有误：" + exp.value + "\n仔细检查");
                    exp.value = "";
                    exp.focus();
                }
            }
        }

        exp.onkeyup = function () {
            try {
                lastchar = exp.value.charAt(exp.value.length - 1);
                if (lastchar.toUpperCase() == 'C') {
                    exp.value = "";

                }
                if (keys.indexOf(lastchar) == -1) {//如果不是keys不能被打印
                    let str = exp.value;
                    exp.value = str.substring(0, str.length - 1);
                    alert("请输入合法的字符");
                }
                if (lastchar == '=') {
                    let str = exp.value;
                    exp.value = str.substring(0, str.length - 1);
                    let result = eval(exp.value);
                    if (!isFinite(result)) {
                        throw "zeroErr2";
                    }
                    exp.value = result;
                }
            } catch (e) {
                alert("你的运算有误：" + exp.value + "\n仔细检查");
                exp.value = "";
                exp.focus();
            }

        }
    }
}

单击变色，我在注释一部分是实现了鼠标移入移出的效果
在查看历史记录那块，注释的实现了在输入框内查看，有一些查看历史记录的做法是重新跳出一个界面，我这里是用alet去实现的，其想法是把每一次=之前的式子存放在一个数组中，当点击查看历史记录，则触发该事件
在这里插入图片描述

在这里插入图片描述

SuperBetterMan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现类windows计算器

学习js也有一段时间了，根据要求做了一个简单的计算器首先我们查看windows计算器是什么样子的有了这样一个模板，我们可以先设计好需求要实现鼠标点击控制键盘输入控制在这个基础上我又增加了查看历史记录，和点击变色这两个需求<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录