HTML上机实验(实验一)(7页).doc
-HTML上机实验(实验一)-第 7 页武汉轻工大学HTML5实验报告题 目： H5的基本编程 2017年5月7日实验1H5的基本编程一、 实验目的：1、 熟悉集成开发环境(IDE)2、 熟悉HTML5新增标记3、 熟悉HTML5页面架构4、 掌握HTML5表单5、 掌握JS的基本操作二、 实验任务：1. 表单格式验证，利用H5提供的验证功能实现对表单的验证。2. 编写一个注册页面，界面类似如下所示,可以增加更多的项目,例如,可以包括用户名,邮箱,密码,确认密码,性别,出生年月,住址,电话,身份证号,爱好,等等。3. 编写一个DIY视频播放器。可以对播放器实现播放，暂停，快播，慢播，音量调节，显示播放进度等功能。三、 试验步骤任务1代码：<!DOCTYPE html><html><meta charset=gb2312" /><script>function checkEmail()var name = document.getElementById("txtUserName");var result = document.getElementById("result");var flag = name.checkValidity();if(flag)result.innerHTML = "用户名格式正确"elseresult.innerHTML = "用户名格式不正确"</script><form><fieldset><legend>请输入您的用户名和密码信息</legend>用户名 :<input type="text" id="txtUserName" onblur="checkEmail()" pattern="a-zA-Z0-95,$"><span id="result"></span><br>密码 ：<input type="password" id="txtPassword"></fieldset></form></html>任务1实验截图：任务2代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function checkEmail() var name = document.getElementById("txtUserName");var result = document.getElementById("result");var flag = name.checkValidity();if(flag) result.innerHTML = "用户名格式正确" else result.innerHTML = "用户名格式错误"</script></head><body><form><fieldset><legend>请输入您的用户名和密码信息</legend>用户名：<input type="text" id="txtUserName" onblur="checkEmail()" pattern="a-zA-Z0-95,$" /><span id="result"></span><br /> 密 码：<input type="text" id="txtPassword" /><br /> 性 别：<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女<br /> 爱 好：<input type="checkbox" name="ball" />足球<input type="checkbox" name="ball" />篮球<input type="checkbox" name="ball" />排球<br /> 专 业：<input id="123" list="specialist" /><datalist id="specialist"><option value="软件工程"><option value="网络工程"><option value="计算机科学"><option value="数字媒体"></datalist><br /><details><summary>课 程：</summary><p>JSP开发</p><p>PHP开发</p><p>C#程序设计</p><p>数据库应用</p></details><input type="submit" value="提交" /><input type="reset" value="重置" /><br /></fieldset></form></body></html>任务2实验截图：任务3参考代码：<!DOCTYPE html><html><meta charset="UTF-8"><div><div><video id="video" src="video/photoshop破解教程视频.mp4" width="600">当前浏览器不支持video元素</video></div><div id="progressTime" style="display: none"><div style="float: left"><progress id="progress" max="100" style="width: 450px"></progress><div id="showTime" style="float:left;margin-left:15px"></div><div style="clear:both"></div></div></div><div><input type="button" id="btnPlay" onclick="playOrPause()" value="播放" /><input type="button" id="btnSpeedUp" onclick="speedUp()" value="快放" /><input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="慢放" /><input type="button" id="btnVolumeUp" onclick="volumeUp()" value="提高音量" /><input type="button" id="btnVolumeDown" onclick="volumeDown()" value="降低音量" /></div></div><script>var speed = 1; /播放速度var volume = 1; /播放音量var video = document.getElementById("video");var playBtn = document.getElementById("btnPlay");var btnSpeedUp = document.getElementById("btnSpeedUp");var btnSpeedUpDown = document.getElementById("btnSpeedUpDown");var btnVolumeUp = document.getElementById("btnVolumeUp");var btnVolumeDown = document.getElementById("btnVolumeDown");var showTime = document.getElementById("showTime");video.addEventListener('timeupdate', updateProgress, false); /为播放器添加时间改变监听事件var progress = document.getElementById("progress");progress.onclick = progressOnClick; /为progress控件添加单击事件/播放function playOrPause() var progressTime = document.getElementById("progressTime");progressTime.style.display = "" /显示播放进度条和时间if(video.paused) /如果当前播放状态为暂停，单击后开始播放playBtn.value = "暂停"video.play();video.playbackRate = speed;video.volume = volume;/启用控制工具条其他按钮btnSpeedUp.disabled = ""btnSpeedUpDown.disabled = ""btnVolumeUp.disabled = ""btnVolumeDown.disabled = "" else /如果当前播放状态为播放，单击后暂停播放playBtn.value = "播放"video.pause();/禁用控制工具条其他按钮btnSpeedUp.disabled = "disabled"btnSpeedUpDown.disabled = "disabled"btnVolumeUp.disabled = "disabled"btnVolumeDown.disabled = "disabled"/提高播放速度function speedUp() video.playbackRate += 1;speed = video.playbackRate;/降低播放速度function speedUpDown() video.playbackRate -= 1;if(video.playbackRate < 0) video.playbackRate = 0;speed = video.playbackRate;/增大音量function volumeUp() if(video.volume < 1) video.volume += 0.1;if(video.volume > 0) video.muted = false;volume = video.volume;/降低音量function volumeDown() if(video.volume > 0) video.volume -= 0.1;if(video.volume = 0) video.muted = true;volume = video.volume;/播放进度条单击事件，单击后从单击位置开始播放function progressOnClick(event) var progress = document.getElementById("progress");if(event.offsetX) /获取鼠标当前单击位置与当前位置存在的偏移量video.currentTime = video.duration * (event.offsetX / progress.clientWidth); /设定播放器新的播放位置 else video.currentTime = video.duration * (event.offsetX / progress.clientWidth);/更新进度条状态function updateProgress() /计算当前播放时长与总视频时长之比var currentPercent = Math.round(Math.floor(video.currentTime) / Math.floor(video.duration) * 100, 0); var progress = document.getElementById("progress");progress.value = currentPercent;/显示播放时间showTime.innerHTML = calculateTime(Math.floor(video.currentTime) + "/" + calculateTime(Math.floor(video.duration);/将当前传入的时间转换为hh:MM:ss的格式function calculateTime(time) var h;var m;var s;h = String(parseInt(time / 3600, 10);if(h.length = 1) h = '0' + h;m = String(parseInt(time % 3600) / 60, 10);if(m.length = 1) m = '0' + m;s = String(parseInt(time % 60), 10);if(s.length = 1) s = '0' + s;return h + ":" + m + ":" + s;</script></html>任务3实验截图：四、 实验总结本次实验总的来说完成起来还是比较简单的，就是一些基本的网页元素再加上新的HTML5的新添元素的组合。在任务2中，对于专业以及课程显示的问题与要求的输出还是与一些差距的，但是基本实现了相同的功能。在任务3中则是借鉴书本后面的源码进行DIY视频播放器的编写，但是还是存在一些问题，比如在全屏和不全屏来说，布局上会有变动，留到后期解决。
