各大网站有哪些,网站建设总结,centos怎么安装wordpress,阐述网站建设的步骤过程刚开始学习的时候#xff0c;我不懂怎么在HTML中播放音乐#xff0c;后来才发现其实很简单的#xff0c;只要一句代码配合js使用就OK了。好了请看下面的代码 源代码#xff1a;
!doctype html
html
head
meta charsetutf-8
我不懂怎么在HTML中播放音乐后来才发现其实很简单的只要一句代码配合js使用就OK了。好了请看下面的代码 源代码
!doctype html
html
head
meta charsetutf-8
title无标题文档/title
link relstylesheet href./css/Untitled-2.css
/head
bodydiv classboximg src./images/01.jpg altdiv classtubiao idtbdiv classtubiao1 idtb1/divdiv classtubiao2 idtb2 styledisplay: none;/div/div/divvideo src./羽岡佳 - 花火の夜に.mp3 loop preloadauto idmusic/videoscript srcjs/js.js/script
/body
/html
css部分
charset utf-8;
/* CSS Document */
*{padding: 0px;margin: 0px;
}
.box{width: 350px;height: 500px;margin: 80px 40%;overflow: hidden;position: relative;
}
.box img{width: 350px;height: 500px;
}
.tubioa{width: 43px;height: 43px;cursor: pointer;position: absolute;top: 0px;right: 0px;
}
.tubiao1,.tubiao2{width: 43px;height: 43px;position: absolute;top: 0px;right: 0px;
}
.tubiao1{background: url(../images/02.png) 0px -44px no-repeat;
}
.tubiao2{background: url(../images/02.png) 0px 0px no-repeat;animation: TuBiao 3s linear infinite;
}
keyframes TuBiao{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}
}
Js部分
// JavaScript Document
var numbertrue;
var musicdocument.getElementById(music);
var tbdocument.getElementById(tb);tb.onclickfunction(){if(numberfalse){numbertrue;document.getElementById(tb1).style.displayblock;document.getElementById(tb2).style.displaynone;music.pause();}else{document.getElementById(tb1).style.displaynone;document.getElementById(tb2).style.displayblock;numberfalse;music.play();}};让我们看下效果 没点击就不播放音乐 点击后播放音乐并旋转图标 其实就是用video标签来存放音乐然后用js控制播放、暂停。好了看完上面的代码你学会了没有呀。
