HTML5 编程的课程作业
- 认识HTML文档结构。
- 熟悉HTML5常用标签的使用。
完成个人主页的设计,内容要丰富全面。要尽可能用到所学HTML基本标签。网页中需包含自我个人信息,学号、姓名和个人照片,并使用HTML5文档结构标签对版式加以设计。网页要有一定长度,并使用超链接标签实现网页内部的内容跳转。
- 认识JavaScript按钮事件。
- 熟悉DOM对象的使用。
- 了解CSS浮动排列。
设计一款电子日历,要求实现显示当天所在月份的全部日期,且当天日期以红色显示。用户可以通过点击按钮控件(上个月,下个月)切换月份。
- 理解元素拖放流程。
- 理解CSS定位规则。
- 熟悉DOM添加和删除子元素流程。
设计一款扑克牌拖放小游戏。在网页中插入A框和B框。要求用户拖动从A框拖动5张连续的扑克牌至B框,完成游戏。具体要求:
- 初始时,A框包含13张随机乱序后的同花色扑克牌,以背面显示。
- 用户可任意拖动其中一张扑克牌至B框,扑克牌以正面展示。
- 用户也可将扑克牌从B框拖至A框,扑克牌会自动回到初始的位置,且背面展示。
- B框最多能够容纳5张扑克牌。在接收到5张扑克牌后,如果满足顺子要求,则提示用户游戏结束并显示用户成绩(拖动次数)。若不满足要求,用户必须先将其中不满足的牌拖回A框,游戏方可继续。
- 了解表单API的工作原理。
- 熟悉各种表单组件的使用。
设计一款问卷调查表,问卷调查主题不限。具体要求:
- 表单组件要多样化。要使用单选,多选,多行文字输入等组件。
- 部分表单输入组件需要有提示性说明文字。
- 表单提交前要做必要的检查,表单组件内容不能为空。
- 文档格式做到整齐统一,样式美观。
- 熟悉使用canvas绘制图形
- 熟悉表单组件及按钮相应事件
在网页中添加表单组件,要求用户输入统计数据,根据用户数据绘制相应的饼状图和柱状图。
- 要求对用户输入进行有效性验证;
- 通过点击按钮绘制饼状图或柱状图;
- 饼状图和柱状图要有数据标注。
- 熟悉使用媒体API
- 熟悉按钮响应事件
在网页中设计一款视频播放器,要求不使用自带控制面板,通过自定义按钮,实现以下功能:
- 播放、暂停、静音等功能;
- 视频放大和缩小;
- 播放上一个和下一个文件;
- 快进和快退功能。
其他功能可自行设计,界面尽量做到美观大方,可插入背景图片。
- 熟悉 CSS3 transition 动画过程
- 熟悉 CSS3 阴影效果的使用
利用 CSS3 动画技术制作响应式放大悬浮菜单,具体要求:
- 在网页中添加多个菜单,菜单文字内容自定;
- 在用户鼠标悬浮于菜单上方后,菜单动画放大;
- 放大后的菜单添加阴影使其悬浮于页面之上,具有立体感。
Note
最新版代码相较于实验报告提交版本有以下改动:
- 修复了在格子边长为非 16px 整数倍时蛇身会出现的线条割裂问题。
- 修复了游戏开始但并未结束时,开始游戏按钮仍然可点击的问题。
- JavaScript编程综合能力训练。
- 熟悉Canvas的使用。
- 熟悉DOM事件。
使用JavaScript设计一款贪吃蛇小游戏,要求如下:
- 玩家可通过上下左右按键控制蛇头的移动方向使其向指定方向移动,并吃掉随机位置上的食物来获得分数。
- 每吃掉一个食物,蛇身都会边长,并且在随机位置上出现下一个食物。
- 如果蛇头碰到自身或墙壁,则游戏结束。
- 游戏还可根据游戏的难度设置不同的游戏速度。