H5新增API

最新推荐文章于 2024-04-25 15:05:53 发布
最新推荐文章于 2024-04-25 15:05:53 发布
阅读量396 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： H5新增API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44607694/article/details/101720493
版权

前言

HTML新增的API是放在移动端的 IE低版本浏览器就不要去考虑了(H5一般是在做移动端)

全屏显示

基本概念

  1. HTML5规范允许用户自定义网页上任一元素全屏显示(规定了任何元素都可以全屏显示)
  2. 元素.requestFullscreen() 开启全屏显示、document.cancleFullscreen() 关闭全屏显示、document.isFullScreen判断当前是否全屏状态下
  3. 不同浏览器兼容性不一样
  4. 全屏伪类div:-webkit-full-screen,一旦元素全屏就会触发伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏显示</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #box{
	    width: 200px;
	    height: 200px;
	    background-color: pink;
	}
        #div{
            width: 100%;
            height: 800px;
            background-color: red;
        }
        /*全屏伪类选择器 一旦元素全屏就会触发伪类选择器*/
        /*选择到全屏下的box  全屏状态激活这个选择器 这个伪类选择器也要加兼容前缀*/
        #box:-webkit-full-screen{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="div"></div>
        <button id="full">全屏显示</button>
        <button id="cancel">退出全屏</button>
        <button id="isfull">是否全屏</button>
    </div>
    <script>
        //获取显示元素
        var oBox = document.getElementById('box');

        //获取要点击功能的按钮
        var full = document.getElementById('full');
        var cancel = document.getElementById('cancel');
        var isfull = document.getElementById('isfull');

        
        //点击按钮让box全屏显示
        full.onclick = function(){
            /*
              元素.requestFullscreen()表示请求这个元素全屏显示

        	  requestFullScreen() 这个方法各个浏览器都有自己的方法来实现 
              所以让要让元素全屏显示  必须加上不同的浏览器的兼容前缀
              谷歌浏览器的兼容写法加上webkit兼容前缀，需要写驼峰写法才能符合代码规范
            */

            // 检测当前浏览器是什么浏览器，有能力执行对应的全屏的方法(检测这个方法有没有在对应浏览器上面的方法) 
            // 这种方式叫做浏览器的能力检测
            
            //兼容不同的浏览器，让所用浏览器都可以全屏显示
            if (oBox.webkitRequestFullScreen) {//谷歌浏览器
                oBox.webkitRequestFullScreen()
            } else if (oBox.mozRequestFullScreen) {//火狐浏览器
                oBox.mozRequestFullScreen()
            } else if (oBox.oRequestFullScreen) {//欧朋浏览器
                oBox.oRequestFullScreen()
            } else {//IE浏览器
                oBox.msRequestFullScreen()
            }
        }

        //退出全屏显示有两种方式
        //1.在全屏中退出全屏按键盘上的Esc键即可
        //2.document.cancelFullScreen()这个方法可以取消全屏显示

        //点击按钮让box退出全屏
        cancel.onclick = function(){
            // cancelFullScreen 这个方法可以取消全屏显示, 这个方法只能是document这个对象调用
            //不是让元素退出全屏 而是让docuemnt退出全屏

            //兼容所有浏览器退出全屏显示
            if (document.webkitCancelFullScreen) {//谷歌浏览器
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {//火狐浏览器
                document.mozCancelFullScreen();
            } else if (document.oCancelFullScreen) {//欧朋浏览器
                document.oCancelFullScreen();
            } else {//IE浏览器
                document.msCancelFullScreen();
            }
        }

        isfull.onclick = function(){
             // isFullScreen 这个方法可以判断是否在全屏状态下, 这个属性只能是document这个对象调用

             //判断当前是否全屏状态下
             alert(document.webkitIsFullScreen);
        }
        /*
         requestFullscreen()让元素全屏显示的兼容前缀
         cancelFullScreen()让元素退出全屏显示兼容前缀
         isFullScreen判断元素是否全屏显示

         各大浏览器兼容前缀
         谷歌浏览器  webkit
         火狐浏览器  moz
         欧朋        o
         IE         ms
        */
    </script>
</body>
</html>

全屏显示

HTML5规范规定页面中的任何元素都能够全屏显示

dom.requestFullScreen  dom开启全屏显示

document.cancelFullScreen  关闭全屏显示

document.isFullScreen  是否全屏

由于全屏显示功能在各浏览器的兼容性不同      所以不同的浏览器中需要加不同的兼容前缀

  1. 谷歌  webkit
  2. 火狐  moz
  3. 欧朋浏览器    o
  4. IE浏览器     ms

:full-screen       全屏伪类选择器

 

网络检测

基本概念

  1. HTML5提供两个事件来检测网络状态这两个事件检测的都是window对象

  2.  online  当从断网到连网  会触发回调函数

  3. offline  当从连网到断网  会触发回调函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			user-select: none;
		}
		#tips{
			display: none;
			width: 200px;
			height: 50px;
			margin: 100px auto;
			text-align: center;
			line-height: 50px;
			background-color: rgba(0,0,0,.5);
			color: #fff;
		}
	</style>
</head>
<body>
   <div id="tips"></div>
   <!-- 引用jQuery -->
   <script src="../jquery-3.4.1.js"></script>
   <script>
    /*
       H5 提供了检测设备网络状态的事件

       HTML5提供两个事件来检测网络状态这两个事件检测的都是window对象

       online  当从断网到连网  会触发回调函数
    
       offline  当从连网到断网  会触发回调函数
    */

     //当你一旦连接网络了，就提示恭喜你，网络已重连(当从断网到连网) 网络已连接
	 //当你一旦断开网络了，就提示对不住了，网络已断开(从连网到断网) 网络已断开
     $(document).ready(function(){
     	 //当从断网到连网
     	 window.addEventListener('online',function(){
     	 	//tips淡入  2000ms 之后淡出
     	 	$('#tips').text('恭喜你，网络已重连').fadeIn().delay(2000).fadeOut();
     	 },false)

     	 //当从连网到断网
     	 window.addEventListener('offline',function(){
     	 	//tips淡入  2000ms 之后淡出
     	 	$('#tips').text('对不住了，网络已断开').fadeIn().delay(2000).fadeOut();
     	 },false)
     });
   </script>
</body>
</html>

检测网络状态

HTML5提供两个事件来检测网络状态   这两个事件检测的都是window对象

online     网络连接时

offline      网络断开时

谷歌浏览器在线断网

 

读取文件

前言

type类型是file的input框表示上传文件，multiple让file上传多张图片

<!-- type类型是file的input标签表示上传文件 
	 multiple让file上传多张图片
-->
<input type="file" multiple>

基本概念

当你点击了type类型是file的input框时，触发了input的onchange事件，但你从本地上传了数据也触发了input框的onchange事件

当type类型是file的input框时，你点击上传文件的时候，input节点的files这个属性存储了上传文件的数据集合(文件读取对象) ，files第0项存储了(当前文件的数据)返回结果是一个文件对象存储了文件的数据

点击type类型是file的input时，files属性:name文件的名字 ，size子节/1024/1024=M文件的大小 ，type文件的格式  ，文件lastModified上一次所更新的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- type类型是file的input标签表示上传文件 
            multiple让file上传多张图片
    -->
    <input type="file"  multiple>
    <script>
       /*
        单纯的上传图片只能出现一个文件名字
        但是我想显示上传图片是显示上传的文件(不要显示文件的名字)在计算机本地的文件显示到网页当中
       */
        var input = document.querySelector('input');

        //点击上传文件存触发一个事件
		//触发了input的onchange事件，但你从本地上传了一个文件触发了input节点的onchange事件

        //当文件上传时 会触发回调函数
        input.onchange = function(){
            //文件读取对象

       // files 这个属性存储了 上传文件的集合(文件读取对象)
       // 理论上一个文件他是一组波数据，通过file类型的input把本地的图片作为数据上传到了JS引擎中(被JS引擎存储起来了)

       //文件的数据其实存储在一个属性当中的
	   //存储到input节点中的files属性中的第0项存储了(当前文件的数据)索引0的位子有一个文件对象存储了图片的数据

       console.log(this.files[0]);

       //name图片的名字 size子节/1024 type图片的格式  lastModified上一次所更新的时间
	   //一个索引项表示一张图片的数据

         console.dir(this.files);//返回结果是一个类数组当前数据原型是FileList(他是一个构造函数)
        }
    </script>
</body>
</html>

基本概念

  1. H5提供了FileReader这个构造函数让我们读取本地的文件 （var reader = new FileReader();//文件读取对象）
  2. reader.readAsText(文本文件)               读取文本文件

  3. reader.readAsDataURL(图片文件)       读取图片文件

  4. reader.result   返回结果是一些字符，这些字符就是一个文件(把文件用base64位的字符拼成一个文件)用base64给不同的字符表示一个文件

  5. 用new Image()启动的一个构造函数和 document.createElement('img')方式创建img节点的方式完全一致

上传图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file"  multiple>
    <script>
       var input = document.querySelector('input');

        input.onchange = function () {
            //有了数据我要把的数据上传到页面当中(预览)
            //把数据转换成图片
            var file = this.files[0];//获取图片的数据

            //通过new启动了一个FileReader构造函数，这个构造函数是H5给原生JS内置的一个新的构造函数

            //生成一个有读取文件能力的对象
            var reader = new FileReader();

            //只要是通过new启动了FileReader构造函数就会返回一个对象，这个对象他是能够拥有读取文件能力的一个对象

            //设置文件的格式
            //读取图片请使用readAsDataURL(图片的数据)
            // 读取文件对象吧file图片给读取出来了，读取出来的是一个URL(格式)
            reader.readAsDataURL(file);//异步
            //图片有大有小是读取URL是一个异步操作

            //当你把图片的数据读取出来在做一些事情
            //等文件读取对象 读完了file的数据之后  会触发onload事件
            reader.onload = function () {

                //读取出来的数据存储在文件读取对象中的result属性上面
                // console.log(this.result);//返回结果是一些字符
                // 这些字符就是一张图片(把图片用base64位的字符拼成一张图片)用base64给不同的字符表示一张图片

                // base64用字符来表示图片
                // 创建img节点 和 document.createElement('img')方式完全一致的
                var oImg = new Image();


                //等图片的资源加载完毕值在添加到body元素当中
                oImg.src = this.result;//把URL路径给到src属性上面(异步代码)
                oImg.width = 200;

                //等图片加载完成添加到body节点内
                oImg.onload = function () {
                    document.body.appendChild(this);
                }

		/*
                   把当前的图片用base64位展示的图片以字符串形式的方式打印出来

                   原本的图片大小小于用base64位展示图片

                   这就是用base64位展示图片的缺陷
		*/
            };
        };
    </script>
</body>
</html>

上传文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			user-select: none;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<input type="file" multiple>
	<script>
		var input = document.querySelector('input');
		var oBox = document.getElementById('box');

		//当文件上传时 会触发回调函数
		//图片png jpg等图片 文本文件tet md html css js等文件
		input.onchange = function(){
			var file = this.files[0];

			//生成一个有读取文件能力的对象
			var reader = new FileReader();//文件读取对象

			//读取文本
			reader.readAsText(file);//异步操作

			reader.onload = function(){
			//等到reader里面的result数据读取完毕就会触发onload事件

			// console.log(this.result);//result属性存储了文件使用数据

			   oBox.innerText = this.result;//添加到页面上

			};	
		}
	</script>
</body>
</html>

读取文本文件的时候一定要保证文件的格式编码是UTF-8才能读取文本文件

读取文件

H5提供了FileReader这个构造函数让我们读取本地的文件   步骤如下

var   reader   =   new  FileReader()	   	//创建对象  该对象能够读取文件
reader.readAsText(文本文件)	//读取文本文件
reader.readAsDataURL(图片文件)	 //读取图片文件
reader.onload = function(){		//等读取好数据之后    打印读取好的数据	 
      console.log(this.result) //获取文件的数据
}

Blob

前言

用base64位解析的图片或者是文件，解析出来的文件往往大于没有被解析的文件，所以在这种情况下Blob构造函数就诞生了

  1. var blob = new Blob([图片文件对象])   当图片文件对象作为参数传递到Blob构造函数里面的时候必须是以数组的形式传递进去

  2. var url = window.URL.createObjectURL(blob)  通过这个方法把blob对象传递去生成一个网址(字符串)就是一张图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="file" multiple>
	<script>
		//用base64为展示图片的缺陷
		//解决方案把图片的数据用Blob构造函数处理一下
		var input = document.querySelector('input');

		//上传图片触发了onchange事件
		input.onchange = function(){
			//把数据转换成图片
			var file = this.files[0];//获取图片的数据

			var blob = new Blob([file]);//把要处理的数据放在在一个数组当中，当做Blob参数传递去(必须是以数组的形式放置数据)
			//通过Blob函数把图片对象file  解析成blob

			//把图片的数据放在在，用new 生成Blob构造函数当中 参数用一个数组里面放在数据 
			console.log(blob)

			var url = window.URL.createObjectURL(blob);
			//通过window.URL.createObjectURL把生成好了的blob对象传递去生成一个网址
			//这个生成的网址(字符串)就是一张图片
			
			// 把生成的blob对象传入到  createObjectURL函数中 生成一个url
			console.log(url)

			var oImg = new Image();
			oImg.src = url;
			oImg.width = 200;

			//等图片加载完毕添加到body当中
			oImg.onload = function(){
				document.body.appendChild(oImg);
			};
		}
	</script>
</body>
</html>

base64格式的图片太大  可以使用Blob函数把图片文件对象转换成一个blob对象

var   blob  =   new   Blob([图片文件对象])		//生成blob对象	
var   url  =   URL.createObjectURL(blob)		//生成一个地址

H5拖拽

前言

在浏览器里面里面(除了图片和文字)以外的元素默认都是不可以被拖拽的，想要拖拽某个元素必须在HTML标签里面加上draggable='true'属性表示当前元素是可以被拖拽的

H5规定了任何想要拖拽的元素必须加上draggable='true'这个属性表示当前这个元素是可以被拖拽的

img图片默认是可以被拖拽的(不需要加上draggable='true'属性)

<div id="left">目标区域</div>
<div id="right" draggable='true'>拖拽元素</div>
<!-- 当前元素是可以被拖拽的(元素默认是不可以被拖拽的) -->
<!-- 元素默认是不可以被拖拽的  如果想要其可以拖拽 必须加上draggable="true" -->

 H5新增的属性个个浏览器都兼容的不是很好，兼容都没有统一

H5的拖拽他是由两个部分组成的

  1. 拖拽源对象

  2. 拖拽目标元素

拖拽源对象

dragstart  当鼠标在拖拽元素上按下时 触发

//当你一开始拖拽元素就会触发这个事件(鼠标按下)
oRight.ondragstart = function(){
    //一旦拖拽这个元素就触发ondragstart事件
    console.log('ondragstart事件')
};

 drag  持续触发 当鼠标在拖拽元素上时触发 不论鼠标有没有运动

//当鼠标在拖拽元素上面拖拽时触发这个事件(鼠标移动)
oRight.ondrag = function(){
    console.log('ondrag事件');
    //在拖拽元素之上(拖拽元素的虚影)就会触发ondrag事件
};

 dragend   当鼠标在拖拽元素上抬起时  触发

//当鼠标在拖拽元素上面抬起时触发这个事件(鼠标抬起)
oRight.ondragend = function(){
    console.log('ondragend事件');
    //当鼠标在拖拽元素抬起时触发这个事件
};//end(结束)

拖拽源对象

  1. dragstart  当鼠标在拖拽元素上按下时 触发

  2. drag  持续触发 当鼠标在拖拽元素上时触发 不论鼠标有没有运动

  3. dragend   当鼠标在拖拽元素上抬起时  触发

拖拽目标元素（拖拽区域）

都是绑定在目标元素里面的，都是根据鼠标有没有进入目标元素来判断是否激活当前事件

ondragenter   当鼠标进入到拖拽区域时触发

//当鼠标进入目标元素里面就会触发dragenter事件
oLeft.ondragenter = function(){
    console.log('ondragenter事件');
    //鼠标进入目标元素里面触发dragenter事件
};

ondragleave   当鼠标离开到拖拽区域时触发

//当鼠标离开目标元素里面触发dragleave事件
oLeft.ondragleave = function(e){
    console.log('ondragleave事件');
    //鼠标离开目标元素就会触发这个事件
};

ondragover  常用 当鼠标在拖拽区域时持续触发  不论鼠标有没有运动 (常用于清除浏览器默认事件，激活drop事件)

//当鼠标在目标区域中移动触发dragover事件
oLeft.ondragover = function(e){
    console.log('ondragover事件');//当鼠标在目标区域上面时触发ondragover事件

    //这样写很保险的阻止掉了默认行为
    e.preventDefault();//阻止默认行为(必写)
    e.stopPropagation();//阻止事件冒泡
    return false;
};

ondrop      常用  当鼠标在目标区域抬起时触发 需要在dragover事件中阻止默认行为 默认情况下  浏览器会阻止这个事件的触发

//当鼠标在目标元素上面抬起触发ondrop事件
oLeft.ondrop = function(){
    //默认是浏览器无法感知ondrop这个事件的(这种情况是浏览器的默认行为)我们需要在dragover事件中阻止默认行为
    console.log('ondrop事件');
};

拖拽目标元素（拖拽区域）

都是绑定在目标元素里面的，都是根据鼠标有没有进入目标元素来判断是否激活当前事件

  1.  ondragenter   当鼠标进入到拖拽区域时触发
  2.  ondragleave   当鼠标离开到拖拽区域时触发
  3. ondragover  常用 当鼠标在拖拽区域时持续触发  不论鼠标有没有运动
  4. ondrop      常用  当鼠标在目标区域抬起时触发 需要在dragover事件中阻止默认行为 默认情况下  浏览器会阻止这个事件的触发

总结

H5拖拽

H5拖拽有两个部分组成    拖拽元素 + 目标元素

拖拽元素的事件

  1. ondragstart  鼠标按下拖拽元素时触发  常用  一般在这个事件中存储数据 
  2. ondrag  在拖拽元素的过程中持续触发     
  3. ondragend  鼠标抬起拖拽元素时触发

目标元素的事件

  1. ondragenter  当鼠标进入目标元素内部触发
  2. ondragover  当鼠标在目标元素上部移动时持续触发        常用
  3. ondragleave  当鼠标离开目标元素内部时触发
  4. ondrop  当鼠标在目标元素抬起时触发   常用

浏览器的默认行为会阻止该事件  只要在dragover阻止这个默认行为  浏览器就能检测drop事件 

巧克力很苦
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5: 使用Web Audio API播放音乐
干饭搬砖两不误。
11-03 1470
为了兼容安卓与IOS，使用AudioContext播放音乐。
H5新API
qq_57104988的博客
08-30 385
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高。// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置。 3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。...
H5 Geolocation API 遇到的坑及总结
最新发布
Garlen20o的博客
04-25 1068
记录一次开发过程中使用 Geolocation API的时候，遇到的问题。环境：手机端safari，Android 自带浏览器， PC—chrome edge Firefox。
小程序H5 audio相关用法
weixin_50236973的博客
05-22 368
【代码】小程序audio用法。
HTML5 Audio API在音乐应用中的使用技巧及注意事项
derickForster的博客
04-19 979
HTML5 Audio API为音乐应用开发者提供了强大的音频操作功能，使得开发者能够轻松实现音频的播放、控制等功能。然而，在使用该API时，开发者需要注意一些技巧和注意事项，以确保应用的稳定性和用户体验。然而，在使用HTML5 Audio API时，开发者也需要注意一些技巧和注意事项，以确保应用的稳定性和用户体验。通过HTML5 Audio API，开发者可以在网页上嵌入音频元素，并使用JavaScript来操作这些元素，实现音频的播放、暂停、控制音量等功能。来自：www.maoxianjiu.cn。
h5新增的一些api
听闻青春丶
08-02 8514
1.1 网络状态 我们可以通过window. navigator.onLine来检测，用户当前的网络状况，返回一个布尔值，这个不能实时的通知。 addEventListener 进行绑定online从没网络到有网络的时候调用 addEventListener 进行绑定.offline从有网络到没网的时候调用 事件是给window绑订的 1.2 地理定位 HTML规范中，增加了获取用户地...
h5api_H5api_
09-29
总的来说，"H5api_H5api_" 提供的资源可能包括一个H5API的实现库，一个用于调试或数据导出的工具（h5dmp.exe），以及可能涉及硬件安全的动态链接库（haspms32.dll）。这些组件共同构成了一个完整的开发环境，旨在...
HTML5学习笔记之History API
09-28
系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，
H5学习资料
03-21
3. **离线存储**：通过离线存储API（离线存储即Web Storage，包括localStorage和sessionStorage），H5允许网页在用户设备上存储数据，即使在网络断开的情况下也能访问部分页面内容。 4. **Canvas画布**：元素为动态...
H5前端开发
10-31
8. **表单控件增强**：HTML5改进了表单控件，如新增了date、time、email、url等输入类型，以及placeholder属性，提高了表单的用户体验和数据验证能力。 9. **拖放功能**：HTML5的拖放API使得元素可以轻松地在网页...
H5搭建教程
07-31
1. 新增语义化标签：例如、、、、和等，这些标签有助于提高网页的结构化和可读性。 2. 多媒体支持：HTML5内置了和元素，无需插件即可播放音频和视频。 3. Canvas绘图：提供了一个JavaScript API，用于在网页上动态...
H5Plus API使用
06-21
Contact 管理系统通讯录，如对系统通讯录进行增、删、改、查等操作 Device 管理设备信息，用于获取手机设备信息、系统信息、网络信息等
h5视频代码实现
12-05
在现代网页设计中，HTML5（H5）的引入为开发者...`<video>`是HTML5中新增的元素，用于在网页上嵌入视频内容。它允许开发者直接在网页上播放视频，无需依赖Flash等第三方插件。`<video>`标签的基本结构如下： ```html ...
H5前端教程
01-01
2. **多媒体支持**：H5新增了对音频()和视频()元素的内置支持，使得在网页中嵌入多媒体内容变得更加简单，不再依赖Flash等插件。 3. **离线存储**：通过离线存储机制（AppCache），H5允许网页在离线状态下仍然可以...
H5商城.zip
09-04
CSS3在H5商城中起着至关重要的作用，其新增的模块如选择器、动画、过渡、格栅系统等，为商城界面设计提供无限可能。Flexbox和Grid布局允许灵活的响应式设计，适应不同屏幕尺寸的设备，确保用户在任何设备上都能获得...
H5 picture
05-18
H5的File API允许在浏览器中读取、操作和存储用户上传的图片文件，如预览、旋转、压缩等，提供了更强大的图片处理能力。 9. **Image懒加载** 对于长页面，利用JavaScript实现图片的懒加载（Lazy Load）策略，可以...
H5 api
weixin_52163042的博客
04-20 392
陀螺仪 简介： 陀螺仪是测量物理量的偏转、倾斜时的转动角速度。赛车、跑酷游戏里最常见的转动手机控制方向。 兼容： iphone和ipad必须在https协议中才能使用，系统11.1.x以前是可以使用的。 使用： 需要搭建服务后，链接wifi更改ip地址为本地的ip地址后运行 1.deviceorientation事件 指南针、手机倾斜 aplha：装置水平放置时，绕 Z 轴旋转的角度，数值为 0 度到 360 度。 beta：行动装置水平放置时，绕 X 轴旋转的角度，数值为 -180 度到 180 度
H5的新特性及部分API详解
热门推荐
charlene0824的博客
08-09 4万+
h5新特性总览移除的元素**纯表现的元素：**basefont、big、center、font等 **对可用性产生负面影响的元素：**frame、frameset、noframes新增的API语义：能够让你更恰当地描述你的内容是什么。 连通性：能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行（离线
html怎么获取audio的状态,HTML5 Audio标签方法和函数API介绍
weixin_28937395的博客
05-31 2145
文章目录：audio常用属性audio音乐格式的支持audio属性参数说明最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大家有所帮助。audio常用属性那么首先来看一下audio标签中的一些常用属性：属性属性值注释srcurl播放的音乐的url地址(火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持)preloadpreload预加载(在页面被加载时进行加...
h5入门教程 csdn
05-19
以下是一个简单的 H5 入门教程，希望对你有所帮助： 1. HTML5 是什么？ HTML5 是 HyperText Markup Language 的第五个版本，是 web 开发的一种核心技术，它提供了一系列新的标签、功能和 API，可以让网页更加丰富...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值