HTML上机实验(实验一)(7页).doc

《HTML上机实验(实验一)(7页).doc》由会员分享，可在线阅读，更多相关《HTML上机实验(实验一)(7页).doc（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-HTML上机实验(实验一)-第 7 页武汉轻工大学HTML5实验报告题 目： H5的基本编程 2017年5月7日实验1H5的基本编程一、 实验目的：1、 熟悉集成开发环境(IDE)2、 熟悉HTML5新增标记3、 熟悉HTML5页面架构4、 掌握HTML5表单5、 掌握JS的基本操作二、 实验任务：1. 表单格式验证，利用H5提供的验证功能实现对表单的验证。2. 编写一个注册页面，界面类似如下所示,可以增加更多的项目,例如,可以包括用户名,邮箱,密码,确认密码,性别,出生年月,住址,电话,身份证号,爱好,等等。3. 编写一个DIY视频播放器。可以对播放器实现播放，暂停，快播，慢播，音量调节，

2、显示播放进度等功能。三、 试验步骤任务1代码：function checkEmail()var name = document.getElementById(txtUserName);var result = document.getElementById(result);var flag = name.checkValidity();if(flag)result.innerHTML = 用户名格式正确;elseresult.innerHTML = 用户名格式不正确;请输入您的用户名和密码信息用户名 :密码 ：任务1实验截图：任务2代码：function checkEmail() var na

3、me = document.getElementById(txtUserName);var result = document.getElementById(result);var flag = name.checkValidity();if(flag) result.innerHTML = 用户名格式正确; else result.innerHTML = 用户名格式错误;请输入您的用户名和密码信息用户名： 密    码： 性    别：男女 爱    好：足球篮球排球 专&

4、nbsp;   业：课 程：JSP开发PHP开发C#程序设计数据库应用任务2实验截图：任务3参考代码：当前浏览器不支持video元素var speed = 1; /播放速度var volume = 1; /播放音量var video = document.getElementById(video);var playBtn = document.getElementById(btnPlay);var btnSpeedUp = document.getElementById(btnSpeedUp);var btnSpeedUpDown = document.

5、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.getEleme

6、ntById(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.vo

7、lume = volume;/启用控制工具条其他按钮btnSpeedUp.disabled = ;btnSpeedUpDown.disabled = ;btnVolumeUp.disabled = ;btnVolumeDown.disabled = ; else /如果当前播放状态为播放，单击后暂停播放playBtn.value = 播放;video.pause();/禁用控制工具条其他按钮btnSpeedUp.disabled = disabled;btnSpeedUpDown.disabled = disabled;btnVolumeUp.disabled = disabled;btnVo

8、lumeDown.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 0) video.muted = false;v

9、olume = 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.c

10、urrentTime = 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.dura

11、tion) * 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(pa

12、rseInt(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;任务3实验截图：四、 实验总结本次实验总的来说完成起来还是比较简单的，就是一些基本的网页元素再加上新的HTML5的新添元素的组合。在任务2中，对于专业以及课程显示的问题与要求的输出还是与一些差距的，但是基本实现了相同的功能。在任务3中则是借鉴书本后面的源码进行DIY视频播放器的编写，但是还是存在一些问题，比如在全屏和不全屏来说，布局上会有变动，留到后期解决。