HTML5

jinghong

发布于 2020-05-12 05:04:50

4.3K00

代码可运行

文章被收录于专栏：前端开发0202前端开发0202

运行总次数：0

代码可运行

一、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