HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)(下)

简介: HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)

HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)(上):https://developer.aliyun.com/article/1420267


2、定义拖拽数据 每个 drag event (拖拽事件对象)都有一个 dataTransfer 属性,它持有 拖拽数据。这个属性也有管理拖拽数据的方法。


setData(数据类型,数据值) 方法可以为拖拽数据添加一个项。

function dragstart(e){
     console.log(e)//打印事件对象
     // 添加拖拽数据
     e.dataTransfer.setData("text/plain", e.target.innerText);
     }


3、定义拖拽图像


dataTransfer.setDragImage(image, xOffset, yOffset) 方法自定义一张图片。

// 定义拖拽图片
        var img = new Image();
        img.src = './拖放/assets/dog.jpg';
        function dragstart(e) {
          e.dataTransfer.setData("text/plain", e.target.innerText)
            console.log(e)
            // 设置拖拽图片
          e.dataTransfer.setDragImage(img, 10, 10);
       }


4、定义放置区 当拖拽一个对象到 HTML 元素中时,浏览器默认不会有任何响 应。 想要让一个元素变成可放置区,该元素必须设置 ondragover 和 ondrop 事件处理程序属性。


ondragover :当元素被拖到放置区上时触发,这个时候可以去检验拖拽数据的类型,返回 false 则阻止放置,返回 true 则允许放置。


ondrop :当元素在放置区被放置时触发。

<h5>放置区域</h5>
<div style="width:200px;height:200px;border:3px solid blue" ondragover="dragover(event)" ondrop="drop(event)">
</div>
// 当元素或选中的文本被拖到一个放置区上时触发
function dragover(event) {
    event.preventDefault()
   // 检查类型
 if (event.dataTransfer.types.includes('text/plain')) {
             return true//返回true则允许放置
     }
    return false//返回false则不允许放置
}
// 放置处理函数
function drop(e) {
    e.preventDefault()
    // 获取拖拽的数据
    var data = e.dataTransfer.getData("text/plain");
      console.log(data)
       // 将拖拽过来的数据放置在放置区
       e.target.textContent = data;
}


HTML5_Web存储



使用HTML5可以在本地客户端存储数据。


客户端存储数据的两个对象为:


 localStorage - 没有时间限制的数据存储

  sessionStorage - 针对一个 session 的数据存储


调用其中任一对象会创建 Storage 对象,在使用 web 存储前,应检查 浏览器是否支持 localStorage sessionStorage :

if (typeof (Storage) !== "undefined") {
    // 是的! 支持 localStorage sessionStorage对象!
   // 写一些自己的逻辑
}else {
   // 抱歉! 不支持 web 存储。
}

if (typeof (Storage) !== "undefined") {
     //设置键值对,存储数据
            localStorage.setItem('name','itxiaotong')
            localStorage.setItem('thing','study')
     //通过键获取值
          console.log(localStorage.getItem('name'))
     //通过索引获取键名
          console.log(localStorage.key(1))
          setTimeout(function () {
    //清除数据
                //   localStorage.removeItem('name')
                localStorage.clear()
           }, 3000)
       }

if (typeof (Storage) !== "undefined") {
     //设置键值对,存储数据
            sessionStorage.age=18
            console.log(sessionStorage.age)
            sessionStorage.setItem('name','itbaizhan')
            sessionStorage.setItem('thing', 'study')
     //通过键获取值
          console.log(sessionStorage.getItem('name'))
     //通过索引获取键名
          console.log(sessionStorage.key(1))
            setTimeout(function () {
   //清除数据
    sessionStorage.removeItem('name')
                sessionStorage.clear()
           }, 3000)
       }


HTML5_Web Workers



Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程 创建 Worker 线程 ,将一些任务分配给它运行。


在主线程运行的同时, Worker 线程 在后台运行,两者互不干扰。等到 Worker 线程 完成计算任务,再把结果返回给主线程。


1、检测浏览器是否支持 Web Worker

if(typeof(Worker)!=="undefined")
   {
   // 是的! Web worker 支持!
   }
  else
   {
   // //抱歉! Web Worker 不支持
   }


2、创建 Web Worker 对象 , new Worker(脚本文件)

w = new Worker("./demo_workers.js");


3、定义 worker 具体任务

//demo_workers.js
var i=0
setInterval(function(){
    i=i+1
    postMessage(i)
},1000)


4、worker 发送接收消息


    发送消息, postMessage(消息)

//demo_workers.js
var i = 0;
setTimeout(function(){
    i=i+1
   postMessage(i)//使用postMessage(数据)发送
},3000)


添加 onmessage 事件监听器,监听接收消息,访问 event.data 获得消息

        w.onmessage = function (event) {
                document.getElementById("result").innerHTML = event.data;
               };


5、关闭 worker

Worker 线程无法读取本地文件,即不能打开本机的文件系统 ( file:// ),它所加载的脚本,必须来自网络。

rem介绍



rem :它就是一个css单位,代表元素字体的大小;指相对于根元素 的字体大小的单位


1、根元素字体大小

html{
 font-size:16px
}


2、设置其它元素大小

#box{
    width:10rem
}


JS设置根元素字体大小



使用响应式是不能为所有设备全适配,但是用 JS 是可以实现全适配。

window.onload = function () {
          document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px'
       }
        window.onresize = function () {
           document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px'
       }


rem应用


<style>
        html,
        body {
            width: 100%;
            height: 100%;
       }
        html,
        body,
        div,
        p,
        img,
        input {
            margin: 0;
            padding: 0
       }
        .header {
            width: 100%;
            height: 1.5rem;
            padding: 0rem 5.8rem;
            box-sizing: border-box;
            background-color: #eee;
            display: flex;
            align-items: center;
       }
        .left {
            width: 1.68rem;
            height: 0.63rem;
            line-height: 0.63rem;
       }
        .center {
            flex: 1;
            padding: 0.1rem 0.3rem;
            box-sizing: border-box;
            height: 0.4rem;
       }
        .center input {
            display: block;
            width: 100%;
            height: 0.4rem;
            border-radius: 0.4rem;
            border: 0.02rem solid #ff5000
       }
        input:focus {
            outline: none;
       }
        .right {
            width: 0.8rem;
            height: 0.8rem;
            line-height: 0.8rem;
       }
        img{
            width: 100%;
            height: 100%;
       }
   </style>
<div class="header">
        <div class="left">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" alt="" >
        </div>
        <div class="center">
            <input type="text">
        </div>
        <div class="right">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN0 1ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png" alt="">
        </div>
    </div>
    <script>
        window.onload = function () {
           document.documentElement.style.fontSize = (document.documentElement.clientWidth / 1920) * 100 + 'px'
       }
        window.onresize = function () {
           document.documentElement.style.fontSize = (document.documentElement.clientWidth / 1920) * 100 + 'px'
       }
    </script>
目录
打赏
0
0
0
0
56
分享
相关文章
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
60 29
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
18 1
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
54 5
《HTML5游戏编程核心技术与实战》一1.2 HTML5新特性初探
准备好HTML5开发工具之后,我都迫不急待地想看看HTML5给我们带来了哪些让人激动不已的新特性,相信,你也会和我一样,对它感到兴奋。由于HTML5新增加了很多元素,这里,我们重点简单介绍一下在游戏中会使用到的一些元素,在介绍每一个新的元素时,我都会列举一些小的例子。
1401 0
|
13天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
31 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34

热门文章

最新文章