html javascript 实现点击变成一个播放器播放歌曲
我想要实现如下功能：点击播放我点击“点击播放”后，这四个字消失，在原来位置变成一个播放器。播放歌曲a.mp3.不影响我其他位置的内容。或者我点击“1.jpg”后，这个图片...
我想要实现如下功能：
点击播放
我点击“ 点击播放” 后，这四个字消失，在原来位置变成一个播放器。播放歌曲a.mp3.不影响我其他位置的内容。
或者我点击“ 1.jpg” 后，这个图片消失，在原来位置变成一个播放器。播放歌曲a.mp3.不影响我其他位置的内容。
请实地操作，并贴代码，谢谢。
谢绝CTRL+C，CTRL+V。 展开
点击播放
我点击“ 点击播放” 后，这四个字消失，在原来位置变成一个播放器。播放歌曲a.mp3.不影响我其他位置的内容。
或者我点击“ 1.jpg” 后，这个图片消失，在原来位置变成一个播放器。播放歌曲a.mp3.不影响我其他位置的内容。
请实地操作，并贴代码，谢谢。
谢绝CTRL+C，CTRL+V。 展开
4个回答
展开全部
<script>
function music(div_id)
{
var music = '103520.wma';//音乐文件路径
document.getElementById(div_id).innerHTML = '<p> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="phx" width="245" height="66"> <param name="URL" value="'+music+'"><param name="autoStart" value="-1"></object> </p>';
}
</script>
<div id="music"><a onclick="music('music');" href="#">文字点击播放</a></div>
<br >
<br>图片播放
<div id="music2"><a onclick="music('music2');" href="#"><img src="http://www.baidu.com/img/baidu.gif"></a></div>
function music(div_id)
{
var music = '103520.wma';//音乐文件路径
document.getElementById(div_id).innerHTML = '<p> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="phx" width="245" height="66"> <param name="URL" value="'+music+'"><param name="autoStart" value="-1"></object> </p>';
}
</script>
<div id="music"><a onclick="music('music');" href="#">文字点击播放</a></div>
<br >
<br>图片播放
<div id="music2"><a onclick="music('music2');" href="#"><img src="http://www.baidu.com/img/baidu.gif"></a></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
JF~
你可以通过“ 点击播放”或“ 1.jpg”的OnClick()事件来重新编辑对应div的innerHTML来实现这个功能。例如：
<script>
function change()
{
document.getElementById("div1").innerHTML = "你想要使用的播放器";
}
</script>
<div id="div1"><a onclick="javascript:change()" href="#">点击播放</a></div>
希望对你有帮助。好运~
你可以通过“ 点击播放”或“ 1.jpg”的OnClick()事件来重新编辑对应div的innerHTML来实现这个功能。例如：
<script>
function change()
{
document.getElementById("div1").innerHTML = "你想要使用的播放器";
}
</script>
<div id="div1"><a onclick="javascript:change()" href="#">点击播放</a></div>
希望对你有帮助。好运~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#play{ width:200px; height:30px; text-align:center; line-height:30px; background-color:#CCCCCC; float:left;}
</style>
<script>
function playmp3(){
var player="<embed src=1.mp3 width=200 height=30 loop=-1>";
//“1.mp3”路径，自己改。loop=-1 循环播放。
document.getElementById("play").innerHTML=player;
}
</script>
</head>
<body>
<div id="play" onmouseover="this.style.cursor='pointer';" onclick="playmp3();">点击播放</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#play{ width:200px; height:30px; text-align:center; line-height:30px; background-color:#CCCCCC; float:left;}
</style>
<script>
function playmp3(){
var player="<embed src=1.mp3 width=200 height=30 loop=-1>";
//“1.mp3”路径，自己改。loop=-1 循环播放。
document.getElementById("play").innerHTML=player;
}
</script>
</head>
<body>
<div id="play" onmouseover="this.style.cursor='pointer';" onclick="playmp3();">点击播放</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
<title>无标题文档</title>
<style>
#play{
width:200px;
height:30px;
text-align:center;
line-height:30px;
background-color:#CCCCCC;
float:left;}
</style>
<script>
function
playmp3(){
var
player="<embed
src=1.mp3
width=200
height=30
loop=-1>";
//“1.mp3”路径，自己改。loop=-1
循环播放。
document.getElementById("play").innerHTML=player;
}
</script>
</head>
<body>
<div
id="play"
onmouseover="this.style.cursor='pointer';"
onclick="playmp3();">点击播放</div>
</body>
</html>
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
<title>无标题文档</title>
<style>
#play{
width:200px;
height:30px;
text-align:center;
line-height:30px;
background-color:#CCCCCC;
float:left;}
</style>
<script>
function
playmp3(){
var
player="<embed
src=1.mp3
width=200
height=30
loop=-1>";
//“1.mp3”路径，自己改。loop=-1
循环播放。
document.getElementById("play").innerHTML=player;
}
</script>
</head>
<body>
<div
id="play"
onmouseover="this.style.cursor='pointer';"
onclick="playmp3();">点击播放</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
