前端<canvas>实现画板功能

效果图

```javascript

<html lang="en"><head>

        <meta charset="UTF-8">

        <title>画板</title>

        <style>

                body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff;-webkit-user-select: none; 

  -moz-user-select:none; 

  -o-user-select:none; 

  -ms-user-select:none; }

                li{ list-style-type: none; }

                ul{ padding-left: 10px }

                h1{

                    position:fixed;

                    left:15px;

                    top:5px;

                    width:250px;

                    height:60px;

                    color: #ff5e83;

                    font-size:26px;

                    line-height:60px;

                    text-align:center;

                    background-color:;

                }

                canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }

                .container{

                    width:250px;

                    height:60px;

                    position:fixed;

                    left:15px;

                    top:70px;

                }

                .container h2{

                    width:100%;

                    height:60px;

                    font-size:22px;

                    text-align:center;

                    color: #ff377e;

                    font-weight:normal;

                    line-height:60px;

                    border-bottom:1px solid #000;

                }

                .container h3{

                    width:100%;

                    height:30px;

                    font-size:18px;

                    text-align:center;

                    color: #41b1ff;

                    font-weight:normal;

                    line-height:30px;

                }

                .row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden;        }

                .type{

                    width:100%;

                    height:auto;

                    margin:20px 0;

                    padding-bottom:10px;

                    border-bottom:1px solid #fff;

                }

                .type:after{

                    content:"";

                    display:block;

                    clear:both;

                }

                .type li{

                    float:left;

                    width:90px;

                    height:45px;

                    margin:0 auto;

                    background-color:#0078ff;

                    color:#fff;

                    font-size:18px;

                    line-height:45px;

                    text-align:center;

                    margin-bottom:15px;

                    border-radius:5px;

                    cursor:pointer;

                    transition:all 0.7s;

                }

                .type li:hover{

                    background-color:#fff;

                    color:#0078ff;

                    box-shadow:0 0 10px rgba(0, 120, 255, 0.77);

                }

                .type .typeactive{

                    background-color:#fff;

                    color:#0078ff;

                    box-shadow:0 0 10px rgba(0, 120, 255, 0.77);

                }

                .type li:nth-child(odd){

                    margin-left:25px;

                }

                .type li:nth-child(even){

                    margin-left:20px;

                }

                .style{

                    width:100%;

                    height:40px;

                }

                .style li{

                    float:left;

                    width:90px;

                    height:45px;

                    background-color:#FFBC00;

                    color:#fff;

                    font-size:18px;

                    line-height:45px;

                    text-align:center;

                    border-radius:5px;

                    cursor:pointer;

                    transition:all 0.7s;

                }

                .style li:hover{

                    color: #ffa800;

                    background-color:#fff;

                    box-shadow:0 0 10px rgba(255, 232, 95, 0.77);

                }

                .style .styleactive{

                    color: #ffa800;

                    background-color:#fff;

                    box-shadow:0 0 10px rgba(255, 232, 95, 0.77);

                }

                .style li:nth-child(1){

                    margin-left:25px;

                }

                .style li:nth-child(2){

                    margin-left:20px;

                }

                .poly{

                    position:relative;

                }

                .bian{

                    position:absolute;

                    left:100px;top:0;

                    width:90px;

                    height:auto;

                    border-radius:5px;

                    background-color:#EC494E;

                    overflow:hidden;

                    overflow:hidden;

                    transform:scale(1.2);

                    display:none;

                }

                .bian span{

                    display:block;

                    float:left;

                    width:40px;

                    height:45px;

                    font-size:16px;

                    color:#fff;

                    text-align:center;

                    line-height:40px;

                    color:#fff;

                    transition:all 0.7s;

                }

                .bian input{

                    float:left;

                    width:45px;

                    height:35px;

                    margin-top:5px;

                    border:1px solid #fff;

                    box-sizing:border-box;

                    text-align:center;

                    line-height:40px;

                    font-size:18px;

                    color:#fff;

                    background:#EC494E;

                    border-radius:3px;

                    box-shadow:0 0 0 4px #fff inset;

                    transition:all 0.7s;

                }

                .cut,.create,.back{

                    float:left;

                    width:90px;

                    height:45px;

                    margin-left:25px;

                    margin-bottom:15px;

                    background-color: #5bd219;

                    color:#fff;

                    font-size:18px;

                    line-height:45px;

                    text-align:center;

                    border-radius:5px;

                    cursor:pointer;

                }

                .copy,.clear,.save{

                    float:left;

                    width:90px;

                    height:45px;

                    margin-left:20px;

                    margin-bottom:15px;

                    background-color: #5bd219;

                    color:#fff;

                    font-size:18px;

                    line-height:45px;

                    text-align:center;

                    border-radius:5px;

                    cursor:pointer;

                }

                .shezhi{

                    transition:all 0.7s;

                }

                .shezhistyle{

                    background:#fff;

                    color:#5bd219;

                }

                .create{

                    position:relative;

                }

                .xinjian{

                    position:absolute;

                    left:0;top:0;

                    width:200px;

                    height:165px;

                    border-radius:5px;

                    background-color:#EC494E;

                    box-shadow:0 0 15px rgba(236, 73, 78, 0.76);

                    cursor:default;

                    display:none;

                }

                .xinjian:hover{

                    color:#fff;

                }

                .xinjian_before{

                    position:absolute;

                    right:0;

                    top:0;

                    width:20px;

                    height:20px;

                    color:#fff;

                    line-height:16px;

                    text-indent:-1px;

                    font-size:30px;

                    border:1px solid #fff;

                    transform:rotate(45deg);

                    border-radius:50%;

                    cursor:pointer;

                }

                .xinjian h6{

                    width:100%;

                    height:50px;

                    color:#fff;

                    line-height:50px;

                    text-align:center;

                    font-size:20px;

                    font-weight:normal;

                }

                #ding{

                    width:60px;

                    height:30px;

                    font-size:14px;

                    border-radius:3px;

                    color:#fff;

                    background-color:#0078ff;

                    border:0;

                    outline:none;

                    cursor:pointer;

                    box-shadow:0 0 10px rgba(0, 120, 255, 0.5);

                }

                .xinjian_width,.xinjian_height{

                    float:left;

                    width:85px;

                    height:40px;

                    margin-left:10px;

                    border-radius:5px;

                    margin-bottom:20px;

                    background-color:#FFBC00;

                }

                .xinjian_width:hover,.xinjian_height:hover{

                    background-color:#fff;

                    color:#000;

                }

                .xinjian_width span,.xinjian_height span{

                    float:left;

                    width:30px;

                    height:100%;

                    font-size:16px;

                    text-align:center;

                    line-height:40px;

                }

                .xinjian_width input,.xinjian_height input{

                    float:left;

                    margin-top:5px;

                    width:50px;

                    height:30px;

                    text-align:center;

                    line-height:30px;

                    font-size:14px;

                    border:1px solid #FFBC00;

                    box-sizing:border-box;

                }

                .box{

                    float:left;

                    width:90px;

                    height:auto;

                    background-color:#EC494E;

                    overflow:hidden;

                    border-radius:5px;

                    transition:all 0.7s;

                }

                .box{

                    margin-left:25px;

                }

                .linewidth{

                    margin-left:20px;

                }

                .box:hover{

                    background-color:#fff;

                }

                .box span{

                    display:block;

                    float:left;

                    width:40px;

                    height:45px;

                    font-size:16px;

                    color:#fff;

                    text-align:center;

                    line-height:40px;

                    color:#fff;

                    transition:all 0.3s;

                }

                .box input{

                    float:left;

                    width:45px;

                    height:35px;

                    margin-top:5px;

                    border:1px solid #fff;

                    box-sizing:border-box;

                    text-align:center;

                    line-height:40px;

                    font-size:18px;

                    color:#fff;

                    background:#EC494E;

                    border-radius:3px;

                    box-shadow:0 0 0 4px #fff inset;

                    transition:all 0.3s;

                }

                .box2 span{

                    width:55px;

                }

                .box2 input{

                    width:140px;

                }

                .space{

                    float:left;

                    width:100%;

                    height:0;

                    border-bottom:1px solid #fff;

                    margin:20px 0;

                }

            </style>

        </head>

        <body style="">

        <h1>画板</h1>

        <div class="container">

        <div class="row">

        <ul name="" class="type">

        <li class="line typeactive" data="line">直&nbsp;&nbsp;&nbsp;线</li>

        <li class="rect" data="rect">矩&nbsp;&nbsp;&nbsp;形</li>

        <li class="circle" data="circle">圆&nbsp;&nbsp;&nbsp;圈</li>

        <li class="pen" data="pen">铅&nbsp;&nbsp;&nbsp;笔</li>

        <li class="poly" data="poly">多&nbsp;边&nbsp;形

        <div class="bian"><span>边数</span><input type="number" name="number" min="3" value="3" max="15"></div></li>

        <li class="eraser" data="eraser">橡&nbsp;&nbsp;&nbsp;皮</li>

        </ul>

        <ul class="style">

        <li class="stroke styleactive">描&nbsp;&nbsp;&nbsp;边</li>

        <li class="fill" style="display: none;">填&nbsp;&nbsp;&nbsp;充</li>

        </ul>

        <div class="space"></div>

        <div class="box"><span>颜色</span><input type="color" name="color" value="#000000"></div>

        <div class="box linewidth"><span>线宽</span><input type="number" name="number" value="1" max="150" min="1"></div>

        <div class="space"></div>

        <div class="create shezhi">新&nbsp;&nbsp;&nbsp;建

        <div class="xinjian">

        <h6>画 板 尺 寸</h6>

        <div class="xinjian_width">

        <span>宽</span>

        <input type="number" max="1625" min="500" value="500">

        </div>

        <div class="xinjian_height">

        <span>高</span>

        <input type="number" max="954" min="300" value="300">

        </div>

        <input type="button" name="queding" value="确定" id="ding">

        <div class="xinjian_before">+</div>

        </div>

        </div>

        <div class="clear shezhi">清&nbsp;&nbsp;&nbsp;空</div>

        <div class="back shezhi">撤&nbsp;&nbsp;&nbsp;销</div>

        <div class="save shezhi">保&nbsp;&nbsp;&nbsp;存</div>

        <div class="cut shezhi" data="cut">剪&nbsp;&nbsp;&nbsp;切</div>

        <div class="copy shezhi">复&nbsp;&nbsp;&nbsp;制</div>

        </div>

        </div>

        <canvas width="1625" height="954"></canvas>

        <script>

            function Draw(obj,setting){this.obj=obj;this.type=setting.type||"stroke";this.color=setting.color||"#000";this.width=setting.width||"1";}

Draw.prototype={init:function(){this.obj.strokeStyle=this.color;this.obj.fillStyle=this.color;this.obj.lineWidth=this.width;},rect:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.rect(x,y,x1-x,y1-y);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},line:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.moveTo(x,y);this.obj.lineTo(x1,y1);this.obj.stroke();},circle:function(x,y,x1,y1){this.init();var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));this.obj.beginPath();this.obj.arc(x,y,r,0,2*Math.PI);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},poly:function(x,y,x1,y1,n){this.init();var obj=this.obj;var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));;obj.save();obj.translate(x,y);obj.rotate(Math.PI/2);var nx=r*Math.cos(Math.PI/n);var ny=r*Math.sin(Math.PI/n);obj.beginPath();obj.lineCap="round";obj.moveTo(nx,ny);for(var i=0;i<=n;i++){obj.rotate(Math.PI*2/n);obj.lineTo(nx,-ny);}

if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}

obj.restore();},pen:function(x,y,x1,y1){this.init();this.obj.save();this.obj.lineCap="round";this.obj.lineTo(x1,y1);this.obj.stroke();this.obj.restore();},eraser:function(x,y,x1,y1){this.obj.lineCap="round";this.obj.clearRect(x1-5,y1-5,10,10);},cut:function(x,y,x1,y1){this.init();this.obj.save();this.obj.setLineDash([4,2]);this.obj.beginPath();this.obj.lineWidth=1;this.obj.rect(x,y,x1-x,y1-y);this.obj.stroke();this.obj.restore();}}

        </script>

        <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

        <script>

            var container=$(".container");

            var canvas=document.querySelector("canvas");

            var screenWidth=document.documentElement.clientWidth;

            var screenHeight=document.documentElement.clientHeight;

            var width=screenWidth-295;

            var height=screenHeight-15;

            canvas.width=width;

            canvas.height=height;

            var obj=canvas.getContext("2d");

            var typechoose=$(".type li");

            var stylechoose=$(".style li");

            var colorchoose=document.querySelector("input[type=color]");

            var widthchoose=document.querySelector(".linewidth input[type=number]");

            var canvasWidth=document.querySelector(".xinjian_width input[type=number]");

            var canvasHeight=document.querySelector(".xinjian_height input[type=number]");

            canvasWidth.value=width;canvasHeight.value=height;

            canvasWidth.max=screenWidth-295;canvasHeight.max=screenHeight-15;

            var ding=document.querySelector("#ding");

            var poly=$(".poly");

            var bian=$(".bian");

            var polychoose=$(".bian input");

            var shezhi=$(".shezhi");

            var cut=$(".cut");

            var copy=$(".copy");

            var back=$(".back");

            var clear=$(".clear");

            var save=$(".save");

            var create=$(".create");

            var xinjian=$(".xinjian");

            var create_close=$(".xinjian_before");

            var cutflag=false;

            var iscut=true;

            var color="#000";

            var type="line";

            var n=3;

            var linewidth="1";

            var style="stroke";

            var arr=[];

            $(".fill").css({display:"none"});

            // 多边形

            poly.hover(function(){

                bian.fadeIn();

            },function(){

                bian.fadeOut();

            })

            // 绘制形状

            typechoose.each(function(index,ele){

                $(ele).click(function(){

                    typechoose.removeClass("typeactive");

                    $(this).toggleClass("typeactive");

                    cut.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});

                    copy.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});

                    type=$(this).attr("data");

                    if($(this).is(".line")||$(this).is(".pen")){

                        style="stroke";

                        $(".stroke").addClass("styleactive");

                        $(".fill").css({display:"none"}).removeClass("styleactive");

                    }else{

                        $(".fill").css({display:"block"});

                    }

                })

            })

            // 描边、填充单击事件

            stylechoose.each(function(index,ele){

                $(ele).click(function(){

                    style=$(this).attr("class");

                    stylechoose.removeClass("styleactive");

                    $(this).toggleClass("styleactive");

                })

            })

            // 剪切

            cut.click(function(){

                type=$(this).attr("data");

                typechoose.removeClass("typeactive");

                $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");

                iscut=true;

            })

            copy.click(function(){

                type="cut";

                typechoose.removeClass("typeactive");

                $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");

                iscut=false;

            })

            // 设置

            shezhi.each(function(index,ele){

                if($(ele).is(".cut")||$(ele).is(".copy")){

                    return;

                }else{

                    $(ele).click(function(){

                        $(this).css({color:"#5bd219",backgroundColor:"#fff"}).animate({opacity:0.99},200,function(){

                            $(this).css({color:"#fff",backgroundColor:"#5bd219",opacity:1});

                        });

                    })

                }

            })

            // 撤销

            back.click(function(){

                arr.pop();

                obj.clearRect(0,0,width,height);

                if(arr.length>0){

                    obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);

                }

            })

            // 清除

            clear.click(function(){

                arr=[];

                obj.clearRect(0,0,width,height);

            })

            // 保存

            save.click(function(){

                var reg=canvas.toDataURL("image/png");//跳转页面手动保存

        //        var reg=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//直接自动保存下载

                location.href=reg;

            })

            // 新建画布

            create.click(function(){

                xinjian.fadeIn();

            })

            create_close.click(function(e){

                e.stopPropagation()

                xinjian.fadeOut();

            })

            canvasWidth.onblur=function(){

                if(this.value<=this.min){

                    this.value=this.min;

                }

                if(this.value>=screenWidth-295){

                    this.value=screenWidth-295;

                }

                width=this.value;

            }

            canvasHeight.onblur=function(){

                if(this.value<=this.min){

                    this.value=this.min;

                }

                if(this.value>=screenHeight-15){

                    this.value=screenHeight-15;

                }

                height=this.value;

            }

            ding.onclick=function(e){

                canvas.width=width;

                canvas.height=height;

                canvas.style.left=(screenWidth+295-canvas.width)/2+"px";

                canvas.style.top=(screenHeight-5-canvas.height)/2+"px";

                arr=[];

                obj.clearRect(0,0,width,height);

                e.stopPropagation()

                xinjian.fadeOut();

            }

            // 颜色选择

            colorchoose.onchange=function(){

                color=this.value;

            }

            // 粗细改变

            widthchoose.onchange=function(){

                linewidth=this.value;

            }

            //多边形边数

            polychoose.change(function(){

                n=this.value;

            })

            var x,y,w,h;

            var lx,ly,lw,lh;

            var cutdata;

            canvas.onmousedown=function(e){

                x=e.offsetX;

                y=e.offsetY;

                if(type=="pen"){

                    obj.beginPath();

                    obj.moveTo(x,y);

                }

                if(type=="eraser"){

                    obj.clearRect(x-5,y-5,10,10);

                }

                if(cutflag&&type=="cut"){

                    if(arr.length!=0){

                        arr.splice(-1,1);

                    }

                }

                var draw=new Draw(obj,{type:style,color:color,width:linewidth});//实例化构造函数

                canvas.onmousemove=function(e){

                    w=e.offsetX;

                    h=e.offsetY;

                    if(type!="eraser"){

                        obj.clearRect(0,0,width,height);

                        if(arr.length!=0){

                            obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);

                        }

                    }

                    if(cutflag&&type=="cut"){

                        if(iscut){

                            obj.clearRect(lx,ly,lw-lx,lh-ly);

                        }

                        var nx=lx+(w-x);

                        var ny=ly+(h-y);

                        obj.putImageData(cutdata,nx,ny);

                    }else if(type=="poly"){

                        draw[type](x,y,w,h,n);

                    }else{

                        draw[type](x,y,w,h);

                    }

                }

                document.onmouseup=function(){

                    canvas.onmousemove=null;

                    document.onmouseup=null;

                    if(type=="cut"){

                        if(!cutflag){

                            cutflag=true;

                            cutdata=obj.getImageData(x+1,y+1,w-x-2,h-y-2);

                            lx=x;ly=y;lw=w;lh=h;

                            container.css({display:"none"});

                        }else{

                            cutflag=false;

                            container.css({display:"block"});

                        }

                    }

                    arr.push(obj.getImageData(0,0,width,height));

                }

            }

        </script>

        </body></html>

```

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,335评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,895评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,766评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,918评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,042评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,169评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,219评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,976评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,393评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,562评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,193评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2赞 351

推荐阅读更多精彩内容

  • canvas-画板
    闲来无趣写了个网页版的画图 <!DOCTYPE html> Title *{padding:0; margin:0...
    _州舟_阅读 452评论 0赞 1
  • js实现下拉
    CSS *{padding:0;margin:0;} .pull-down-menus_box{position:...
    dovlie阅读 249评论 0赞 1
  • 前端面试题实战1
    前端面试题汇总 1、函数的创建方式有哪几种？举一个闭包的的例子，举一个曾经封装过的函数，简单阐述一下原型链的使用，...
    我家媳妇蠢蠢哒阅读 612评论 0赞 0
  • offer收割机-Web前端面试宝典【精编版-1】
    过了八月，马上到了金九银十的跳槽季，找工作的时候曾一周面试了十多家公司，从一开始被面试官虐的体无完肤到最后对答如流...
    视觉派Pie阅读 1,097评论 1赞 3
  • 送你一个晚安故事
    我是黑夜里大雨纷飞的人啊 1 “又到一年六月，有人笑有人哭，有人欢乐有人忧愁，有人惊喜有人失落，有的觉得收获满满有...
    陌忘宇阅读 8,532评论 28赞 53