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!
评论
 上一篇
CanvasCanvas
Canvas canvas 是HTML5新出的标签,可以用来做小游戏,特效,作图等,自己并没有作画能力,只能通过Javascript脚本来操控 Canvas标准http://www.w3c.org/TR/2dcontext/https:/
2019-09-17
下一篇 
WebAudio APIWebAudio API
webAudio API webAudio API接口可以用来实现音乐可视化、音频剪辑、修声、语音、去声等等强大的操作 webAudioAPI接口关系图: AudioContext AudioContext是所有音频操作的前提,一个类
2019-09-16
  目录