panpanxiong3 / front-end-effect-link Goto Github PK

一个完整的drag和drop流程通常包含以下几个步骤：
1.设置可拖拽目标，设置属性draggable=‘true’实现元素的可拖拽
2.监听dragstart，通过DataTransfer 设置数据
3.为拖拽操作设置返汇图标（可选）
4.设置允许的拖放效果，如copy、move、link
5.设置施放目标，默认情况下浏览器阻止所有的施放操作，所以需要dragenter或者设置dragover取消浏览器默认行为使元素可拖放
6.监听drop事件执行所需操作

拖拽事件：拖拽事件产生时不会产生对应的鼠标事件
(1)、dragStart：拖拽开始时在被拽元素上触发此事件，监听器需要设置拖拽所需数据，从操作系统拖拽到浏览器不会触发此事件
(2)、dragEnter:拖拽鼠标进入该元素时触发，用于给施放元素设置视觉返汇，如高亮
(3)、dragOver:拖拽时在目标元素上移动时触发，监听器通过阻止浏览器默认行为设置元素为可拖放设置
(4)、dragLeave:拖拽时鼠标移出目标属性时在目标元素上触发，此时监听器可以取消所有前面设置的视觉效果
(5)、drag:拖拽期间在拖拽元素上连续施放
(6)、drop:鼠标在施放目标上施放时，在施放目标上触发，此时监听器需要收集数据并执行所需操作，如果是从操作系统上拖放文件到浏览器，需要取消浏览器行为
(7)、dragEnd:鼠标在施放目标上施放时，在拖放元素上触发，将元素从浏览器拖放到操作系统时不会触发此事件

设置结束时间：new Date('2020/01/01 00:00:00'); //截止时间
设置开始时间：new Date();
设置剩余时间：let t = endTime.getTime() - nowTime.getTime();
计算对应的天、时、分、秒：
let d = Math.floor(t / 1000 / 60 / 60 / 24); //天： 剩余时间 / 1000 / 分 / 秒 / 时
let h = Math.floor(t / 1000 / 60 / 60 % 24); //时
let m = Math.floor(t / 1000 / 60 % 60); //分
let s = Math.floor(t / 1000 % 60); //秒

搜索框下方保留搜索记录这个效果在很多站点的搜索框处用的非常多，搜索的数据使用本地存储来处理，该功能不仅仅提高了界面对用户的友好程度，而且也不需要向服务器去请求接口，不需要带宽，所以非常的实用。

localStorage.getItem()这个方法是用来获取到的数据的
localStorage.setItem()这个方法是用来设置数据的
localStorage.clear()这个方法是用来清除数据的
JSON.stringify()这个方法是用来将数组数组转换为json字符串的
JSON.parse()这个方法是用来将json字符串转换为数组的

document.readystatechange 元素的加载判断

关于 ‘readystatechange’事件也是js常用事件之一，为了提高用户的交互性，特别是在H5以及移动端使用的比较多

关于'readystatechange'事件的每个对象都有一个readyState 属性，包含 以下5个值：

1. uninitalized(未初始化) ：对象存在但是未初始化
   2.loading(正在加载): 对象正在加载数据
   3.loaded(加载完毕)：对象数据加载完成
   4.interactive(交互):可以操作对象，但未完成加载
   5.complate(完成):对象已经加载完成

注：这些状态看起来很直观，但并非所有的对象都会经历readState的这几个阶段。换句话说，如某个阶段不适用某个对象，则该对象完全可能跳过这个阶段，并没有规定哪个阶段适用于哪个对象。
显然，这意味着‘readState’事件经常少于4次，而readState属性并不都是连续的

一.js加载瀑布流写法

（1）js未使用分装函数，在页面加载完成时，首先让页面加载前十条数据：show(10);

（2）监听页面滚动，判断监听滚动距离小于页面高度时，加载下五条数据，并且判断是否超出总数据

（3）利用js生成静态页面，渲染页面

主要封装了加载进度条的实现

1.获取加载进度:
因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法
所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现
首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } }

2.上传时使用 $ajax 方法
$.ajax({ url: url, type: 'POST', xhr:xhrOnProgress(function(e){ var percent=e.loaded / e.total;//计算百分比 }) });

3.将ajax 传递过来的值赋值 move(num) 函数，调用进度条函数