1. 音频标签
css部分
.progress{
width: 300px;
height: 10px;
background-color: black;
border-radius: 5px;
}
.innerProgress{
width: 0;
height: 10px;
background-color: blue;
border-radius: 5px;
} 复制代码HTML部分：
<!-- 自媒体， 头条号，百家号，企鹅号，公众号 -->
<audio controls muted id="myaudio">
<source src="src/BEYOND - 真的爱你.mp3">
<source src="src/BEYOND - 真的爱你.wav">
<source src="src/BEYOND - 真的爱你.ogg">
</audio>
<button id="bt1">播放</button>
<span id="current">0:00</span>
<span id="duration"></span>
<div class="progress">
<div class="innerProgress"></div>
</div>
<button id="bt2">下一首</button>
<button>上一首</button>复制代码JS部分：
window.onload=function(){
var arr=[["src/BEYOND - 真的爱你.mp3","src/BEYOND - 真的爱你.wav",
"src/BEYOND - 真的爱你.ogg"],["src/BOBO - 光荣.mp3","src/BOBO - 光荣.wav",
"src/BOBO - 光荣.ogg"],["src/Gala (旮旯) - 追梦赤子心.mp3","src/Gala (旮旯) - 追梦赤子心.wav",
"src/Gala (旮旯) - 追梦赤子心.ogg"]]
var index=0;
var bt2=document.getElementById("bt2");
var sources=myaudio.getElementsByTagName("source")
bt2.onclick=function(){
index++;
for(var n=0;n<sources.length;n++){
sources[n].src=arr[index][n]
}
myaudio.load()//重新加载音频
myaudio.oncanplay=function(){
time=myaudio.duration;
console.log(time)
duration.innerHTML=changeTime(time)
}
myaudio.play()
bt1.innerHTML='暂停'
t=setInterval(function(){
current.innerHTML=changeTime(Math.ceil(myaudio.currentTime))
var currenttime=myaudio.currentTime;
innerProgress.style.width=(currenttime/time)*100+"%"
},1000)
}
var myaudio=document.getElementById("myaudio");
//onended监听 音频是否播放完成
myaudio.onended=function(){
index++;
for(var n=0;n<sources.length;n++){
sources[n].src=arr[index][n]
}
myaudio.load()//重新加载音频
myaudio.oncanplay=function(){//是否要开始播放
time=myaudio.duration;
console.log(time)
duration.innerHTML=changeTime(time)
}
myaudio.play()
bt1.innerHTML='暂停'
t=setInterval(function(){
current.innerHTML=changeTime(Math.ceil(myaudio.currentTime))
var currenttime=myaudio.currentTime;
innerProgress.style.width=(currenttime/time)*100+"%"
},1000)
}
var bt1=document.getElementById("bt1");
var duration=document.getElementById("duration");
var current=document.getElementById("current")
var time=myaudio.duration;
var innerProgress=document.getElementsByClassName("innerProgress")[0]
console.log(time)
var progress=document.getElementsByClassName("progress")[0]
//总时间的转化
function changeTime(x){
var min=parseInt(x/60);
var s=Math.round(x%60);
s=s<10?"0"+s:s
var str=min+":"+s
return str
}
duration.innerHTML=changeTime(time)
var t;
bt1.onclick=function(){
if(myaudio.paused){
myaudio.play()
this.innerHTML='暂停'
t=setInterval(function(){
current.innerHTML=changeTime(Math.ceil(myaudio.currentTime))
var currenttime=myaudio.currentTime;
innerProgress.style.width=(currenttime/time)*100+"%"
},1000)
}else{
myaudio.pause()
this.innerHTML="播放"
clearInterval(t)
}
}
progress.onmousedown=function(event){
var e=event||window.event
var width=e.clientX-progress.offsetLeft
innerProgress.style.width=width+"px"
current.innerHTML=changeTime(width/300*time)
myaudio.currentTime=width/300*time
progress.onmousemove=function(event){
var e=event||window.event
var width=e.clientX-progress.offsetLeft
innerProgress.style.width=width+"px"
current.innerHTML=changeTime(width/300*time)
myaudio.currentTime=width/300*time
}
progress.onmouseup=function(event){
progress.onmousemove=null;
}
}
}复制代码<style>
video{
width: 500px;
height: 282px;
}
</style>
<video src="src/一生所爱.mp4" controls muted loop id="myvideo">
<source src=""></source>
</video>
<button id="bt1">播放</button>
<button id="bt2">全屏</button>
JS 部分：
window.onload=function(){
var myvideo=document.getElementById("myvideo");
var bt1=document.getElementById("bt1")
bt1.onclick=function(){
myvideo.play()
}
var bt2=document.getElementById("bt2")
bt2.onclick=function(){
requestFullScreen(myvideo)
}
console.log(myvideo.duration)
//全屏显示
function requestFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
//FireFox
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
//Chrome等
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
} 复制代码3. canvas
（1） 简介
canvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。
<canvas> 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。
默认情况下，<canvas> 没有边框和内容。默认是一个 300*150 的画布，所以我们创建了 <canvas> 之后要对其设置宽高。 我们可以通过html属性‘width’，‘height’来设置canvas的宽高，不可以通过 css 属性来设置宽高。因为通过 css 属性设置的宽高会使 canvas 内的图像按照 300*150 时的比例放大或缩小
（2） 基础的使用方法
渲染上下文(Thre Rending Context)
<canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。
我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d'); 复制代码（3） 绘制直线
ctx.moveTo(0,0);//坐标的起始点
ctx.lineTo(100,100);//终止点
ctx.lineTo(100,200);
ctx.strokeStyle="red";
ctx.stroke()//开始绘制
cxt.closePath();//关闭路径复制代码（4）画圆
ctx.arc(200,200,50,0,2*Math.PI,true)，前两个值规定圆心的坐标，第三个值表示圆的半径，第四个值表示开始的角度，第五个值是终止的角度，第六个值表示顺时针还是逆时针
ctx.beginPath()
ctx.arc(200,200,50,0,2*Math.PI,true)
ctx.strokeStyle="blue"
ctx.stroke();
cxt.closePath();//关闭路径复制代码（5）矩形
cxt.beginPath();
cxt.strokeRect(200,100,200,150);
cxt.strokeStyle="blue";//前两个值是左上角的坐标点，第三个值是宽度，第四个值是高度
cxt.stroke();
cxt.closePath();//关闭路径
复制代码（6）填充和描边
ctx.fillStyle="blue";//填充颜色
ctx.fill();//开始填充
ctx.lineWidth=10;//描边的宽度复制代码案例：
1. 机器人的制作 代码链接
2. 太极圈的制作 代码链接
3. 画图板的制作 代码链接
<style> canvas{ display: block; border: 1px solid red; background-color: aqua; } span{ display: inline-block; width: 30px; height: 30px; } #red{ background-color: red; } #orange{ background-color: orange; } #yellow{ background-color: yellow; } #green{ background-color: green; } #blue{ background-color: blue; } #black{ background-color: black; } #purple{ background-color: purple; } </style></head><body> <span id="red"></span> <span id="orange"></span> <span id="yellow"></span> <span id="green"></span> <span id="blue"></span> <span id="black"></span> <span id="purple"></span> <button>清空画布</button> <canvas width="500" height="500" id="mycanvas"></canvas> <script> window.onload=function(){ console.log(event) var mycanvas=document.getElementById('mycanvas'); var cxt=mycanvas.getContext('2d'); //javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。 //但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码 HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); var sps=document.getElementsByTagName('span'); for(var n=0;n<sps.length;n++){ sps[n].onclick=function(){ cxt.strokeStyle=this.currentStyle.backgroundColor; // cxt.strokeStyle=this.style.backgroundColor //style属性只能操作内联样式; } } mycanvas.onmousedown=function(event){ var e=event || window.event; var x=e.clientX-mycanvas.offsetLeft; var y=e.clientY-mycanvas.offsetTop; cxt.beginPath(); mycanvas.onmousemove=function(event){ var e=event || window.event; var X=e.clientX-mycanvas.offsetLeft; var Y=e.clientY-mycanvas.offsetTop; cxt.lineTo(X,Y) cxt.stroke() } mycanvas.onmouseup=function(){ mycanvas.onmousemove=null; cxt.closePath(); } } //清空画布 var bt1=document.getElementsByTagName('button')[0]; bt1.onclick=function(){ cxt.clearRect(0,0,mycanvas.width,mycanvas.height) } } </script></body>复制代码4. canvas 进阶
（1）图形变换
cxt.translate(0,100) 平移
cxt.rotate()旋转 Math.PI
cxt.scale(0,0) 缩放
cxt.save()保存变换前的样式
cxt.restore() 应用保存前的复制代码（2）canvas 操作文字
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext("2d");
var str="hello world"
cxt.font="50px 微软雅黑 bold"
cxt.textAlign="center"
cxt.textBaseline='middle';
cxt.strokeText(str,300,100)
cxt.fillText(str,200,200)复制代码（3）canvas 中的渐变
水平渐变
var linear=cxt.createLinearGradient(0,0,0,200);
linear.addColorStop(0, 'red');
linear.addColorStop(0.25,"green")
linear.addColorStop(0.5,"yellow")
linear.addColorStop(0.75,"pink")
linear.addColorStop(1,"blue")
cxt.fillStyle=linear;
cxt.fillRect(0,0,200,200)
径向渐变
var radial=cxt.createRadialGradient(400,150, 0, 400, 150, 50);
radial.addColorStop(0,"red")
radial.addColorStop(1,"blue")
cxt.fillStyle=radial
cxt.arc(400,150,50,0,2*Math.PI,true)
cxt.fill()复制代码（4）canvas操作图像
var img=new Image();
img.src="1.jpg"
img.onload=function(){
坐标点，宽度 ，高度，
cxt.drawImage(img,0, 0,100,100);
}复制代码案例 1：表盘的制作
css部分：
canvas{
border: 1px solid red;
background-color: aqua;
}
HTML 部分：
<canvas width="500" height="500" id="mycanvas"></canvas>
JS部分：
var mycanvas=document.getElementById('mycanvas');
var cxt=mycanvas.getContext('2d');
cxt.beginPath();
cxt.strokeStyle="black";
cxt.lineWidth=5;
cxt.arc(200,200,150,0,2*Math.PI,true);
cxt.stroke();
cxt.closePath();
cxt.translate(200,200)
for(var n=0;n<12;n++){
cxt.beginPath();
cxt.moveTo(140,0);
cxt.lineTo(150,0);
cxt.stroke();
cxt.rotate(Math.PI/6);
cxt.closePath();
复制代码5. HTML5 的拖拽功能
（1）简介
关于拖拽API 拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。
（2）拖拽功能的原理
1.draggable=true
2.事件
ondragstart 准备开始拖拽
ondrag 拖拽时触发
ondragend 拖拽结束后触发
ondragenter 进入时
ondragover 移动到指定元素上触发 需要移除浏览器的默认事件 添加在移动到的元素上
ondragleave 离开时
ondrop 释放事件 添加在移动到的元素上
3.
e.dataTransfer.setData("Text",this.id)
e.dataTransfer.getDate()
e.dataTransfer.setData('text/html', this.innerHTML);
复制代码
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
