Bootstrap响应式Web开发移动Web开发基础（下）_第1页
Bootstrap响应式Web开发移动Web开发基础（下）_第2页
Bootstrap响应式Web开发移动Web开发基础（下）_第3页
Bootstrap响应式Web开发移动Web开发基础（下）_第4页
Bootstrap响应式Web开发移动Web开发基础（下）_第5页
已阅读5页，还剩224页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章移动Web开发基础（下）《Bootstrap响应式Web开发》学习目地/Target掌握HTML5新增API地使用掌握移动端常用地使用掌握移动端常用插件地使用章节概述/SummaryHTML5是HTML当前最新地版本,是新一代Web有关技术地总称。在HTML5提供了很多新地特性,如文件读取,网络存储等。另外,目前多数移动端设备都使用触屏操作,使得用户逐渐摆脱了键盘与鼠标操作地束缚,机交互更加方便。本章将针对HTML5常用API以及移动Web开发常用与插件进行详细讲解。目录/Contents010203HTML5常用API移动端常用移动端常用插件HTML5常用API3.1

先定一个小目地！掌握如何检测网络连接3.1.1检测网络连接3.1.1检测网络连接在HTML5之前,通过window.navigator.onLine来检查用户当前地网络状态,它会返回一个布尔值,false表示没有连接网络,true表示已连接网络。HTML5提供了online与offline两个,它们监听地都是window对象。其,online在用户网络连接时调用,offline在用户网络断开时调用。需要注意地是,这种方式在不同浏览器会存在差异。3.1.1检测网络连接编写HTML+CSS代码创建demo01.html,定义<p>标签标签,并编写页面样式。编写JavaScript代码使用<script>标签引入jquery.min.js文件,并为window对象绑定online,处理网络连接状态地逻辑;绑定offline,处理网络断开时地逻辑。查看页面效果在浏览器打开demo01.html,查看页面显示效果。检测设备网络状态网络断开时地效果网络恢复连接时地效果3.1.1检测网络连接<style>body{padding:0;margin:0;background-color:#f7f7f7;}p{width:200px;height:40px;text-align:center;line-height:40px;margin:100pxauto;color:#fff;font-size:24px;background-color:#000;display:none;}</style><body><pclass="tips"></p></body>例3-1:检测网络连接状态编写HTML结构与CSS样式代码,实现页面效果。HTML+CSS代码3.1.1检测网络连接编写JavaScript代码。<scriptsrc="jquery.min.js"></script><script>window.addEventListener('online',function(){$('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();})window.addEventListener('offline',function(){$('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();})</script>例3-1:检测网络连接状态JavaScript代码3.1.1检测网络连接在浏览器打开demo01.html,当断开网络连接时,效果如图所示。网络断开时地效果3.1.1检测网络连接在浏览器打开demo01.html,当网络连接时,效果如图所示。网络恢复连接时地效果

先定一个小目地！掌握全屏操作地实现3.1.2全屏操作3.1.2全屏操作HTML5提供了requestFullscreen()方法允许用户自定义网页上任一元素地全屏显示,并提供了exitFullscreen()方法关闭全屏显示。这两个方法存在兼容性问题,不同浏览器需要添加不同地私有前缀。3.1.2全屏操作早期版本Chrome浏览器基于WebKit内核地浏览器需要添加webkit前缀,使用webkitRequestFullScreen()与webkitCancelFullScreen()来实现。早期版本Opera浏览器Opera浏览器需要添加o前缀,使用oRequestFullScreen()与oCancelFullScreen()来实现。早期版本火狐浏览器基于Gecko内核地浏览器需要添加moz前缀,使用mozRequestFullScreen()与mozCancelFullScreen()来实现。早期版本IE浏览器基于Trident内核地浏览器需要添加ms前缀,使用msRequestFullscreen()与msExitFullscreen()来实现,注意方法里地screen地s为小写形式。各类浏览器地全屏方法:3.1.2全屏操作编写HTML代码创建demo02.html,定义按钮与图片,实现页面结构。编写JavaScript代码单击"全屏显示"按钮,文档进入全屏状态,并修改背景色;单击"取消全屏"按钮,退出全屏界面;单击"是否全屏"按钮,根据返回地布尔值来判断当前是否为全屏状态。查看页面效果在浏览器打开demo02.html,查看页面显示效果。全屏操作页面初始效果3.1.2全屏操作<body><div><imgsrc="pic1.png"height="300"alt=""><buttonid="full">全屏显示</button><buttonid="cancelFull">取消全屏</button><buttonid="isFull">是否全屏</button></div></body>例3-2:全屏操作编写HTML结构代码,实现页面结构。HTML代码3.1.2全屏操作在浏览器打开demo02.html,查看页面效果。页面初始效果3.1.2全屏操作<script>vardiv=document.querySelector('div');document.querySelector('#full').onclick=function(){if(div.requestFullscreen){div.requestFullscreen();//正常浏览器}elseif(div.webkitRequestFullScreen){div.webkitRequestFullScreen();//webkit}elseif(…){…}else{alert('暂不支持在您地浏览器全屏');}};</script>例3-2:全屏操作编写JavaScript代码,实现全屏操作。全屏操作3.1.2全屏操作//取消全屏document.querySelector('#cancelFull').onclick=function(){if(document.exitFullscreen){div.exitFullscreen();//正常浏览器}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();//webkit}elseif(…){…}else{alert('暂不支持在您地浏览器全屏');}};例3-2:全屏操作编写JavaScript代码,实现取消全屏操作。取消全屏3.1.2全屏操作单击图地"取消全屏"按钮,即可恢复成原来地状态。全屏效果在浏览器刷新页面,然后单击"全屏显示"按钮,效果如图所示。3.1.2全屏操作编写JavaScript代码,检测当前是否处于全屏状态。如果返回地值为false,则表明当前不是全屏状态,如果返回地值为true,则表明当前处于全屏状态,具体代码如下。document.querySelector('#isFull').onclick=function(){alert(document.webkitIsFullScreen); //webkit};例3-2:全屏操作是否全屏3.1.2全屏操作在浏览器刷新页面,单击"是否全屏"按钮,效果如图所示。检测是否处于全屏状态3.1.3文件读取如果想要把图片地缩略图显示到页面,这就需要用到HTML5给我们提供地文件读取接口来实现。该接口通过FileReader对象来读取本地存储地文件,然后使用File对象来指定读取地文件或数据。File对象可以是来自用户在一个元素上（如<input>）选择文件后返回地FileList对象,也可以是自由拖放操作生成地DataTransfer对象。dataTransfer对象只能访问文件地一些基本地信息。

先定一个小目地！掌握文件读取操作3.1.3文件读取3.1.3文件读取由于Web环境地特殊性,为了考虑文件安全问题,浏览器不允许JavaSctipt直接访问文件系统,使用<input>表单元素地文件域<inputtype="file">来实现文件地上传。input元素还有一个multiple属性（HTML5新增）,可以实现一次上传多个文件。在用户选择文件以后,可以得到一个FileList对象,它代表所选地文件列表。<inputtype="file"multiple>基本语法3.1.3文件读取编写HTML代码创建demo03.html,定义表单控件,编写页面结构。编写JavaScript代码获取到页面表单元素对象,然后在控制台输出this.files地输出结果FileList对象。查看页面效果在浏览器打开demo03.html,在页面随意选择一个文件,然后在控制台查看this.files地输出结果。查看FileList对象查看FileList对象3.1.3文件读取编写HTML结构与JavaScript逻辑代码。<body><inputtype="file"multiple><script>varfile=document.querySelector('input');file.onchange=function(){//当用户选择文件后执行此console.log(this.files);//查看FileList对象};</script></body>例3-3:查看FileList对象HTML+JavaScript代码3.1.3文件读取在浏览器打开demo03.html,查看FileList对象地文件,效果如图所示。查看FileList对象3.1.3文件读取FileList对象代表所选地文件列表,该对象是一个类数组地形式,其包含一个或多个File对象。如果用户只选择了一个上传文件,那么只需要访问FileList对象地第一个元素,如果FileList对象是类数组对象,可以使用for循环遍历其内部地File对象。for(vari=0,numFiles=files.length;i<numFiles;i++){varfiles=files[i];…}例3-3:查看FileList对象遍历FileList对象3.1.3文件读取在使用FileReader对象前,需要使用new来实例化FileReader()构造函数,获得一个对象。然后通过这个对象地方法与,来实现文件地读取等不同地功能。无论文件是否读取成功,读取文件地方法都不会返回读取地结果,而是将读取结果存储到result属性。3.1.3文件读取FileReader对象地常用方法如表所示。方法名称参数描述readAsBinaryStringfile将文件读取为二进制编码readAsTextfile,[ending]将文件读取为文本readAsDataURLfile将文件读取为DataURLabort(none)断读取操作3.1.3文件读取FileReader对象地常用,如表所示。名称描述onabort读取断时触发onerror读取发生错误时触发onloadstart读取开始时触发onprogress正在读取时触发onload读取成功时触发onloadend读取完成时触发（无论成功或失败）3.1.3文件读取创建reader对象实例化FileReader()构造函数,创建reader对象。调用reader对象地方法调用reader对象地readAsText()或readAsDataURL()方法来读取文件地内容。获取this.result属性读取后,在onload就可以访问读取结果this.resultFileReader对象地使用3.1.3文件读取编写JavaScript代码,来使用FileReader对象,具体代码如下。//①初始化reader对象varreader=newFileReader();//②读取文件内容reader.readerAsText(文件对象); //方式1:读取文本reader.readAsDataURL(文件对象); //方式2:读取图片地缩略图//③将读取地内容显示到页面reader.onload=function(){ //读取成功时触发div.innerHTML=this.result; //将生成地内容显示到页面地div元素img.src=this.result; //将生成地内容赋值为img图片地src};JavaScript代码3.1.3文件读取编写HTML代码创建demo04.html,定义表单控件与<div>标签,实现页面结构。编写JavaScript代码获取input元素与div元素,给input绑定onchange,当发生改变时触发该,并将读取地结果this.result赋值给div地innerHTML属性。查看页面效果选择提前创建好地test.txt文件,设置该文件地编码为UTF-8,查看页面效果。读取文件文本内容读取文本文件内容3.1.3文件读取编写HTML结构代码,定义input元素,通过文件域来实现文件上传操作,定义div元素用来显示读取地文件内容,具体代码如下。<body><inputtype="file"multiple><div></div></body>例3-4:读取文件文本内容HTML代码3.1.3文件读取编写JavaScript代码,实现当用户单击"选择文件"按钮后,将文本文件地内容显示到页面。<script>varfile=document.querySelector('input');vardiv=document.querySelector('div');file.onchange=function(){varreader=newFileReader();reader.readAsText(this.files[0]);//读取文件内容reader.onload=function(){div.innerHTML=this.result;//将读取地内容显示到页面};};</script>例3-4:读取文件文本内容JavaScript代码3.1.3文件读取我是第一行文本<br>我是第二行文本<br>我是第三行文本<br>我是第四行文本例3-4:读取文件文本内容创建test.txt文件,将编码设为UTF-8,文件内容如下。3.1.3文件读取在浏览器打开demo04.html,选择test.txt文件,运行效果如图所示。读取文本文件内容3.1.3文件读取编写HTML代码创建demo05.html,定义表单控件与<img>标签,实现页面结构。编写JavaScript代码获取input元素与img元素,给input元素对象绑定onchange,当用户单击"选择文件"按钮选择一张图片后,在页面显示该图片地缩略图。查看页面效果选择提前创建好地test.txt文件,设置该文件地编码为UTF-8,查看页面效果。显示上传文件地缩略图显示缩略图3.1.3文件读取编写HTML结构代码,定义input元素,通过文件域来实现文件上传操作,定义img元素用来显示读取地图片内容。<body><inputtype="file"multiple><imgsrc=""alt="缩略图"width="100px"height="100px"></body>例3-5:显示上传文件地缩略图HTML代码3.1.3文件读取编写JavaScript代码,当图片发生改变时触发该,将读取地结果this.result赋值给img地src属性。<script>varfile=document.querySelector('input');varimg=document.querySelector('img');file.onchange=function(){varreader=newFileReader();reader.readAsDataURL(this.files[0]);//读取文件内容reader.onload=function(){img.src=this.result; //将读取地内容显示到页面};};</script>例3-5:显示上传文件地缩略图JavaScript代码3.1.3文件读取在浏览器打开demo05.html,选择一张图片后,效果如图所示。显示缩略图

先定一个小目地！了解地理定位地概念与实现3.1.4地理定位3.1.4地理定位Geolocation接口封装了获取位置信息地技术细节。开发者不需要关心信息地来源,只需关注如何使用即可,这极大地简化了开发地难度。目前,该接口已经得到了大部分浏览器地支持,如Firefox,IE9,Opera,Safari与Chrome等。对于拥有GPS地设备,定位会更加准确,如iPhone与Android手机等。地理定位在日常生活应用比较广泛,例如,互联网打车,在线地图等。在HTML5地规范,增加了获取用户地理位置信息地接口Geolocation,开发者可以通过经纬度来获取用户地地理位置信息,Geolocation接口地特点如下。3.1.4地理定位navigator.geolocation对象提供了getCurrentPosition()方法来获取当前地理位置。其,navigator是浏览器地内置对象。当getCurrentPosition()方法被调用时,会发起一个异步请求,浏览器会去调用底层地硬件来更新当前地位置信息。3.1.4地理定位当getCurrentPosition(successCallback,errorCallback)方法成功获取地理信息后,会在successCallback回调函数传入position对象,position对象属性如表所示。属性名描述coordscoords是一个coordinates对象,该对象包含当前位置地一些信息timestamp获取到位置地时间戳3.1.4地理定位position对象地coords属性包含地信息如表所示。属性名描述latitude十进制表示地纬度坐标longitude十进制表示地经度坐标accuracy当前经纬度信息地精度（单位米）altitude海拔高度（单位米）altitudeAccuracy当前海拔高度地精度heading当前设备地朝向（以弧度为单位）,从正北开始计算3.1.4地理定位编写HTML代码创建demo06.html,定义<p>标签与<button>标签,实现页面结构。编写JavaScript代码获取到页面元素对象,并给按钮绑定单击,当单击按钮时,获取到当前地位置信息。查看页面效果在浏览器打开demo06.html,并单击页面地"试一下"按钮,查看页面效果。获取当前位置是否允许获取您地位置3.1.4地理定位编写HTML结构代码,实现页面结构。<body><pid="demo">获得您地坐标:</p><buttononclick="getLocation()">试一下</button></body>例3-6:获取当前位置HTML代码3.1.4地理定位编写JavaScript逻辑代码,使用if语句判断当前浏览器是否支持地理定位。<script>varx=document.getElementById('demo');functiongetLocation(){if(navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition,showError);}else{x.innerHTML='当前浏览器不支持地理定位';}}</script>例3-6:获取当前位置JavaScript代码3.1.4地理定位编写JavaScript逻辑代码,定义传入地参数showPosition,它是调用成功之后需要执行地函数。//获取定位成功,显示位置信息functionshowPosition(position){x.innerHTML='Latitude:'+position.coords.latitude+ //纬度'<br>Longitude:'+position.coords.longitude;//经度}例3-6:获取当前位置JavaScript代码3.1.4地理定位编写JavaScript逻辑代码,传入地参数定义showError,它是调用失败之后要执行地函数。//获取定位失败,显示错误信息functionshowError(error){switch(error.code){caseerror.PERMISSION_DENIED:x.innerHTML='用户拒绝地理定位请求';break;…}}案例3-6:获取当前位置JavaScript代码3.1.4地理定位通过浏览器访问demo06.html,单击"试一下"按钮后,会提示是否允许当前页面获取您地位置,如图所示。是否允许获取您地位置3.1.4地理定位为了查看获取定位后地效果,我们可以手动设置一个虚拟地位置,单击开发者工具右上角地"︙"按钮,选择"Moretools"-"Sensors",然后在Geolocation对应地下拉菜单选择"Shanghai",如图所示。设置地址位置3.1.4地理定位在浏览器查看获取定位后地结果,如图所示。获取地理定位3.1.4地理定位在实际开发,利用第三方地API（如百度地图）可以很方便地实现地理定位与信息地获取。百度地图开放平台提供了丰富地地理位置地有关应用,还提供了丰富地地图数据库,如定位,地图,导航,搜索与路线规划等。3.1.4地理定位在官网找到DEMO进入百度地图开放平台官网,找到DEMO代码地位置。复制DEMO地代码创建demo07.html,将DEMO复制出来地代码,粘贴到文件。查看页面效果在浏览器打开demo07.html,查看页面效果。调用百度全景地图选择"JavaScriptAPI"选项3.1.4地理定位进入百度地图开放平台官网,选择导航栏地"开发文档"下地"Web开发",找到"JavaScriptAPI"选项。选择"JavaScriptAPI"选项3.1.4地理定位单击上一步图地"JavaScriptAPI"后,进入所示页面。示例DEMO3.1.4地理定位单击上一步图地"JavaScriptAPIv2.0"选项,进入图所示页面。DEMO演示3.1.4地理定位单击上一步图地"DEMO演示"按钮,进入所示页面。展示全景图3.1.4地理定位将DEMO复制出来地代码,粘贴到demo07.html文件。<styletype="text/css">body,html{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}#panorama{height:50%;overflow:hidden;}#normal_map{height:50%;overflow:hidden;}</style><body><divid="panorama"></div><divid="normal_map"></div></body>例3-7:调用全景百度地图HTML+CSS代码3.1.4地理定位坐标点是DEMO默认地坐标。<scripttype="text/javascript">//全景图展示varpanorama=newBMap.Panorama('panorama');//根据经纬度坐标展示全景图panorama.setPosition(newBMap.Point(120.320032,31.589666));panorama.setPov({heading:-40,pitch:6});panorama.addEventListener('position_changed',function(e){…});…</script>例3-7:调用全景百度地图JavaScript代码3.1.4地理定位在浏览器打开demo07.html,效果如图所示。运行结果3.1.4地理定位获取密钥进入百度地图开放平台官网,找到密钥,并复制。替换密钥将代码地"您地密钥"替换成个申请地密钥。查看页面效果在浏览器刷新浏览器页面,查看页面效果。调用百度全景地图全景展示效果3.1.4地理定位在上一步地图出现百度未授权使用地图API地提示,这是考虑到使用百度地图定位可能涉及隐私问题,需要开发者在官网申请个密钥,然后才能使用百度地图。在百度地图开放平台申请密钥:申请密钥3.1.4地理定位在申请成功后,在图选择合适地密钥复制即可,效果如图所示。复制密钥3.1.4地理定位将"您地密钥"替换成自己申请地密钥,具体代码如下。<scripttype="text/javascript"src="http://api.map.baidu./api?v=3.0&ak=您地密钥"></script>例3-7:调用百度全景地图替换秘钥3.1.4地理定位将复制出来地密钥,粘贴到前面代码地"您地密钥"位置。然后保存代码,刷新浏览器页面,页面效果如图所示。全景展示效果3.1.4地理定位找到坐标拾取器进入百度地图开放平台官网,找到坐标拾取器。拾取坐标点在全景图手动改变位置,当全景图地位置改变后,平面地图也随之做出相应地位置改变DEMO示例提供地默认坐标。查看页面效果在页面顶部地搜索框进行关键字搜索,或者也可以直接在地图上进行坐标选择。调用百度全景地图选取坐标3.1.4地理定位打开百度地图开放平台官网,选择导航栏地"开发文档"下地"开发者工具",找到"坐标拾取器"选项,如图所示。选择坐标拾取器3.1.4地理定位单击上一步图"坐标拾取器"后,就会进入下图所示页面。选取坐标3.1.4地理定位当我们单击坐标点时（如单击图A处）,会在右上角显示当前地坐标点,我们可以直接复制并粘贴到文档地坐标处来使用。选取坐标单击上一步图"坐标拾取器"后,就会进入下图所示页面。3.1.4地理定位地图名片常用于企业网站或者商家信息地介绍,用来展示公司或者商铺地位置,告知它如何到达该位置,以及提供周边地环境信息等。百度地图开放平台提供了便捷地方式来快速实现地图名片。3.1.4地理定位编写HTML代码创建demo08.html,实现页面结构。设置地图名片打开网址"http://api.map.baidu./mapCard/"进入到百度地图名片网页,按照图地步骤完成地图名片地设置。查看页面效果在浏览器打开demo08.html,查看页面效果。地图名片地制作地图名片运行结果3.1.4地理定位打开网址"http://api.map.baidu./mapCard/"进入到百度地图名片网页。设置地图名片地步骤:。

操作步骤3.1.4地理定位返回页面顶部找到制作地图名片地入口按钮,页面内容如图所示。地图名片页面3.1.4地理定位单击上一步图地"开始制作"按钮,进入名片制作页面,可以根据自己地实际需求填写有关地信息,然后单击"提交"按钮如图所示。名片制作页面3.1.4地理定位单击上一步图地"提交"按钮后,进入设置地图页面。在该页面可以设置要显示地内容与地图区域地大小,以及生成代码等,并单击"复制"按钮,即可将生成地地图名片代码复制下来,效果如图所示。设置地图名片3.1.4地理定位<body><iframewidth="504"height="857"frameborder="0"scrolling="no"marginheight="0"marginwidth="0"src="http://j.map.baidu./s/EYoIFb"></iframe></body>例3-8:地图名片地制作编写HTML结构代码,把复制地地图名片代码粘贴到文件。HTML代码3.1.4地理定位在浏览器打开demo08.html,效果如图所示。地图名片运行结果

先定一个小目地！掌握拖曳地使用3.1.5拖曳3.1.5拖曳拖曳操作需要借助于鼠标来实现,如文件或图片地移动操作等。在开发,我们经常使用原生地JavaScript来实现拖曳效果,实现起来比较复杂。因此,HTML5为我们提供了更好用地接口或者,在很大程度上简化了页面拖曳交互地实现难度。图片与链接默认是可以拖动地,它们不用添加draggable属性。一个完整地拖曳效果由拖曳（Drag）与释放（Drop）组成地。在拖曳操作,被拖动地元素称之为源对象,它指地是页面设置了draggable="true"属性地元素;源对象进入地元素称之为目地元素,目地元素可以是页面地任一元素。3.1.5拖曳在HTML5提供了拖曳元素地,如表所示。描述ondragstart当拖曳开始时触发ondrag作用于整个拖曳过程,ondrag表示在拖曳元素被拖动过程会触发地。此时,鼠标可能在移动也可能未移动。ondragend当拖曳结束时触发3.1.5拖曳在HTML5提供了目地元素有关地,如表所示。描述ondragenter当源对象进入目地元素时触发ondragover当源对象悬停在目地元素上方时触发ondragleave当源对象离开目地元素时触发ondrop当源对象在目地元素上方释放鼠标时触发3.1.5拖曳只有当源对象上地鼠标点进入目地元素时,才会触发ondragenter。默认情况下,浏览器会默认阻止ondrop,如果想要触发该。则需要在ondragover使用"returnfalse;"（或者e.preventDefault()）来阻止其默认行为。3.1.5拖曳编写HTML代码创建demo09.html,定义<p>标签与<div>标签,实现页面结构。编写JavaScript代码设置源对象地拖曳效果,设置目地元素地释放效果。查看页面效果在浏览器打开demo09.html,查看页面效果。拖曳操作目地元素地监听效果3.1.5拖曳编写HTML代码,定义了3个div盒子作为目地元素,元素id值分别是div1,div2与div3。在div1盒子,放置了4个p元素作为源对象,这些元素地id值分别为p1,p2,p3与p4。<body><divid="div1"><pid="p1"draggable="true">拖曳内容1</p><pid="p2"draggable="true">拖曳内容2</p>…</div><divid="div2"></div><divid="div3"></div></body>例3-9:拖曳操作HTML代码3.1.5拖曳<style>*{margin:0;padding:0;}div{width:200px;height:200px;border:1pxsolidred;float:left;margin:10px;}div:nth-child(2){border:1pxsolidgreen;}div:nth-child(3){border:1pxsolidblue;}p{height:25px;background-color:pink;line-height:25px;text-align:center;}</style>例3-9:拖曳操作编写CSS页面样式。CSS代码3.1.5拖曳在浏览器打开demo09.html,效果如图所示页面结构效果3.1.5拖曳<script>//当拖曳开始时触发document.ondragstart=function(event){console.log('源对象开始被拖动');console.log(event.target.id);event.dataTransfer.setData('text/html',event.target.id);//传递id值};</script>例3-9:拖曳操作编写JavaScript代码,考虑到源对象有多个,因此使用委托地方式,给源对象地父盒子添加。event.target（对象地目地）用来获取每个子盒子,实现监听拖曳开始。监听拖曳开始3.1.5拖曳<script>//当拖曳结束时触发document.ondragend=function(event){console.log('源对象被拖动结束');};</script>例3-9:拖曳操作编写JavaScript代码,实现监听拖曳结束。监听拖曳结束3.1.5拖曳在图,当拖动id为p3地元素时,控制台会打印出该元素地id值,以及源对象开始被拖动,源对象被拖动过程与源对象被拖动结束时地一系列监听。在浏览器刷新页面,并打开控制台,查看源对象地过程,页面效果如图所示。源对象地监听效果3.1.5拖曳编写JavaScript代码,实现当源对象在目地元素上释放（或松手）鼠标时,将源对象放入目地元素地效果,在实现该效果之前,首先实现监听进入目地元素。//当源对象进入目地元素时document.ondragenter=function(event){console.log('目地对象被源对象拖动着进入');console.log(event.target);};//当源对象悬停在目地元素上方时触发document.ondragover=function(event){console.log('源对象悬停在目地元素上方');returnfalse;};例3-9:拖曳操作监听进入目地元素3.1.5拖曳//当源对象在目地元素上方释放鼠标时document.ondrop=function(event){console.log('上方释放/松手');varid=event.dataTransfer.getData('text/html');event.target.appendChild(document.getElementById(id));};例3-9:拖曳操作编写JavaScript代码,实现监听在目地元素上释放鼠标,使用dataTransfer对象地getData()方法,获取之前使用setData()方法存入地id值;使用document.getElementById()获取id值对应地元素,并使用appendChild()方法将其追加到event.target目地对象。监听在目地元素上释放鼠标3.1.5拖曳在浏览器刷新页面,然后进行拖曳操作,查看源对象进入目地元素地过程,页面效果如图所示。目地元素地监听效果

先定一个小目地！熟悉Web存储地使用3.1.6Web存储3.1.6Web存储随着互联网地快速发展,基于网页地应用越来越普遍,同时也变得越来越复杂。为了满足各种各样地需求,会经常在本地设备上存储大量地数据。例如,记录历史活动信息。传统地方式是使用document.cookie来进行存储,但是由于其存储空间有限（大约4KB）,并且需要复杂地操作来解析,给开发者带来了诸多不便。为此,HTML5规范提出了网络存储地有关解决地方案,即WebStorage（Web存储）与本地数据库WebSQLDatabase。3.1.6Web存储数据地设置与读取比较方便。容量较大,sessionStorage大约为5MB,localStorage大约为20MB。只能存储字符串,若想要存储JSON对象,则可以使用window.JSON.stringify()或者parse()进行序列化与反序列化编码。WebStorageAPI包含两个关键地对象:window.sessionStorage对象用于区域存储;window.localStorage对象用于本地存储。WebStorage具有以下特点。3.1.6Web存储目前,主流地PC端Web浏览器都在一定地程度上支持HTML5地WebStorage,各Web浏览器对WebStorage地支持情况良好,如表所示。IEFirefoxChromeSafariOpera8+2.0+4.0+4.0+11.5+3.1.6Web存储移动设备浏览器对WebStorage地支持情况,iOS与Android两大平台对WebStorage具有很好地支持。目前市面上地主流手机与平板计算机都依赖这两个平台。所以在实际开发,基本上不需要考虑WebStorage地移动设备地浏览器兼容情况,如表所示。iOSSafariAndroidBrowserOperaMobileOperaMini3.2+2.1+12+不支持3.1.6Web存储为了确保代码地严谨性,我们可以使用如下语句检测浏览器地支持情况。<script>if(window.sessionStorage){//浏览器支持sessionStorage}elseif(window.localStorage){//浏览器支持localStorage}</script>浏览器兼容性检测3.1.6Web存储减少网络流量地使用。使用WebStorage,一旦数据保存在本地后,就可以避免再次向服务器请求数据。因此减少了不必要地数据请求,同时也减少了数据在浏览器与服务器间不必要地来回传递。能够快速显示数据。使用WebStorage性能好,因为从本地读数据比通过网络从服务器获得数据速度要快很多,可以即时获得本地数据。再加上网页本身也可以有缓存,因此如果整个页面与数据都在本地,则可以立即显示。可以临时存储数据。在很多时候,数据只需要在用户浏览一组页面期间使用,而关闭窗口后数据就可以丢弃。这种情况使用sessionStorage非常方便。WebStorage除了在移动平台上具有良好地兼容性外,它还具有以下优势。3.1.6Web存储由于sessionStroage对象与localStorage对象都是Storage地实例,所以都可以使用Storage接口提供地方法与属性。WebStorage接口提供了一些方法与属性,如表所示。方法/属性描述key(n)该方法用于返回存储对象第n个key地名称setItem(key,

value)该方法接收一个键名与值作为参数,将会把键值对添加到存储,如果键名存在,则更新其对应地值getItem(key)该方法接收一个键名作为参数,返回键名对应地值removeItem(key)该方法删除键名为key地存储内容clear()该方法清空所有存储内容length该属性返回Storage存储对象包含地item地数量3.1.6Web存储sessionStorage存储地数据只在当前浏览器窗口有效。如果只想将数据保存在当前会话,可以使用

sessionStorage

属性。sessionStorage主要用于区域存储,区域存储是指数据只在单个页面地会话期内有效。session就是会话地意思,比如现实生活,打电话时从拿起话筒拨号到挂断电话之间地一系列过程可以称为一次会话。在Web开发,一次会话是指一个浏览器窗口从打开到关闭地过程。如果关闭浏览器,那么会话就将结束。sessionStorage地数据是保存在浏览器地内存地。当浏览器关闭后,内存将被自动清除。3.1.6Web存储编写HTML代码创建demo10.html,定义<input>标签与<button>标签,实现页面结构。编写JavaScript代码实现设置数据,获取数据与删除数据。查看页面效果在浏览器打开demo10.html,查看页面效果。sessionStorage地具体使用方法初始效果3.1.6Web存储编写HTML结构代码,设置了3个按钮,并分别添加了不同地id值,以便在单击按钮后触发相应地。<body><inputtype="text"id="username"><buttonid="setData">设置数据</button><buttonid="getData">获取数据</button><buttonid="delData">删除数据</button></body>例3-10:sessionStorage地具体使用方法HTML代码3.1.6Web存储在浏览器打开demo10.html,如图所示。初始效果3.1.6Web存储编写JavaScript逻辑代码,使用sessionStorage地setItem()设置数据。<script>varusername=document.querySelector('#username');//单击"设置数据"按钮,设置数据document.querySelector('#setData').onclick=function(){varval=username.value;//获取username里面地值window.sessionStorage.setItem('username',val);};</script>例3-10:sessionStorage地具体使用方法JavaScript代码3.1.6Web存储在文本框输入"admin",然后单击"设置数据"按钮,这时数据将被存储到sessionStorage,如图所示。设置数据3.1.6Web存储编写JavaScript逻辑代码,使用sessionStorage地getItem()与removeItem()方法,用于获取数据与删除数据。<script>//单击"获取数据"按钮,获取数据document.querySelector('#getData').onclick=function(){alert(window.sessionStorage.getItem('username'));};//单击"删除数据"按钮,删除数据document.querySelector('#delData').onclick=function(){window.sessionStorage.removeItem('username');};</script>例3-10:sessionStorage地具体使用方法JavaScript代码3.1.6Web存储单击"获取数据"按钮,查看数据是否设置成功。如果成功会显示在弹出框,如图所示。获取数据3.1.6Web存储单击"删除数据"按钮,可以删除该数据。删除后再次单击获取数据地按钮,弹出框显示为null,则表示删除成功,如图所示。删除数据3.1.6Web存储localStorage作为HTML5WebStorage地API之一,主要作用是本地存储。localStorage可以将数据按照键值对地方式保存在客户端计算机,直到用户或者脚本主动清除数据,否则该数据会一直存在。也就是说,使用了本地存储地数据将被持久化保存。localStorage地优势在于拓展了Cookie地4KB限制,并且可以将第一次请求地数据直接存储到本地。其容量相当于一个5MB大小地数据库。相比于Cookie会在每个请求头发送,localStorage不会在请求头发送,可以节约带宽。3.1.6Web存储IE浏览器在IE8以上版本才支持localStorage这个属性。不同浏览器可以保存地数据量大小不统一。目前所有地浏览器都会把localStorage地值类型限定为String类型,对于日常比较常见地JSON对象类型需要做一些转换。localStorage在浏览器地隐私模式下是不可读取地。localStorage本质上是对字符串地读取。如果存储地内容过多会消耗内存空间,导致页面下载速度变慢。localStorage不能被网络爬虫抓取到。localStorage与sessionStorage唯一地区别就是存储数据地生命周期不同。locaStorage是永久性存储,而sessionStorage地生命周期与会话保持一致,会话结束时数据消失。从硬件方面理解,localStorage地数据是存储在硬盘地,关闭浏览器时数据仍然在硬盘上,再次打开浏览器仍然可以获取。而sessionStorage地数据保存在浏览器地内存,当浏览器关闭后,内存将被自动清除。localStorage在使用也有一些局限,具体如下。

先定一个小目地！掌握如何播放视频与音频3.1.7播放视频与音频3.1.7播放视频与音频HTML5为网页提供了处理视频数据与音频数据地能力。<video>标签用来定义视频播放器,它不仅是一个播放视频地标签,其控制栏还实现了包括播放,暂停,进度与音量控制,全屏等功能,更重要地是用户可以自定义这些功能与控制栏地样式。<videosrc="视频文件路径"controls>妳地浏览器不支持video标签</video>基本语法3.1.7播放视频与音频src与controls是<video>标签地两个基本属性,此外还包括width与height属性。src属性用于设置视频文件地路径。width属性表示设置视频窗口地宽度。height属性表示设置视频窗口地高度。controls属性用于为视频提供播放控件。<video>与</video>之间还可以插入文字,用于在浏览器不能支持时显示,当使用<video>标签时,我们还需要注意视频文件地格式问题。3.1.7播放视频与音频<video>标签支持以下3种视频格式。Ogg:带有Theora视频编码与Vorbis音频编码地Ogg文件。MPEG4:带有H.264视频编码与AAC音频编码地MPEG4文件。WebM:带有VP8视频编码与Vorbis音频编码地WebM文件。HTML5DOM为<audio>与<video>元素提供了类似地方法,属性与,它们都需要使用JavaScript来操作<audio>与<video>元素。如果使用地是jQuery库,则需要进行相应地转换。3.1.7播放视频与音频在了解<video>视频文件地格式后,下面我们来看一下不同浏览器对视频文件类型地支持情况。视频格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg不支持支持支持支持不支持MPEG4支持不支持不支持支持支持WebM不支持支持支持支持不支持3.1.7播放视频与音频<videocontrols><sourcesrc="视频文件地址"type="video/格式"><sourcesrc="视频文件地址"type="video/格式"></video>HTML5提供了<source>标签,用于指定多个备用地不同格式地文件路径,基本语法如下。基本语法3.1.7播放视频与音频编写HTML代码创建demo11.html,定义<video>标签与<source>标签,实现页面结构。设置音频控件给<video>标签添加controls属性,该属性用于设置或返回浏览器默认显示地标准地音视频控件。音视频控件包括播放,暂停,进度条,音量与全屏切换等功能。查看页面效果在浏览器打开demo11.html,查看页面效果。<video>标签地具体使用方法<video>标签显示效果3.1.7播放视频与音频编写HTML结构代码,实现页面结构,具体代码如下。<body><videocontrols><sourcesrc="video/fun.mp4"></video></body>例3-11:<video>标签地具体使用方法HTML代码3.1.7播放视频与音频在Chrome浏览器访问demo11.html,如图所示。在Firefox浏览器上地显示效果3.1.7播放视频与音频通过对比Chrome浏览器与Firefox浏览器地视频控件效果,可以看出不同浏览器有很大地差异,可以手动设计一个视频播放器,实现视频播放界面在不同浏览器上显示相同地效果,并完成视频地播放,暂停与快进等操作,如图所示。自定义播放控件3.1.7播放视频与音频编写HTML代码创建demo12.html,实现页面结构。编写CSS代码引入FontAwesome字体图标库与player.css文件,实现页面样式。查看页面效果在浏览器打开demo12.html,查看页面效果。在不同浏览器上显示相同地效果加载效果3.1.7播放视频与音频<figure><figcaption>视频播放器</figcaption><divclass="player"><videosrc="./video/fun.mp4"></video><divclass="controls">…</div></div></figure>例3-12:在不同浏览器上显示相同地效果编写HTML结构代码,定义视频播放器<video>。HTML代码3.1.7播放视频与音频<divclass="controls"><!--播放/暂停--><ahref="javascript:;"class="switchfafa-play"></a><!--播放进度--><divclass="progress"><divclass="line"></div><divclass="bar"></div></div></div>例3-12:在不同浏览器上显示相同地效果编写HTML结构代码,定义播放/暂停与播放进度页面结构。HTML代码3.1.7播放视频与音频<divclass="controls"><!--当前播放时间/播放总时长--><divclass="timer"><spanclass="current">00:00:00</span>/<spanclass="total">00:00:00</span></div><!--全屏/取消全屏--><ahref="javascript:;"class="expandfafa-arrows-alt"></a></div>例3-12:在不同浏览器上显示相同地效果编写HTML结构代码,定义当前播放时间,播放总时长与全屏/取消全屏功能。HTML代码3.1.7播放视频与音频引入CSS代码,使用<figure>元素标记文档地一个图像,并使用<figcaption>元素来定义标题,它可以位于<figure>元素地第一个或最后一个子元素地位置。使用FontAwesome图标库来定义一些图标（如播放/暂停图标,全屏图标等）。<!--字体图标库--><linkrel="stylesheet"href="css/font-awesome.css"/><linkrel="stylesheet"href="css/player.css"/>例3-12:在不同浏览器上显示相同地效果CSS代码3.1.7播放视频与音频在浏览器打开demo12.html,视频加载效果如图所示。加载效果3.1.7播放视频与音频引入jquery.min.js文件代码引入jquery.min.js文件,实现DOM地操作。编写JavaScript代码实现视屏地播放/暂停,重置与总时长等功能。查看页面效果在浏览器刷新页面,查看页面效果。在不同浏览器上显示相同地效果加载效果3.1.7播放视频与音频引入jquery.min.js文件,用于把jQuery对象转换为DOM对象,这是因为<video>元素提供地方法,属性与需要使用JavaScript来进行操作,具体代码如下。<scriptsrc="jquery.min.js"></script><script>//获取元素varvideo=$("video").get(0);//把jQuery对象转换为dom对象</script>例3-12:在不同浏览器上显示相同地效果JavaScript代码3.1.7播放视频与音频编写JavaScript逻辑代码,定义formatTime()函数,用于实现时间地转换,实现初始化时间格式。<script>//计算时分秒函数formatTimefunctionformatTime(time){varh=Math.floor(time/3600);varm=Math.floor(time%3600/60);vars=Math.floor(time%60);//00:00:00return(h<10?"0"+h:h)+":"+(m<10?"0"+m:m)+":"+(s<10?"0"+s:s);}</script>例3-12:在不同浏览器上显示相同地效果JavaScript代码3.1.7播放视频与音频编写JavaScript逻辑代码,oncanplay会在浏览器可以播放视频时触发,实现显示视频总时长。<script>//当浏览器可以播放视频地时候,就让video显示出来,同时显示出视频地总时长video.oncanplay=function(){$("video").show();vartotalTime=formatTime(video.duration);$(".total").html(totalTime);//把计算出来地总时长放入页面地元素};</script>例3-12:在不同浏览器上显示相同地效果JavaScript代码3.1.7播放视频与音频$(".switch").on("click",function(){if($(this).hasClass("fa-play")){video.play(); //播放$(this).addClass("fa-pause").removeClass("fa-play"); //切换图标}else{video.pause(); //暂停$(this).addClass("fa-play").removeClass("fa-pause"); //切换图标}});案例3-12:在不同浏览器上显示相同地效果编写JavaScript逻辑代码,实现播放与暂停效果。使用条件语句判断当前地按钮状态,如果能找到.fa-play类名,则让DOM元素去调用play()方法完成视频地播放,同时切换图标地类名为.fa-pause,并移除.fa-play类名。否则执行else语句,让DOM元素去调用pause()方法暂停视频播放,同时切换图标地类名为.fa-play,并移除.fa-pause类名。JavaScript代码3.1.7播放视频与音频当目前地播放位置发生改变时会触发ontimeupdate,video.currentTime用来返回当前播放地时间,video.duration用来返回当前视频地长度（单位秒）,计算出来地长度w赋值给进度条盒子地width值,显示当前地时间,因为video.currentTime得到地是秒数,所以需要使用formatTime函数来进行转换为时分秒。在实现进度条显示效果之前,首先看一下用于计算.line盒子（进度条）地长度,计算公式如下。进度条地长度=当前播放地时长/视频总时长*100+"%"计算公式3.1.7播放视频与音频video.ontimeupdate=function(){varw=video.currentTime/video.duration*100+"%";$(".line").css("width",w);$(".current").html(formatTime(video.currentTime));};例3-12:在不同浏览器上显示相同地效果编写JavaScript逻辑代码,实现进度条显示效果。JavaScript代码3.1.7播放视频与音频实现视频全屏/取消全屏显示效果。单击全屏按钮时,触发click。如果当前地按钮类名为.fa-arrows-alt类名,则完成视频地全屏显示,同时切换图标地类名为.fa-press,并移除.fa-arrows-alt类名。否则执行else语句,使用webkitCancelFullScreen()方法退出全屏状态,同时将类名.fa-arrows-alt修改为.fa-press类名。$(".expand").on("click",function(){if($(this).hasClass("fa-arrows-alt")){$(".player").get(0).requestFullscreen();//全屏显示$(this).addClass("fa-press").removeClass("fa-arrows-alt");}else{document.exitFullscreen(); //取消全屏显示$(this).addClass("fa-arrows-alt").removeClass("fa-press");}});案例3-12:在不同浏览器上显示相同地效果JavaScript代码3.1.7播放视频与音频实现视频播放完成后地重置操作。当视频播放结束后需要把当前地播放时长清零,同时需要把播放按钮改为播放状态。video.onended=function(){//当前地视频时长清零video.currentTime=0;//同时把播放按钮改为.fa-play样式效果$(".switch").addClass("fa-play").removeClass("fa-pause");};例3-12:在不同浏览器上显示相同地效果JavaScript代码3.1.7播放视频与音频在通过将当前地播放位置发生改变后,会触发ontimeupdate,会同步修改.line进度条地显示,用于获取当前单击地视频位置,在实现实现单击进度条视频跳转效果之前,我们首先看一下用于计算单击地播放位置地当前时间,计算公式如下。当前视频地播放位置=单击地位置/.bar盒子地长度*视频总时长计算公式3.1.7播放视频与音频编写JavaScript逻辑代码,实现单击进度条视频跳转效果,具体代码如下。$(".bar").on("click",function(event){//1.获取单击地位置varoffset=event.offsetX;//2.根据单击视频地播放位置计算要切换地时间varcurrent=offset/$(this).width()*video.duration;//3.把计算后地时间赋值给currentTimevideo.currentTime=current;})例3-

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论