前端简易计算器(原生js实现）

前端网页简易计算器

首先我们做这个项目之前要会js简单的鼠标和键盘事件的操作
1.首先是鼠标事件(mousedown)鼠标按下事件

box.addEventListener("mousedown",function(e)
鼠标移动事件(mousemove)

document.addEventListener("mousemove",move)
鼠标弹起事件(mouseup)

document.addEventListener("mouseup",function()
键盘事件：
键盘按下事件(keyup)

document.addEventListener("keyup",function(e)
我们会了上面这些简单事件我们就可以基本上可以做出个七七八八出来了

滑动效果:

let box = document.querySelector(".box");

        box.addEventListener("mousedown",function(e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            // console.log(x);
            // console.log(y);
            document.addEventListener("mousemove",move);
            function move(e){
                box.style.left = e.pageX-x+'px';//box每次移动的距离
                box.style.top = e.pageY-y+'px';
                
            }
            document.addEventListener("mouseup",function(){//鼠标弹起
            document.removeEventListener("mousemove",move);
        })
        })

主要是拖拽鼠标滑动计算器效果

下面来操作点击所实现的效果:

var tr = document.querySelectorAll("tr");

        for(var i=0;i<tr.length-1;i++){
            tr[i].addEventListener("mousemove",function(e){
            e.target.style.backgroundColor = "rgb(246,246,300)";
        })
        }
        for(var i=0;i<tr.length-1;i++){
            tr[i].addEventListener("mouseout",function(e){
            e.target.style.backgroundColor = "rgb(243,243,243)";
        })
        }
        document.querySelector(".CE").addEventListener("click",function(){
            res.innerHTML="0";
            str="";
        })
        document.querySelector(".C").addEventListener("click",function(){
            res.innerHTML="0";
            str="";
        })
        var res = document.querySelector(".search p");
        var str = "";
        for(var i = 2;i<tr.length-1;i++){
            tr[i].addEventListener("click",function(e){
                res.innerHTML="";
                str +=e.target.innerHTML;
                res.innerHTML = str;
            })
        }
        var tr_end = document.querySelector(".end");
        tr_end.addEventListener("click",function(e){
            res.innerHTML="";
                str +=e.target.innerHTML;
                res.innerHTML = str;
        });
        document.querySelector(".remainder").addEventListener("click",function(e){
            res.innerHTML="";
                str +=e.target.innerHTML;
                res.innerHTML = str;
        })
        document.querySelector(".dev").addEventListener("click",function(e){
            res.innerHTML="";
                str +=e.target.innerHTML;
                res.innerHTML = str;
        })
        document.querySelector(".sup").addEventListener("click",function(){
            res.innerHTML = Math.pow(Number(res.innerHTML),2);
        });
        document.querySelector(".factorial").addEventListener("click",function(){
            res.innerHTML = fun(Number(res.innerHTML));
        })
          fun =(n)=>{
            // console.log(n);
            if(n==0){
                return 0;
            }
            if(n==1){
                return 1;
            }
            return fun(n-1)*n;
        }
        var mask = document.querySelector(".mask");
        mask.addEventListener("click",function(){
            res.innerHTML = eval(res.innerHTML);
            str = "";
        });
        document.querySelector(".remove").addEventListener("click",function(){
            s = res.innerHTML;
            if(res.length==1||s.length==1){
                res.innerHTML="0";
            }else{
                res.innerHTML = s.substring(0,s.length-1);
            }
            str = res.innerHTML;
        })

最后是键盘模拟鼠标点击:

document.addEventListener("keyup",function(e){

            // console.log(e.key);
            if(e.key==1){
                document.querySelector(".one").click();
            }
            if(e.key==2){
                document.querySelector(".two").click();
            }
            if(e.key==3){
                document.querySelector(".Three").click();
            }
            if(e.key==4){
                document.querySelector(".four").click();
            }