《JavaScript程序设计案例教程》课件-案例5_第1页
《JavaScript程序设计案例教程》课件-案例5_第2页
《JavaScript程序设计案例教程》课件-案例5_第3页
《JavaScript程序设计案例教程》课件-案例5_第4页
《JavaScript程序设计案例教程》课件-案例5_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

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

文档简介

案例五、音乐播放器学习目标知识链接案例实现效果演示目录学完本章节应该能做到的事情学习目标壹学习目标会转换字符串大小写。能获取和修改DOM元素的属性值。掌握encodeURIComponent和decodeURIComponent。PPT模板/moban/掌握className和classList。掌握数据类型转换。掌握audio的用法。效果演示完成本案例应该具备的知识知识链接贰知识链接列表PPT模板/moban/字符串大小写转换。获取和修改DOM元素的属性值。encodeURIComponent和decodeURIComponent。className和classList。数据类型转换。audio音乐播放。字符串大小写转换1为什么要进行大小写转换？通常数值比大小字符串要怎么比较？比长短？比大小？ 比大小！没错，比的就是字符串里每个字符的ASCII码大小，比如‘F’==70‘f’==102，‘f’>‘F’，所以“fish”>“Fish”其实这样的比较大小没有多大意义，字符串的比较我们更重视是否相等！统一的大写或小写更有利于比较是否相等。字符串大小写转换1toLowerCase将字符串转为小写语法：str.toLowerCase()str表示是一个String对象；该方法没有参数；返回一个字符串，该字符串中的字母被转换为小写字母。varstr="HeLLoWOrld!"document.write(str.toLowerCase());//输出结果：helloworld!toLowerCase（toLowerCase.html）字符串大小写转换1toUpperCase将字符串转为大写语法：str.toUpperCase()str表示是一个String对象；该方法没有参数；返回一个字符串，该字符串中的字母被转换为大写字母。varstr1="CraftingYourResearchFuture"varstr2=str1.toUpperCase()document.write(str1+'<br>'+str2)//输出结果：//CraftingYourResearchFuture//CRAFTINGYOURRESEARCHFUTUREtoUpperCase（toUpperCase.html）获取和修改DOM元素的属性值2getAttribute()方法通过元素节点的属性名称获取属性的值。语法：elementNode.getAttribute(name)参数：elementNode是使用getElementById()、getElementsByTagName()等方法，获取到的元素节点；name是要想查询的元素节点的属性名字。返回值：指定属性的值获取和修改DOM元素的属性值2<h1id="superlink"title="获取标签的属值”onclick="getattr()">

点击我，获取标签的属值</h1><scripttype="text/javascript"> functiongetattr(){ varnode=document.getElementById("superlink"); varattr1=node.getAttribute("id"); varattr2=node.getAttribute("title"); console.log("h1标签的ID:"+attr1); console.log("h1标签的title:"+attr2); }</script>getAttribute（getAttribute.html）获取和修改DOM元素的属性值2setAttribute()方法通过元素节点的属性名称设置（修改）属性的值。语法：elementNode.setAttribute(name,value)参数：elementNode是使用getElementById()、getElementsByTagName()等方法，获取到的元素节点；name是要想设置的元素节点的属性名字；value是属性的新值。返回值：无获取和修改DOM元素的属性值2<h1id="superlink"title="H标签中的老大"onclick="setattr()">

我在H标签里的地位是不可憾动的</h1><scripttype="text/javascript"> functionsetattr(){ varnode=document.getElementById("superlink"); node.setAttribute("title","我有5个小弟"); }</script>setAttribute（setAttribute.html）encodeURIComponent和decodeURIComponent3用途： 编码解码URL中的参数。一般用get方式发送数据，数据的格式的形式如：name1=value1；如果参数值中就包含=或&这种特殊字符的时候该怎么办？比如value1的值是“va&lu=e1”字符串，那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对，但是服务端会解析成两个键值对，这样就产生了歧义。

如何解决上述问题带来的歧义呢？解决的办法就是对参数进行URL编码

URL编码只是简单的在特殊字符的各个字节前加上%，例如，对上述会产生奇异的字符进行URL编码后结果：“name1=va%26lu%3D”，这样服务端会把紧跟在“%”后的字节当成普通的字节，就是不会把它当成各个参数或键值对的分隔符。encodeURIComponent和decodeURIComponent3encodeURIComponent()函数可把字符串作为URI组件进行编码。语法：encodeURIComponent(Url)参数：Url是一个需要进行编码的字符串。返回值为编码后的文本。encodeURIComponent和decodeURIComponent3encodeURIComponent（encodeURIComponent.html）原文是：<br>encodeURIComponent案例<br>编码后：<br><scripttype="text/javascript"> document.write(encodeURIComponent("encodeURIComponent案例"));</script>encodeURIComponent和decodeURIComponent3decodeURIComponent()函数可对encodeURIComponent()函数编码的URI进行解码。语法：decodeURIComponent(uri)参数：uri是一个字符串，含有编码URI组件或其他要解码的文本。返回值为解码后的文本。encodeURIComponent和decodeURIComponent3decodeURIComponent（decodeURIComponent.html）解码前字符串：<br>/s?wd=encodeURIComponent%20%E6%A1%88%E4%BE%8B<br>解码后字符串：<br><scripttype="text/javascript"> document.write(decodeURIComponent("/s?wd=encodeURIComponent%20%E6%A1%88%E4%BE%8B"));</script>className和classList4语法：str.charAt(index)index:0到字符串长度-1的一个整数。返回：字符串中的字符从左向右所在位置的索引，第一个字符的索引值为0，最后一个字符（假设该字符位于字符串stringName中）的索引值为stringName.length-1。如果指定的index值超出了该范围，则返回一个空字符串。str="helloworld!";//字符串总长为12//返回第9个字符：rconsole.log(str.charAt(8));//超出长度，返回空串，不是nullconsole.log(str.charAt(16));charAt（charAt.html）className和classList40102相同点：获取或修改元素所引用的CSS类区别：className返回的是字符串classList返回的是集合className和classList4className属性设置或返回元素的class属性。语法：object.className=classnameclassName和classList4<head><metacharset="utf-8"><title>classname</title><style> input{ border-radius:8px; padding:10px; } .btn1{background:#187CF4;} .btn2{background:#58DF5F;} </style></head>

<body><inputid="btn"type="button"value="你过来啊"class="btn1"/><script>

document.querySelector("#btn").onclick=function(){ this.className="btn2"; }</script></body>className（className.html）className和classList4classList属性返回元素类名，该属性用于在元素中添加，移除及切换CSS类，classList是只读属性。它具有的方法如下：方法名信用.add()新增类名.remove()移除类名.toggle()切换类名（有就减，没有就加）.contains()判断是否包含某个类名className和classList4<script>window.onload=function(){ varrows=document.querySelectorAll('tr'); [].forEach.call(rows,function(row){ row.onclick=clickRow; row.onmouseover=function(){ this.classList.toggle("bg"); }; });};functionclickRow(){ if(this.classList.contains('blue')) this.classList.remove('blue'); else this.classList.add('blue’);}</script>classList演示（classList.html）<head><styletype="text/css"> .bg{background:#CCC;} .blue{ color:blue; background:#00FF99; }</style></head><body><tableborder="1"cellspacing="0“ cellpadding="0"> <tr><th>Header</th></tr> <tr> <td>点击某行有选中效果</td> </tr> <tr><td>Data1</td></tr> <tr><td>Data2</td></tr> <tr><td>Data3</td></tr></table></body>数据类型转换5Number()方法parseInt()方法parseFloat()方法隐式转换(*、-、/、++、--数学运算符)01转成字符串02转为数值类型对象的toString()方法String()强制类型转换隐式转换(+)Boolean()方法隐式转换(!、条件表达式)注意：0、空字符串、null、undefined、NaN会转换成false，其它都会转换成true。03转为布尔类型数据类型转换5转换成字符串（toString.html）vararr=[3,5,9];console.log(arr.toString());//结果：3,5,9varb=true;console.log(b.toString());//结果：truevard=20;console.log(d.toString());//结果：20console.log(d.toString(10));//结果：20console.log(d.toString(2));//结果：10100console.log(d.toString(16));//结果：14注意：null和undefined值没有这个方法。数据类型转换5转换成字符串（String.html）document.write(String(null)+'<br>');//结果：nulldocument.write(String(true)+'<br>');//结果：truedocument.write(String(undefined)+'<br>');//结果：undefineddocument.write(String([1,2,3])+'<br>');//结果：1,2,3document.write(String({name:'hello'})+'<br>');//结果：[objectObject]document.write(String(30)+'<br>');//结果：30console.log(typeof(100+””));加号任一侧为字符串时，结果为字符串数据类型转换5转换成数值类型（Number.html）console.log(Number(true));//输出1console.log(Number("abc100"));//输出NaNconsole.log(Number("100abc"));//输出NaNconsole.log(parseInt(true));//输出NaNconsole.log(parseInt("abc100"));//输出NaNconsole.log(parseInt("100abc"));//输出100console.log(parseFloat("11.8px"));//输出11.8console.log(parseFloat("px11.8"));//输出NaNconsole.log("10"*3);//输出30console.log(100-"10");//输出90console.log(100/"10");//输出10有不是数值的字符，返回NaN忽略字符串前面的空格，如果第一个字符不是数字字符或者负号，parseInt()就会返回NaN隐式转换数据类型转换5转换成布尔类型（boolean.html）console.log(Boolean(6));//输出trueconsole.log(Boolean("false"));//输出trueconsole.log(Boolean(0));//输出falsevara=6;varb=null;varc="";if(a)//此分支执行{ console.log("a当true使用");}if(b)//此分支不执行{ console.log("b当true使用");}if(!c)//此分支执行{ console.log("c当false使用");}隐式转换audio音乐播放6audio标签<audio>标签可以在HTML5浏览器中播放音频文件。表5-1HTML5中audio标签的新属性属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。因为安全原则，有的浏览器已经禁用此属性的效果。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。mutedmuted规定视频输出应该被静音。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的音频的URL。audio音乐播放6<audiocontrols> <sourcesrc="./audioplayer/lxwmm.mp3"type="audio/mpeg">

您的浏览器不支持audio标签。</audio><audiocontrolssrc="./audioplayer/lxwmm.mp3">

您的浏览器不支持audio标签。</audio>audio标签的两种使用方式（audio.html）audio音乐播放6使用Audio对象Audio对象是HTML5中的新对象，表示的是HTML<audio>元素，因此audio标签具有的属性Audio对象也有。表5-2Audio对象一些属性属性描述currentSrc返回当前音频的URL。currentTime设置或返回音频中的当前播放位置（以秒计）。defaultMuted设置或返回音频默认是否静音。defaultPlaybackRate设置或返回音频的默认播放速度。duration返回音频的长度（以秒计）。ended返回音频的播放是否已结束。error返回表示音频错误状态的MediaError对象。paused设置或返回音频是否暂停。playbackRate设置或返回音频播放的速度。readyState返回音频当前的就绪状态。seeking返回用户当前是否正在音频中进行查找。volume设置或返回音频的音量。audio音乐播放6表5-3Audio对象一些方法方法描述fastSeek()在音频播放器中指定播放时间。getStartDate()返回新的Date对象，表示当前时间线偏移量。load()重新加载音频元素。play()开始播放音频。pause()暂停当前播放的音频。audio音乐播放6表5-4Audio对象的事件事件描述canplay当浏览器可以开始播放媒体时，发生此事件。durationchange媒体时长改变时发生此事件。ended在媒体播放到尽头时发生此事件。loadeddata媒体数据加载后，发生此事件。loadedmetadata加载元数据（比如尺寸和持续时间）时，发生此事件。loadstart当浏览器开始查找指定的媒体时，发生此事件。pause当媒体被用户暂停或以编程方式暂停时，发生此事件。play当媒体已启动或不再暂停时，发生此事件。playing在媒体被暂停或停止以缓冲后播放时，发生此事件。progress当浏览器正处于获得媒体数据的过程中时，发生此事件。ratechange媒体播放速度改变时发生此事件。seeked当用户完成移动/跳到媒体中的新位置时，发生该事件。seeking当用户开始移动/跳到媒体中的新位置时，发生该事件。suspend当浏览器有意不获取媒体数据时，发生此事件。timeupdate当播放位置更改时发生此事件。volumechange当媒体的音量已更改时，发生此事件。waiting当媒体已暂停但预期会恢复时，发生此事件。audio音乐播放6<buttonid="play">播放</button><buttonid="pause">暂停</button>请观看控制台输出<scripttype="text/javascript"> varad=newAudio(); ad.src="./audioplayer/lxwmm.mp3"; document.querySelector("#play").onclick=function(){ ad.play(); } document.querySelector("#pause").onclick=function(){ ad.pause(); } ad.addEventListener("play",function(){ console.log("musicstarttoplay"); },false); ad.addEventListener("pause",function(){ console.log("musicnowpaused"); },false);</script>音频事件（audioEvent.html）完成本章综合案例案例实现贰设计思路1设计上分为上下两部分，上面显示正在播放音乐的音乐名称，并且点击音乐名称位置可选择音乐（受浏览器限制，本地运行时只能选择网页所在文件夹处的音乐），音乐名下方为控制面板（自定义，非系统），面板最左侧可以控制音乐的播放和暂停，中间为音乐播放进度条，右侧为音乐总时长和当前播放位置的信息。实现步骤--设计页面架构2divdiv（包含一个img,一个input,一个span）五部分（一个控制按钮、一个分隔线、进度条、一个分隔线和一个时间信息）实现步骤--设计页面架构2<divclass="audio_panel"> <divclass="adname"> <imgsrc="images/fg.png"> <spanid="music_title"title="点击选择mp3">

点击选择mp3 </span> <inputtype="file"id="selectmusic"style="display:none"> </div> <divclass="control"> <spanid="play"class="pause"></span> <spanclass="sepe"></span> <spanid="progress"> <div></div> </span> <spanclass="sepe"></span> <spanclass="timer">00:00/00:00</span> </div></div>实现步骤--美化元素2.audio_panel{ width:500px; margin:30pxauto; text-align:center;}整体上内容水平居中，其中文字也是水平居中，其样式代码如下：实现步骤--美化元素2.adname{ margin:50px;}.adname>img{vertical-align:middle;}.adname>span{cursor:pointer;}音乐标题行上的音乐图标应与标题文字垂直居中，并且鼠标悬于标题上时显示成小手形状，意为可以点击，其样式代码如下：实现步骤--美化元素2.control{ height:37px; line-height:37px; background:url(images/bg.png); color:white; display:flex;}音乐控制面板中以背景图片布满整个区域，控制面板中的所有子元素水平排列。实现步骤--美化元素2.sepe{ width:4px; background:#000;}控制面板中貌似分为三部分，是由两个宽4像素的白色竖条状元素分隔开的。实现步骤--美化元素2初始添加样式的播放器效果图实现步骤--美化元素2#play{ width:0; height:0; margin:9px15px; cursor:pointer;}#play.play{ border-top:10pxsolidtransparent; border-bottom:9pxsolidtransparent; border-left:20pxsolid#F5F2F2;}#play.pause{ width:10px; height:19px; border-top:none; border-bottom:none; border-left:5pxsolid#F5F2F2; border-right:5pxsolid#F5F2F2;}播放按钮和暂停按钮共用一个元素，在音乐的不同状态下使用样式控制按钮的外观，即播放状态时显示为两个并列的长方形，暂停状态时显示为一个向右的三角形。实现步骤--美化元素2#progress{ height:17px; margin:10px; width:60%; background:#000;}#progress>div{ width:5%; background:#F5F2F2; height:100%;}.timer{margin-left:10px;}进度条是由两层元素实现的，外层元素背景色为透明，内层元素背景色为白色，内层元素宽度的变化展示了音乐的播放进度。实现步骤--美化元素2实现步骤--选择音乐2点击音乐标题打开文件选择对话框，所以要对音乐标题的单击事件进行绑定事件处理程序。varmusicTitle=document.querySelector("#music_title");//音乐标题varselectmusic=document.querySelector("#selectmusic");//file组件musicTitle.onclick=function(){ selectmusic.click();//点击打开选择框}实现步骤--选择音乐2当选择完音乐后会触发file组件的change事件，在这个事件中设置Audio对象的src。selectmusic.onchange=function(){ letext=this.files[0].name.substr(this.files[0].name.lastIndexOf(".")).toLowerCase(); if(ext!=".mp3") { alert("请选择mp3"); playBtn.onclick=null; return; } myaudio.setAttribute("src",this.files[0].name);}varmyaudio=newAudio();实现步骤--音乐加载完成时的初始化2选择好正确的音乐文件后，文件加载完成时会触发Audio对象的loadeddata事件，所以在这个事件中处理音乐初始化的一些状态：按钮显示为待播放状态，即显示为向右的三角形；设置按钮的单击事件；提取音乐文件名，并更新音乐名显示到标题位置；设置进度条为0%；设置总时长信息。实现步骤--音乐加载完成时的初始化2myaudio.addEventListener("loadeddata",function(e){ playBtn.className="play"; letsrc=this.src;//提取音乐名

letk=src.lastIndexOf("/"); if(k<0)k=src.lastIndexOf("\\"); if(k>=0)src=src.substring(k+1); musicTitle.innerHTML=decodeURICompo

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

温馨提示

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

最新文档

评论

0/150

提交评论