HTML5 Audio Video Canvas Cookie Storage

来源：互联网发布：c语言分隔符编辑：程序博客网时间：2024/06/03 22:08

1.Audio 音频技术

<audio controls="controls">

<source type="audio/mp3" src=""></source>

</audio>

支持音频文件类型：

1、mp3: audio/mp3

2、ogg: audio/ogg

3、wav: audio/wav

controls 控件面板

autoplay　自动播放

preload 预加载

loop 循环播放

//audio播放

//必须重新加载

document.getElementById("audio").load();

//播放

document.getElementById("audio").play();

//暂停

document.getElementById("audio").pause();

2.video 视频控件

<video controls="controls" width="500" height="300">

<source type="audio/mp4" src="source/apple.mp4"></source>

</video>

支持视频文件类型：

1、mp4: video/mpeg

2、ogg: video/ogg

3、WebM: video/webm

controls 控件面板

autoplay　自动播放

preload 预加载

loop 循环播放

width 控件宽度

height 控件高度

3.Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

1.线段

//1、创建画布

<body>

<canvas id="cav" width="500" height="500"></canvas>

</body>

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、设置线段起始坐标

context.moveTo(100,100);

//5、设置线段结束坐标

context.lineTo(200,150);

//6.设置线段颜色

context.strokeStyle ="red";

//7.设置线段粗细

context.lineWidth = 4;

//8、开始画线

context.stroke();

2.圆

<body>

//1、创建画布

<canvas id="cav" style="border: red 1px solid" width="500" height="300">

</canvas>

</body>

<script type="text/javascript">

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、设置开始画圆路径

context.beginPath();

//5、设置圆心坐标、圆的半径、起始弧度、结束弧度

context.arc( 50,50,30,0*Math.PI,2*Math.PI );

//context.arc( 50,50,60,0*Math.PI,2*Math.PI );

//6.设置圆弧颜色 

context.strokeStyle="deepskyblue"

// 7、根据设置参数，开始画空心圆

context.stroke();

//实心圆

//context.fillStyle="red";

//context.fill();

//8、关闭绘制

context.closePath();

</script>

3.矩形

//1、创建画布

<body>

<canvas id="cav" style="border: red 1px solid" width="500" height="300">

</canvas>

</body>

<script type="text/javascript">

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、设置图形颜色

context.fillStyle = "black";

//5、设置图形起始坐标和尺寸

context.fillRect( 10, 10, 100, 100 );

//空心矩形

//context.strokeRect( 10, 10, 100, 100 );

//6、设置文字，文字内容，显示位置x,y

context.fillText("Hello World!", 150, 100 );

</script>

4.渐变

<body>

//1、创建画布

<canvas id="cav" style="border: red 1px solid" width="500" height="300">

</canvas>

</body>

<script type="text/javascript">

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、设置渐变坐标

var tmp = context.createLinearGradient(120,130,250,250);

//5、添加渐变颜色

tmp.addColorStop( 0 , "blue" );

tmp.addColorStop( 1, "red" );

//6、将设置好的渐变效果给上下文

context.fillStyle = tmp;

//7、开始渐变

context.fillRect( 0, 0 , 500, 300 );

</script>

<body>

//1、创建画布

<canvas id="cav" style="border: red 1px solid" width="500" height="300">

</canvas>

</body>

<script type="text/javascript">

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、设置渐变坐标 ，注意：需要设置同心圆。由 A 圆 =>B圆 渐变。

var tmp = context.createRadialGradient(120,130,0, 120,130,50 );

//5、添加渐变颜色

tmp.addColorStop( 0 , "yellow" );

tmp.addColorStop( 1, "red" );

//6、将设置好的渐变效果给上下文

context.fillStyle = tmp;

//7、开始渐变

context.fillRect( 0, 0 , 500, 300 );

</script>

5.图片

<body>

//1、创建画布

<canvas id="cav" style="border: red 1px solid" width="500" height="300">

</canvas>

<img id="img" src="img/wenzi.gif" width="50" height="50" />

</body>

<script type="text/javascript">

//2、获取画布

var cav = document.getElementById("cav");

//3、获取对象上下文

var context = cav.getContext("2d");

//4、获取图片对象

var img = document.getElementById("img");

//5、设置图片对象到画布坐标

context.drawImage( img, 50, 50 );

</script>

var timer = 200;

//可以达到随机秒数后多次调用函数的效果

t=function(){

playMusic();

timer = Math.random()*min*1000+min*1000;

setTimeout(t,timer);

}

setTimeout(t,timer);

//事实上是同一秒数后多次调用函数

setInterval(function(){

playMusic();

},Math.random()*min*1000+min*1000;)

Cookie：网络存储数据重要途径之一。没有Cookie，就没有网站，每一个网站都有一个独立的cookie,Cookie是存储数据的。存储位置在浏览器。存储大小最大为4KB。Cookie不安全，因为每次客户端请求服务端，都需要传递参数Set-Cookie,而且Cookie默认是明文的。

cookie的形式：

cookie名=cookie值,expire=;

Cookie的主要方法：

1、document.cookie 获取当前网站cookie。

2、split 通常用它来获取某个cookie的值

3、document.cookie = "a=b"; 设置cookie

4、可以设置cookie的存在时间。

Date 函数。JS Date函数。

1、JS 作为客户端脚本语言。Date时间是从本地取的，因此准确性不可以保证。

2、new Date().getFullYear() 获取完整的年份。

3、new Date().getMonth() 获取月份(需要+1)

4、new Date().getDate() 获取日

5、new Date().getHours() 获取小时

6、new Date().getMinutes() 获取分钟

7、new Date().getSeconds() 获取秒数

8、new Date().getDay() 获取星期几

9、new Date().getTime() 获取时间戳

设置Cookie过期时间一般为：

假设设置一个小时过期：

a=b,expire=new Date().getTime() + 3600000;

HTML5中一般用WebStorage HTML5 存储。

WebStorage 分为：localStorage 和 sessionStorage

1、webStorage 可以通过key-value的形式直接设置或者获取。

setItem("键","值")； 设置

getItem("键") 获取

length() 长度

clear() 清空所有的storage

removeItem("移除键") 移除

2、webStorage 可以很大程序节省你的网络请求，因为Storage是不需要在请求中放入storage。

3、webStorage 因为不需要放入数据，因为可以节省处理时间。

4、webStorage 最大存储限制5MB。

HTML5 表单：

1、type=number 数字 min 最小值, max 最大值,step 步长

2、type=range 区间，区间范围。

3、type=color 颜色面板

4、type=date 日期控件

5、type=email 电子邮件

6、type=url 链接

7、type=tel 电话号码

8、type=file multiple 多文件上传

9、required 必填项

10、novalidate 不验证，(一般用于表单)

11、placeholder 输入框的提示信息

12、<p contenteditable="true">文字</p> 可编辑段落

13、<input type="text" list="data"/>

<datalist id="data"> 数据列表

<option value=""></option>

</datalist>

0 0