《HTML上机实验实验一》由会员分享，可在线阅读，更多相关《HTML上机实验实验一（13页珍藏版）》请在金锄头文库上搜索。
1、word某某轻工大学HTML5实验报告题 目：H5的根本编程 2017年5月7日实验1H5的根本编程一、 实验目的：1、 熟悉集成开发环境(IDE)2、 熟悉HTML5新增标记3、 熟悉HTML5页面架构4、 掌握HTML5表单5、 掌握JS的根本操作二、 实验任务：1. 表单格式验证，利用H5提供的验证功能实现对表单的验证。2. 编写一个注册页面，界面类似如下所示,可以增加更多的项目,例如,可以包括用户名,密码,确认密码,性别,出生年月,住址, ,某某号,爱好,等等。3. 编写一个DIY视频播放器。可以对播放器实现播放，暂停，快播，慢播，音量调节，显示播放进度等功能。三、 试验步骤任务1代码
2、：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 name = document.getEleme
3、ntById(txtUserName);var result = document.getElementById(result);var flag = name.checkValidity();if(flag) result.innerHTML = 用户名格式正确; else result.innerHTML = 用户名格式错误;请输入您的用户名和密码信息用户名： 密 码： 性 别：男女 爱 好：足球篮球排球 专
4、;业：课 程：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.getElementById(btnSpee
5、dUpDown);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);progr
6、ess.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;/启用控制工具条
7、其他按钮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;/降低播放速度func
