HTML5-弹球-不动框

1、 弹球运动——-index.html

2、 不动框——–index1.html

此处用到了onscroll事件

3、 封装无缝轮播-滚动轮播形式———index2.html

下午

1、表单元素

(1)email（不能添加 汉字）

(2) number

不能输入字母，汉字

(3)number 规定 min,max,step;

结果如下：


（6）range

结果：

querySelector查找页面元素
结果：

（7）用range来调节颜色——index2.html

注：input框写在form内，或外的区别是写在外面不能提交。

（8）选色

结果显示如下：

（9）search（主要体现在手机上）

（10）tel

pattern是正则表达式

（11）日期

IE10以下不支持。常用于手机端

（12）周、月

（13）url路径

2、属性

（1）autofocus自动获取焦点

虽然有两个，但是读取的是第一个

（2）autocomplete 默认选项是开

（3）multiple 输入多个邮箱地址

用逗号隔开


(4)minlength,maxlength


结果显示如下：

低于minlength就提示。

高于maxlength就不能再输入。

（5）required

什么都不填写点提交会显示如下结果

(6) min,max,step;


结果如下：

3、 表单元素

（1）、datalist

用id关联，添加list

(2)进度条progress

1=====


会动
2=====

为1时进度条占满，为0时不占
3====

（3）form

(3)、meter

会变色，红、黄、绿，低电量显示红，高电量显示黄，适中电量显示绿

(4)output

要用到for

(5)valueMissing

点提交后有提示

(6)tolong有问题。

(7)patternMismatch

（8）

当为空时，弹出弹窗

总结

5-21

1、video标签（视频）

（1）

（2）

（3）加上control,有进度条，不能自动播放，加上autoplay就是自动播放。加Loop播放完后重新播放，muted静音

（4）加封面图

（5）用按钮控制视频的播放暂停

（6）Source标签（解决兼容问题）

（7）、运行优酷等网站的视频 复制视频的网址

（8）插播广告

视频播放的时间为5秒

2、音频audio标签

QQ背景音乐的设置

3、canvas(画板)

拓展：保留16位

实例—-国际象棋—

给边框加宽度，宽度是从中间往两边计算。
给边框加颜色，stroke是虚线

fill是实线