HTML5

一、H5 拖拽

JS 里拖拽三事件, onmousedown onmousemove onmouseup 是实现交互性效果,根据鼠标的移动位置让标签元素联动

而 H5 拖拽也可以实现但更简单,实际例子: 百度图片识别,qq 邮箱文件提交,百度网盘文件上传,并可以获取到文件的 名称,大小,修改时间

标签元素默认是不可以拖拽的,draggable="true"才能够被拖拽

  • jsh5拖拽的对比
  • 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格式的数据增删改查
  • parsestringify函数对数据类型解析和编码类型
  • decodeURLencodeURL函数对 url 数据进行解码和编码
  • atobbtoa函数对base64数据进行解码和编码
  • history操作数据布局
  • history实现历史管理功能
  • history对象下的back-forward-go

三、Ajax 数据交互及文件上传功能

  • 文件下载方式
  • ajaxphp数据交互
  • 真实服务器数据交互演示及跨域访问
  • jsonp跨域访问的核心本质
  • ajax原生node 数据交互
  • ajaxexpress框架 数据交互
  • ajaxkoa2框架 数据交互
  • 通过表单控件及FormData对象上传文件到服务器
  • 通过 H5 拖拽及FormData对象上传文件到服务器
  • 通过onprogress事件及loadedtotal属性真实显示上传进度
  • 同源同域名下跨文档操作

四、H5 本地存储 localStorage-webWorker 多线程-Server-Sent-Event 服务器发送事件-离线存储 cache 应用

  • setItemgetItem存储和获取数据
  • 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 语法及编译

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax

    jinghong
  • Git

    jinghong
  • Cookie

    2.Chrome浏览器中F12打开,开发者工具 —— Application面板中查找cookie即可

    jinghong
  • 文件下载-文件MIME类型对照表

    KenTalk
  • openshift/origin工作记录(3)——Application的删除

    openshift创建完一个application后,会自动创建很多对象,包括dc、rc、svc、pod、is等。在删除application时,可通过标签,...

    胡了了
  • apache后缀名支持 让apache支持apk ipk下载的方法

    一般都在mime.types文件中添加相应的后缀,重启apache后即可mime.types 文件在\conf\目录里面,添加如下内容:

    习惯说一说
  • 深入理解asp.net里的HttpModule机制

    说明: (1)、客户端浏览器向服务器发出一个http请求,此请求会被inetinfo.exe进程截获,然后转交给aspnet_isapi.dll进程,接着它又...

    莫问今朝
  • HTTP协议入门教程,一文就够了!

    HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传...

    辉哥
  • 01_常用的MIME类型

    .docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document

    shirayner
  • pycharm执行图像操作时出现Qt platform错误,发现在重装系统后,

    ` This application failed to start because it could not find or load the Qt pla...

    水球喵子

扫码关注云+社区

领取腾讯云代金券