json格式
json - > AJAX
json:数据格式,通常是以字符串形式表示
对象 {"name":"james","age":19}
数组 [{"name":"tom"},{"name":"jerry"},{"name","james"}]
所有key 必须添加双引号
所有value 如果字符串类型加上双引号
key和value之间 : 分隔
对象与对象之间 ,
常用数据格式:xml json
<books>
<book>
<name>tom</name>
</book>
<book>
<name>jerry</name>
</book>
</books>
验证码:解决网络攻击手段(机器人攻击)
1:动态创建数字图片/字母数字角度/算术/
一组图片/拖动滑块
2:短信(金融)
如何实现功能:
1:创建php动态生成一张图片
2:用户输入图片中字母或数字
js/index.js
3:01_admin_login.php
先把用户输入字母和数字 a001
再把图片中数字获取 $_SESSION["code"]
常见错误
1: syntax error,
<b>C:xampphtdocsh5admindata 1_admin_login.php</b> on line <b>10</b><br />
原因:程序第10 行(附近)有语法错误...
2: {"code":1,"msg":"登录成功"}
应该对象 header("Conten....");
3:今天的目标
3.1:h5新特性--视频,音频
视频:网站卖点[腾讯/爱奇艺/优酷/tmooc/抖音/直播..]
3.2:Flash被H5 取代体现的哪些方面?
Flash 绘图 ==>Canvas/SVG
Flash 动画 ==>定时器+Canvas
Flash 视频和视频播放==>video/audio
Flash 客户端存储 ==>WebStorage
3.3:h5新特性--视频播放
h5提供一个新的标签用于播放视频
mp4/mov/webm/ogg
<video src="x.mp4">您的浏览器版本太低，请升级<video>
<video>
<source src="x.mp4" />
<source src="x.mov" />
<source src="x.webm" />
您的浏览器版本太低，请升级
</video>
它本身是一个300*150的inline-block元素
video标签常用属性和成员
autoplay:false 是否自动播放
controls:false 是否显示控件
muted:true 是否静音
poster:"" 在播放第一帧之前显示海报
preload:"" 视频预加载策略
auto: 预加载视频元数据及缓冲一定时长视频
metadata: 只预加载元数据(尺寸,时长,第一帧内容)
none: 不预加载任何数据
###js对象属性###
currentTime: 当前播放时长
paused:true 当前视频是否处理暂停状态
volume:1 当前音量 0~1
playbackRate:1 回放速率 大于1快放,小于1慢播
成员方法:
play(); 播放视频
pause(); 暂停视频
成员事件:
onplay 播放视频
onpause 暂停播放
练习1:不使用video自带controls，自定义播放/暂停按钮
移标移出视频区域，隐藏按钮,鼠标移入视频区域显
示按钮
练习2:只要视频暂停显示一副广告,只要播放，就隐藏广告
周一:弹幕...
3.4:h5新特性--音频播放
h5提供了一个新的标签用于播放音频
<audio src="bg.mp3"></audio>
<audio>
<source src="bg.wav">
<source src="bg.ogg">
<source src="bg.mp3">
</audio>
它默认是一个300*30的inline-block,但若没有controls属性,不可见.
成员属性:事件/方法/属性
autoplay:false 是否自动播放
controls:false 是否显示控件
muted:true 是否静音
preload:"" 视频预加载策略
auto: 预加载视频元数据及缓冲一定时长视频
metadata: 只预加载元数据(尺寸,时长,第一帧内容)
none: 不预加载任何数据
###js对象属性###
currentTime: 当前播放时长
paused:true 当前视频是否处理暂停状态
volume:1 当前音量 0~1
playbackRate:1 回放速率 大于1快放,小于1慢播
成员方法:
play(); 播放视频
pause(); 暂停视频
成员事件:
onplay 播放视频
onpause 暂停播放
练习:使用复选框控制网页背景音乐
cb.onchange = function(){
this.checked
}
3.5 h5新特性--canvas绘图(重点)
网页中走势图,统计图,网页游戏,特效,地图应用都要使用绘图技术。
(1)SVG绘图:2D矢量图绘图技术，2000出现，后纳入h5标
(2)Canvas绘图:2D位图绘图技术,h5 提出绘图技术
(3)WebGL绘图:3D绘图技术，尚未纳入标准
Canvas绘图难点所在:
(1)坐标系
(2)单词比较多
canvas:画布，是h5提供绘图技术
3.6 h5新特性--canvas绘图技术
<canvas width="500" height="400">
您的浏览器版本太低，请升级!!!
</canvas>
canvas标签在浏览器默认300*150的inline-block
注意:画布宽和高只能html/js属性来赋值，
不能用css样式赋值
每个画布上有且只有一个"画笔"对象,
var ctx = canvas.getContext("2d");
(1)使用canvas绘制矩形
矩形的定位在自己左上角
ctx.lineWidth = 1; 描边宽度
ctx.strokeStyle = "#000"; 描边样式
ctx.fillStyle = "#000"; 填充样式
ctx.fillRect(x,y,w,h); 填充一个矩形(实心矩形)
ctx.strokeRect(x,y,w,h); 描边一个矩形
ctx.clearRect(x,y,w,h); 清除一个矩形范围内所有图形
练习1:在画布的左上角，右上角，左下角，右下角，
居中位置 绘制100*80描边矩形(颜色不同)
练习2:在画布上描边一个可以左右移动100*80描边矩形
提示:使用定时器，先清除画布上己有内容,
再重新绘制一个(x不停修改)
上下移动/右角45度..
(2)使用canvas绘制文本
ctx.textBaseline = "alphabetic"; 文本基线
ctx.font = "12px sans-serif"; 文本大小和字体
ctx.fillText(str,x,y); 填充一段文本
ctx.strokeText(str,x,y); 描边一段文本
ctx.measureText(str); 测量文本宽度{w}