web前端实例代码总结（一）

1.HTML5移动端拖动惯性

下面代码只是实现了上下滑动惯性，没有写水平滑动惯性。（临时代码笔记，可能会在以后的过程中不断更新优化代码）

/**
 * 惯性原理:
 * 产生的速度 = 移动距离 / 移动时间
 * 距离 = 松开的坐标 - 上次的坐标  (距离差)
 * 时间 = 松开的时间 - 按下的时间  (时间差)
 * */

var dargFun = {
    dargDom:null, //惯性滑动的DOM区域
    startX:0, //开始偏移的X
    startY:0, //开始偏移的Y
    clientX:0, 
    clientY:0,
    translateX:0, //保存的X偏移
    translateY:0, //保存的Y偏移
    maxWidth:0, //滑动的最大宽度
    maxHeight:0, //滑动的最大高度
    startTime:0, //记录初始按下时间
    init:function(config){
        this.dargDom = document.querySelector(config.dargDom);
        this.maxWidth = this.dargDom.offsetWidth;
        this.maxHeight = this.dargDom.offsetHeight;
        
        this.dargDom.addEventListener('touchstart',(event)=>{
            event.stopPropagation(); //停止事件传播
            this.clientX = event.changedTouches[0].clientX;
            this.clientY = event.changedTouches[0].clientY;
            this.dargDom.style.WebkitTransition = this.dargDom.style.transition = '';
            this.startX = this.translateX;
            this.startY = this.translateY;
            this.startTime = Date.now();
        },false);
        
        this.dargDom.addEventListener('touchmove',(event)=>{
            if(document.documentElement.scrollTop >= this.dargDom.scrollHeight - this.dargDom.clientHeight){
                
            }else{
                return;
            }
        
            event.stopPropagation(); //停止事件传播
            this.translateX = event.changedTouches[0].clientX - this.clientX + this.startX;
            this.translateY = event.changedTouches[0].clientY - this.clientY + this.startY;
            if(this.translateY > 0 ){ //拖动系数. 拉力的感觉
                this.translateY *= 0.4;
            }else if( this.translateY < -(this.dargDom.scrollHeight - this.dargDom.clientHeight)){ 
                this.translateY = (event.changedTouches[0].clientY - this.clientY) * 0.4 + this.startY;
            }
            this.animate(this.translateY);
        },false);
        
        this.dargDom.addEventListener('touchend',(event)=>{
            event.stopPropagation(); //停止事件传播
            var distanceY = event.changedTouches[0].clientY - this.clientY,
            timeDis = Date.now() - this.startTime,  //时间差
            speed = (distanceY / timeDis) * 100;
            
            // 惯性
            this.translateY += speed;
    
            this.translateY  = 0;
            // 添加贝塞尔曲线
            this.dargDom.style.WebkitTransition = this.dargDom.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
            this.animate(this.translateY);
        
        },false);
        
    },
    animate:function(y){
        this.dargDom.style.WebkitTransform = this.dargDom.style.transform = 'translateY('+y+'px)';
    }
}

export default dargFun;复制代码

 注：当滑动到页面底部的时候才触发touchmove事件。

调用方式：

dragFun.init({
    dargDom:'#contractContanier'
});复制代码

参考地址：

• 移动端拖动惯性
• 原生移动端滑动js

2.HTML5利用canvas，把多张图合并成一张图片

需求分析，根据当前网页中的几张图片，在手机上长按，保存图片到相册或者发送给好友。

drawCanvas(){
    var self = this;
    var imgsrcArray = [
        require('@/page/agent/agentexpand/img/bg.jpg'),
        'data:image/jpeg;base64,'+this.codeUrl
    ];
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 750;
    canvas.height = 1333;
    var imglen = imgsrcArray.length;
    var drawimg = (function f(n){
        if(n < imglen){
            var img = new Image();
            img.crossOrigin = 'Anonymous'; //解决跨域问题
            img.onload = function(){
                //ctx.save();
                if(n == 0){
                    ctx.drawImage(img,0,0,750,1333);
                }else{
                    ctx.drawImage(img,466,574,210,210);
                }
                f(n+1);
            }
            
            img.src = imgsrcArray[n];
        }else{
            self.downloadUrl = canvas.toDataURL("image/jpeg");
            self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
        }
    })(0);
}复制代码

调用方式：

<img :src="'data:image/jpeg;base64,' + downloadUrl"/>复制代码

注：上面的调用是使用的vue语法。

可参考地址：

• 利用canvas，把多张图合并成一张图片
• 基于html2canvas实现网页保存为图片及图片清晰度优化
• canvas导出为图片并用JS下载
• js截图及绕过服务器图片保存至本地（html2canvas）

3.JS 将有父子关系的数组转换成树形数据

data.forEach(ele => {
      let parentId = ele.parentId;
      if (parentId === 0) {
        //是根元素的hua ,不做任何操作,如果是正常的for-i循环,可以直接continue.
      } else {
        //如果ele是子元素的话 ,把ele扔到他的父亲的child数组中.
        data.forEach(d => {
          if (d.id === parentId) {
            let childArray = d.child;
            if (!childArray) {
              childArray = []
            }
            childArray.push(ele);
            d.child = childArray;
          }
        })
      }
    });
    //去除重复元素
    data = data.filter(ele => ele.parentId === 0);
    console.log('最终等到的tree结构数据: ', data);复制代码

4.前端通过Blob下载文件夹流

先看一个网上简单的代码片段：

let blob = new Blob([res], {
    type: `application / pdf` //word文档为msword,pdf文档为pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `我的文档`; //下载文件的名字
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();复制代码

全面：

/**
 * @param {String} resource 文件流
 * @param {String} fileType 文件类型
 * @param {String} fileName 文件名
 * */
var downloadBlob=function(resource,fileType,fileName){
    var data = new Blob([resource],{
        type:fileType
    });
    if('download' in document.createElement('a')){ //非IE
        var downloadUrl = window.URL.createObjectURL(data);
        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = fileName;
        anchor.style.display = 'none';
        document.body.appendChild(anchor);
        anchor.click();
        window.URL.revokeObjectURL(anchor.href); 
        document.body.removeChild(anchor);
    }else{ //IE10+下载
        navigator.msSaveBlob(data, fileName);
    }
    
}复制代码

调用方式：

downloadBlob(res,'application/pdf','文档名称')复制代码

后续逐步添加

转载于:https://juejin.im/post/5bbc40f95188255c5121dd64