loading

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 语法及编译


文章作者: Jing Hong
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Jing Hong !
 上一篇
JS中Buffer数据详解 JS中Buffer数据详解
元数据处理序言随着WebSocket、WebAudio、Ajax2等广泛应用,前端方面只要是处理大数据或者想提高数据处理性能,那一定是少不了 ArrayBuffer对象 同时在浏览器当中处理二进制数据的需求也在不断的增加,有时需要字节数组、
2019-09-16
下一篇 
WebAudio API WebAudio API
webAudio API webAudio API接口可以用来实现音乐可视化、音频剪辑、修声、语音、去声等等强大的操作 webAudioAPI接口关系图: AudioContext AudioContext是所有音频操作的前提,一个类
2019-09-16
  目录