web播放器

最新推荐文章于 2024-05-27 09:36:02 发布

rooke

最新推荐文章于 2024-05-27 09:36:02 发布

阅读量161

点赞数

文章标签： HTML JavaScript jQuery 音乐 XHTML ViewUI

本文链接：https://blog.csdn.net/rooke/article/details/83969955

版权

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery/jquery-1.2.6.min.js"></script> //这里导入的一个jQuery
<script type="text/javascript">
//得到所有的歌曲
var songList = $("#SongList");
var player = $("#player");

//这个函数用于播放歌曲
function playMusic(url){
var Exobud = document.getElementById("player"); //得到播放器（object对象）
Exobud.URL = url; //改变播放器的URL地址
Exobud.controls.play(); //播放音乐
showTLab();　　　　　　　　　　　　　　　　　　
}

//初始第一首歌
$(function(){
var url = $("#SongList>option:first").attr("value");
//第一首歌的状态设置为选择
$("#SongList>option:first").attr( "selected","true" );
playMusic(url);
})

//双击换歌
$(function(){
$("#SongList").dblclick(function(){
var url = $("#SongList>option:selected").attr("value");
playMusic(url);
});
})

//下一首换歌
$(function(){
$("#nextAId").click(function(){
var url = $("#SongList>option:selected+option").attr("value");
$("#SongList>option:selected+option").attr("selected","true");
playMusic(url);
});
})

//上一首换歌
$(function(){
// alert($("#upAId").html());
$("#upAId").click(function(){
// alert($("#SongList>option:selected").prev("option").attr("value"));
var url = $("#SongList>option:selected").prev("option").attr("value");
//$("#SongList>option:selected").attr("selected","true");
$("#SongList>option:selected").prev("option").attr("selected","true");
playMusic(url);
});
})

//一直监控换歌的情况
function showTLab(){
var Exobud = document.getElementById("player");
if(Exobud.playState == 1)
{
var url = $("#SongList>option:selected+option").attr("value");
$("#SongList>option:selected+option").attr("selected","true");
playMusic(url);
}
setTimeout("showTLab()", 1000);
}

</script>
</head>

<body>
<div id="myDiv">
</div>
<br />

<select id="SongList" name="SongList" size="5" style="width:100%" >
<option value="music/01.生生世世爱.mp3">生生世世爱</option>
<option value="music/02.忘记时间.mp3">忘记时间</option>
<option value="music/03.此生不换.mp3">此生不换</option>
<option value="music/05.答应不爱你.mp3">答应不爱你</option>
<option value="music/06.偏爱.mp3">偏爱</option>
<option value="music/cc.wmv">东搞西搞</option>
</select>
<br />
<object id="player" height="266" width="360" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">

<param NAME="Balance" VALUE="0">

<param name="enabled" value="-1">

<param NAME="EnableContextMenu" VALUE="-1">

<param NAME="url" value="music/06.偏爱.mp3">

<param NAME="PlayCount" VALUE="1">

<param name="rate" value="1">

<param name="currentPosition" value="0">

<param name="currentMarker" value="0">

<param name="defaultFrame" value="">

<param name="invokeURLs" value="0">

<param name="baseURL" value="">

<param name="stretchToFit" value="0">

<param name="volume" value="50">

<param name="mute" value="0">

<param name="uiMode" value="Full">

<param name="windowlessVideo" value="0">

<param name="fullScreen" value="0">

<param name="enableErrorDialogs" value="-1">

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

</object>
<br />
<a href="#" id="upAId">on</a>
<a href="#" οnclick="javascript:Last_OneOK();">last</a>
<a href="#" id="nextAId"">next</a>

<br />
</body>
</html>
---------------------------------------------------------------------------------

<HTML>
<HEAD>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>BODY {
FONT: 12px 宋体
}
TD {
FONT: 12px 宋体
}
DIV {
FONT: 12px 宋体
}
LABEL {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;
BORDER-BOTTOM: 2px inset; HEIGHT: 23px
}
.link_text {
PADDING-LEFT: 2px; BACKGROUND: #fff
}
.link_arrow0 {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;
FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_arrow1 {
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;
BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;
BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;
BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_value {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);
VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid; POSITION: absolute
}
.link_record0 {
BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;
WIDTH: 100%; COLOR: #000; HEIGHT: 20px
}
.link_record1 {
BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;
WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//选单淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//选单淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度显示指标位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替换显示内容
document.all.text1.innerText=el.innerText
}
document.οnclick=dropdownHide
</script>
</HEAD>
<body text="#000000" οnlοad="document.all.form1.reset()">
<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
<form method="post" action="WebDropDownList.aspx" id="form1" οnsubmit="alert(city.value)">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzkwMjYyODZkZA==" />
</div>

<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" οnclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
</td>
<td align="right" width="22">
<div οnmοuseup="this.className='link_arrow0'" class="link_arrow0"
οnmοusedοwn="this.className='link_arrow1'" οnmοuseοut="this.className='link_arrow0'">6</div>
</td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 200px; HEIGHT: 100px">
<div id="mx">
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</div>
</td>
<td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</body>
</HTML>

---------------------------------------------------------------------------------

location.href 用法浅析

问题提出：

在做原型设计时候，对于静态页面的链接,这样写οnclick="location.href='http://localhost:8082/default.pr_automata.forward.do?nextPage=/OrderMan/page/newOrder1.jsp'">

估计是最常用的链接了！

这时候，就会出现一个问题：如果单纯的用

<a href="aa.html" target="">链接</a>

表示链接，你可以设置页面打开的地方，如：target="_self/_blank/_parent/_top"，代表在当前页面/新打开页面/父页面/最顶端窗口打开页面。但是如果用location.href 可怎么确定在哪打开啊！

解决方案：

self.location.href="/url" 当前页面打开新页面，与默认的location.href 或者是windows.location.href 或者是 this.location.href 效果一样

parent.location.href="/url" 在父页面打开新页面

top.location.href="/url" 在顶层页面打开新页面

怎么样，简单好用吧！

例子：

<FORM name="queryForm1" action="OPerCU.pr.prQueryCU.do" method="post" target="result">

。。。。。。。

</FORM>

<iframe name="result" frameborder="0" width="100%" height="420" scrolling="auto" marginheight="0" marginwidth="0"></iframe>

<script>

document.queryForm1.submit();

</script>