前端简易计算器(原生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();
                }
                if(e.key==5){
                    document.querySelector(".Five").click();
                }
                if(e.key==6){
                    document.querySelector(".Six").click();
                }
                if(e.key==7){
                    document.querySelector(".Seven").click();
                }
                if(e.key==8){
                    document.querySelector(".Eight").click();
                }
                if(e.key==9){
                    document.querySelector(".Nine").click();
                }
                if(e.key=="Enter"){
                    document.querySelector(".mask").click();
                }
                if(e.key=="+"){
                    document.querySelector(".add").click();
                }
                if(e.key=="-"){
                    document.querySelector(".sub").click();
                }
                if(e.key=="*"){
                    document.querySelector(".mul").click();
                }
                if(e.key=="/"){
                    document.querySelector(".dev").click();
                }
                if(e.key=="Backspace"){
                    document.querySelector(".remove").click();
                }
            })