一、H5 拖拽
JS 里拖拽三事件， onmousedown onmousemove onmouseup 是实现交互性效果，根据鼠标的移动位置让标签元素联动
而 H5 拖拽也可以实现但更简单，实际例子： 百度图片识别，qq 邮箱文件提交，百度网盘文件上传，并可以获取到文件的 名称，大小，修改时间
标签元素默认是不可以拖拽的，draggable="true"才能够被拖拽
js和h5拖拽的对比drag七事件的理解- 只是简单的拖拽而没有数据交换是没有什么用的
// 拖拽元素
drag.ondragstart = function() {
// 拖拽的一瞬间
this.style.background = 'pink'
}
drag.ondrag = function() {
// 连续触发
document.title = n++
}
drag.ondragend = function() {
this.style.background = 'red'
}
// 目标元素
box.ondragenter = function() {
// 监听拖拽元素进入到目标元素区域内
this.style.background = 'skyblue'
}
box.ondragover = function() {
// 在目标元素身上 连续触发
this.innerHTML = n++
}
box.ondragleave = function() {
// 在目标元素身上离开
this.innerHTML = ''
}
box.ondrop = () => {
// 将拖动的元素放置在目标元素上时触发
}drag兼容处理方式- 捕获
dataTransfer对象里的数据
const li = list.querySelectorAll('li')
li.forEach((item, index) => {
item.setAttribute('draggable', 'true')
item.ondragstart = function(e) {
// console.log(e.dataTransfer.setData())
e.dataTransfer.setData('key', index)
}
})
console.log(
e.dataTransfer.files[0].name,
e.dataTransfer.files[0].type,
e.dataTransfer.files[0].lastModified,
e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString(),
e.dataTransfer.files[0].lastModifiedDate.toLocaleTimeString(),
e.dataTransfer.files[0].lastModifiedDate.toDateString()
)Blog对象与URL对象读取数据Blob 对象代表了一段二进制数据，提供了一系列操作接口
file对象的父类型是Blob对象 对象 URL 也被称为 blob URL，指的是引用保存在 File 或 Blob 中数据的 URL，使用对象 URL 的好处是没必要把内容读取到 js 中，而直接使用文件内容，能生成一个链接，例如 Img 的 src = URL
// 拖拽图片预览 let oFile = e.dataTransfer.files[0] let blob = new Blob([oFile]) // 第一参数一定是个数组 第二个mime类型 let url = window.URL.createObjectURL(blob) let img = new Image() img.width = 300 img.height = 150 img.src = url img.onload = function() { document.body.appendChild(this) }FileReader读取数据// 拖拽图片预览 let oFile = e.dataTransfer.files[0] // 创建文件读取对象 let reader = new FileReader() reader.readAsDataURL(oFile) // 分析oFile 文件对象 reader.onload = function() { // 返回data: base64数据 A-Z a-z 0~9 + / = 64位字符 console.log(this.result) let img = new Image() img.width = 300 img.height = 150 img.src = this.result img.onload = function() { document.body.appendChild(this) } }mime 类型
application/envoy evy application/fractals fif application/futuresplash spl application/hta hta application/internet-property-stream acx application/mac-binhex40 hqx application/msword doc application/msword dot application/octet-stream * application/octet-stream bin application/octet-stream class application/octet-stream dms application/octet-stream exe application/octet-stream lha application/octet-stream lzh application/oda oda application/olescript axs application/pdf pdf application/pics-rules prf application/pkcs10 p10 application/pkix-crl crl application/postscript ai application/postscript eps application/postscript ps application/rtf rtf application/set-payment-initiation setpay application/set-registration-initiation setreg application/vnd.ms-excel xla application/vnd.ms-excel xlc application/vnd.ms-excel xlm application/vnd.ms-excel xls application/vnd.ms-excel xlt application/vnd.ms-excel xlw application/vnd.ms-outlook msg application/vnd.ms-pkicertstore sst application/vnd.ms-pkiseccat cat application/vnd.ms-pkistl stl application/vnd.ms-powerpoint pot application/vnd.ms-powerpoint pps application/vnd.ms-powerpoint ppt application/vnd.ms-project mpp application/vnd.ms-works wcm application/vnd.ms-works wdb application/vnd.ms-works wks application/vnd.ms-works wps application/winhlp hlp application/x-bcpio bcpio application/x-cdf cdf application/x-compress z application/x-compressed tgz application/x-cpio cpio application/x-csh csh application/x-director dcr application/x-director dir application/x-director dxr application/x-dvi dvi application/x-gtar gtar application/x-gzip gz application/x-hdf hdf application/x-internet-signup ins application/x-internet-signup isp application/x-iphone iii application/x-javascript js application/x-latex latex application/x-msaccess mdb application/x-mscardfile crd application/x-msclip clp application/x-msdownload dll application/x-msmediaview m13 application/x-msmediaview m14 application/x-msmediaview mvb application/x-msmetafile wmf application/x-msmoney mny application/x-mspublisher pub application/x-msschedule scd application/x-msterminal trm application/x-mswrite wri application/x-netcdf cdf application/x-netcdf nc application/x-perfmon pma application/x-perfmon pmc application/x-perfmon pml application/x-perfmon pmr application/x-perfmon pmw application/x-pkcs12 p12 application/x-pkcs12 pfx application/x-pkcs7-certificates p7b application/x-pkcs7-certificates spc application/x-pkcs7-certreqresp p7r application/x-pkcs7-mime p7c application/x-pkcs7-mime p7m application/x-pkcs7-signature p7s application/x-sh sh application/x-shar shar application/x-shockwave-flash swf application/x-stuffit sit application/x-sv4cpio sv4cpio application/x-sv4crc sv4crc application/x-tar tar application/x-tcl tcl application/x-tex tex application/x-texinfo texi application/x-texinfo texinfo application/x-troff roff application/x-troff t application/x-troff tr application/x-troff-man man application/x-troff-me me application/x-troff-ms ms application/x-ustar ustar application/x-wais-source src application/x-x509-ca-cert cer application/x-x509-ca-cert crt application/x-x509-ca-cert der application/ynd.ms-pkipko pko application/zip zip audio/basic au audio/basic snd audio/mid mid audio/mid rmi audio/mpeg mp3 audio/x-aiff aif audio/x-aiff aifc audio/x-aiff aiff audio/x-mpegurl m3u audio/x-pn-realaudio ra audio/x-pn-realaudio ram audio/x-wav wav image/bmp bmp image/cis-cod cod image/gif gif image/ief ief image/jpeg jpe image/jpeg jpeg image/jpeg jpg image/pipeg jfif image/svg+xml svg image/tiff tif image/tiff tiff image/x-cmu-raster ras image/x-cmx cmx image/x-icon ico image/x-portable-anymap pnm image/x-portable-bitmap pbm image/x-portable-graymap pgm image/x-portable-pixmap ppm image/x-rgb rgb image/x-xbitmap xbm image/x-xpixmap xpm image/x-xwindowdump xwd message/rfc822 mht message/rfc822 mhtml message/rfc822 nws text/css css text/h323 323 text/html htm text/html html text/html stm text/iuls uls text/plain bas text/plain c text/plain h text/plain txt text/richtext rtx text/scriptlet sct text/tab-separated-values tsv text/webviewhtml htt text/x-component htc text/x-setext etx text/x-vcard vcf video/mpeg mp2 video/mpeg mpa video/mpeg mpe video/mpeg mpeg video/mpeg mpg video/mpeg mpv2 video/quicktime mov video/quicktime qt video/x-la-asf lsf video/x-la-asf lsx video/x-ms-asf asf video/x-ms-asf asr video/x-ms-asf asx video/x-msvideo avi video/x-sgi-movie movie x-world/x-vrml flr x-world/x-vrml vrml x-world/x-vrml wrl x-world/x-vrml wrz x-world/x-vrml xaf x-world/x-vrml xof
二、新增方法及历史管理
- 通过
classList对象对class类名增删改查 - 通过
dataset对象对data-Attr格式的数据增删改查 parse与stringify函数对数据类型解析和编码类型decodeURL与encodeURL函数对 url 数据进行解码和编码atob与btoa函数对base64数据进行解码和编码history操作数据布局history实现历史管理功能history对象下的back-forward-go
三、Ajax 数据交互及文件上传功能
- 文件下载方式
ajax和php数据交互- 真实服务器数据交互演示及跨域访问
jsonp跨域访问的核心本质ajax和原生node数据交互ajax和express框架数据交互ajax和koa2框架数据交互- 通过表单控件及
FormData对象上传文件到服务器 - 通过 H5 拖拽及
FormData对象上传文件到服务器 - 通过
onprogress事件及loaded与total属性真实显示上传进度 - 同源同域名下跨文档操作
四、H5 本地存储 localStorage-webWorker 多线程-Server-Sent-Event 服务器发送事件-离线存储 cache 应用
setItem与getItem存储和获取数据webWorker多线程原理- SSE 服务器消息推送
- 真实服务器演示
cache离线存储设计
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush(); //刷新缓冲区的内容,输出
?>五、canvas 技术
- canvas 认识
- 4 种矩形用法
- 样式属性
- 线条函数
- 路径问题
- 边界和端点样式
- 圆形函数用法
- 变换函数用法
- 保存和释放路径
- 图片绘制
- 视频绘制
- 填充背景方式
- 线性渐变
- 径向渐变
- 曲线函数
- 贝赛尔曲线画法
- 绘制文字
- 时钟表盘数字算法
- 图形阴影
- 像素操作
- 处理图片像素
- 图像合成
- canvas 画面导出
七、video 和 audio
视频格式和音频格式
标签属性
- src
- autoplay
- controls
- width
- height
- loop
- preload
- poster
方法
- play( )
- pause( )
事件
- onplay
- onpause
- ontimeupdate
- onended
- progress
属性
- currentTime
- duration
- ended
- volume
- height
- width
- currentSrc
- videoWidth
- videoHeight
八、地理位置信息与高德地图 API
- 原生 API 经纬度获取
- 高德地图 JS-API 调用
九、移动端
移动端事件
搭建真机测试
触屏三事件
- touchstart
- touchmove
- touchend
手指信息对象
三种适配方案
- 百分比
- 自适应
- rem
- less 语法及编译