一款小清新音乐播放器（H5+js+css+canves）

来源：互联网发布：免费的u盘数据恢复软件编辑：程序博客网时间：2024/05/16 00:42

//H5代码：<body bgcolor="#262626">

<div class="Video">

<audio id="music">

<source src="../music/追光者.mp3" type="audio/mpeg">

</audio>

</div>

<div >

<img src="../img/defs.png" id="around">

</div>

<div class="go" id="go"></div>

<div class="long"></div>

<div>

<canvas height="100" width="100" id="Canves" class="canves"></canvas>

</div>

<div class="canves1">

<canvas height="100" width="100" id="Canves1" ></canvas>

</div>

<div class="canves2">

<canvas height="100" width="100" id="Canves2" ></canvas>

</div>

</body>//Css代码：

.go{

position: absolute;

width: 6px;

height: 6px;

border-radius: 5px;

border:2px solid #33E58D;

background: white;

margin-top: 498px;

margin-left: 520px;

#around{

width: 300px;

height: 300px;

position: absolute;

margin-left: 550px;

margin-top: 70px;

.canves{

position: absolute;

margin-top: 540px;

margin-left: 650px;

cursor: pointer;

.canves1{

position: absolute;

margin-top: 520px;

margin-left: 540px;

cursor: pointer;

.canves2{

position: absolute;

margin-top: 520px;

margin-left: 770px;

cursor: pointer;

.long{

position: absolute;

width: 378px;

height: 3px;

border: 2px solid #33E58D;

border-radius: 6px;

margin-top: 500px;

margin-left: 520px;

//Js代码：

var Aro=document.getElementById("around");

var sos=0, //判断音乐是否播放，0表示暂停；

start=document.getElementById("music");

var l=0; //用来存放进度条离left的距离；

var t=0; //用来控制进度条每次的前进px；

var j=0; //用来存放进度条的初始位

var T=0; //判断按键暂停还是播放；

var m=0; //设置图片转动的角度；

var Time1=null;//定时器名称；

var Time3=null;//定时器名称；

function Time(){

    m++;

    Aro.style.transform="rotate("+m*1.5+"deg)";

function Time2(){

t=t+0.8;

go.style.marginLeft=j+t+"px";

l=parseInt(j+t);

console.log(l);

var go=document.getElementById('go');

j=go.offsetLeft;

var draving=document.getElementById('Canves');

var draving1=document.getElementById('Canves1');

var draving2=document.getElementById('Canves2');

if(draving.getContext){

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

star();

} //中间按钮

if(draving1.getContext){

var context1=draving1.getContext("2d");

left();

} //左边按钮

if(draving2.getContext){

var context2=draving2.getContext("2d");

right();

} //右边按钮

else{

alert("您的浏览器不支持Canves!");

draving.addEventListener("click",hander,false);

function hander(){

if(sos==1){

start.pause();

sos=0;

else{

start.play();

sos=1;

if(T==0){

stop();

Time1=setInterval(Time,50);

T=1;

Time3=setInterval(Time2,500);

}else{

star();

clearInterval(Time1);

clearInterval(Time3);

T=0;

function stop(){

context.clearRect(0,0,100,100);

context.beginPath();

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

context.moveTo(45,60);

context.lineTo(45,40);

context.moveTo(55,60);

context.lineTo(55,40);

context.strokeStyle="#33E58D";

context.lineWidth=2;

context.stroke();

function star(){

context.clearRect(0,0,100,100);

context.beginPath();

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

context.moveTo(45,60);

context.lineTo(45,40);

context.moveTo(45,40);

context.lineTo(60,50);

context.moveTo(60,50);

context.lineTo(45,60);

context.strokeStyle="#33E58D";

context.lineWidth=2;

context.stroke();

function left(){

context1.beginPath();

context1.moveTo(30,80);

context1.lineTo(30,60);

context1.moveTo(50,80);

context1.lineTo(50,60);

context1.lineTo(30,70);

context1.lineTo(50,80);

context1.strokeStyle="#33E58D";

context1.lineWidth=2;

context1.stroke();

function right(){

context2.beginPath();

context2.moveTo(30,60);

context2.lineTo(30,80);

context2.lineTo(50,70);

context2.lineTo(30,60);

context2.moveTo(50,60);

context2.lineTo(50,80);

context2.strokeStyle="#33E58D";

context2.lineWidth=2;

context2.stroke();

技术网站：http://www.macuroon.cn

运行结果：

阅读全文

0 0