只顾接纳preventDefault幸免浏览器的默许事件操作产生

复制代码 代码如下:

夜间要考软件工程,实在不想复习。写个播放器吧,这些只是个用来上学的小德姆o,众多不圆满之处,下边贴出源代码,假使要转发,请加上版权注明

复制代码 代码如下:

function setContent(str) {
str = str.replace(/<\/?[^>]*>/g,”); //去除HTML tag
str.value = str.replace(/[ | ]*\n/g,’\n’); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,’\n’); //去除多余空行
return str;
}

PS:因为Ajax涉及到跨域获取天气音讯,有多个版本,三个是一贯跨域,IE10接济,其余的浏览器要改配置。另五个是服务器端的weather.php,获取天气信息重回json。
weather.php就不写了,里面包车型客车呼应路径寄放对应的公文

<script language=”javascript” type=”text/javascript”>
var isDrag = false;
function isIE(){
if(navigator.userAgent.indexOf(“MSIE”)>0){return true;}
else{return false;}
}
function addListener(element,e,fn){
if(isIE()){element.attachEvent(“on” + e,fn);}
else{element.addEventListener(e,fn,false);}
}
function drag(e){
var e = e || window.event;
var element = e.srcElement || e.target;
if(e.preventDefault)e.preventDefault();
else e.returnvalue=false;
isDrag = true;
var relLeft = e.clientX – parseInt(element.style.left);
var relTop = e.clientY – parseInt(element.style.top);
element.onmouseup = function(){ isDrag = false; }
document.onmousemove = function(e_move){
var e_move = e_move || window.event;
if(isDrag){
element.style.left=e_move.clientX – relLeft + “px”;
element.style.top=e_move.clientY – relTop + “px”;
return false;
}
}
}
window.onload = function()
{
var element = document.getElementById(“elimg”);
var element2 = document.getElementById(“eldiv”);
addListener(element,”mousedown”,drag);
addListener(element2,”mousedown”,drag);
}
</script>
<div id=”eldiv”
style=”width:140px;height:100px;background:#EEE;position:absolute;left:117px;top:124px”></div>
<img id=”elimg” style=”left:609px;top:113px;position:absolute”
src=”” />

测量试验的时候发现这段代码无法过滤掉网页中空格字符(即: )。于是本身又更改了瞬间:

示范地址:

复制代码 代码如下: script language=”javascript” type=”text/javascript”
var isDrag = false; function isIE…

复制代码 代码如下:

贯彻效益: 音乐广播,进度调度(滑动模块),音量条件,音乐随机采取,背景图片,图片预加载,音乐预加载,天气Ajax获取
音乐列表使用的json管理(也能够精通是hash表)

function removeHTMLTag(str) {
            str = str.replace(/<\/?[^>]*>/g,”); //去除HTML
tag
            str = str.replace(/[ | ]*\n/g,’\n’); //去除行尾空白
            //str = str.replace(/\n[\s| | ]*\r/g,’\n’);
//去除多余空行
            str=str.replace(/ /ig,”);//去掉 
            return str;
    }

复制代码 代码如下:

恩,小编的渴求到达了。

<!DOCTYPE html >
<html>
<head>
<title>音乐天气</title>
<meta charset=’utf-8′ />
</head>
<style type=’text/css’>
body{margin:0; padding:0; }
.clear{clear:both;}
#weather-body{margin:0; padding:0; }
#weather{ position:absolute;left:20px; top:30px;font-family:”Microsoft
YaHei”,”SimHei”;}
#weather p{ }
p#weather-city{ width:100px; color:#FFF; margin:20px; font-size:28px;
}
p#weather-temperature{ width:200px; color:#FFF; margin:20px;
margin-left:50px; font-size:32px;}
p#weather-stat{ width:200px; color:#FFF; margin:20px; font-size:26px;
}
#music-box{ position:absolute;right:20px;
padding:30px;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:
0.7;opacity: 0.7;bottom:30px; text-align:center;}
#music-box div{ }
#music-box:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:
1;opacity: 1;}
h2#song-title{ font-family:”Microsoft YaHei”,”SimHei”; color:#fff;}
h3#song-author{font-family:”Microsoft YaHei”,”SimHei”; color:#fff;}
div#music-process{ width:400px;}
div#music-process-p{float:left; margin:0px 20px 0 20px;
display:block;width:290px;background:url(./images/button.gif) 0 -133px
repeat-x ; height:40px; }
span#music-process-slide{ cursor:pointer;display:block;float:left;
width:30px;background:url(./images/button.png) -30px -230px no-repeat ;
height:30px;}
div#music-ctime{display:block; float:left; color:#FFF;
font-weight:bold; width:40px;height:30px;font-family:”Arial”;}
div#music-etime{display:block; float:left;
color:#FFF;font-weight:bold;width:40px;height:30px;font-family:”Arial”;}
div#music-play{ cursor:pointer; display:none;margin:10px
auto;width:100px; border:0px #FFF solid;
background:url(./images/button.png) 0 -12px no-repeat ; height:70px;}
div#music-next{cursor:pointer;display:none; margin:10px auto;
width:100px; margin-top:15px; border:0px #FFF solid;
background:url(./images/button.png) 0 -85px no-repeat ; height:40px;}
div#music-volume{float:right; margin:10px;width:50px;}
div#music-volume-v{float:left;
display:block;width:50px;background:url(./images/button.png) 3px -250px
no-repeat ; height:100px; }
span#music-volume-slide{cursor:pointer;display:block;float:left;
width:40px;background:url(./images/button.png) 0px -353px no-repeat ;
height:30px;}
</style>
<script type=”text/javascript” >
/*
版权申明
作者:EI Nino
Email:[email protected]
*/
var music =”;
var musicBox =”;
var musicPlay=”;
var musicNext=”;
var musicV=”;
var musicProcess=”;
var musicSlide=”;
var musicSlideLeft=0;
var musicCtime=”;
var musicEtime=”;
var musicVolume=”;
var musicVolumeSlide=”;
var mouseX=”;
var mouseY=”;
var mouseDown=false;
var bdy=”;
var backgroundImages=new Array();
var backgroundNumber=1;
var songNumver=1;
var playList=new Array();
var nextSong=”;
var songs=new Array();
//**************************************//
//INIT WEB
//*************************************//
function init(){
//**************************************//
//Musci Box
//*************************************//
musicBox = document.getElementById(“music-box”);
musicPlay= document.getElementById(‘music-play’);
musicNext= document.getElementById(‘music-next’);
musicCtime=document.getElementById(‘music-ctime’);
musicEtime=document.getElementById(‘music-etime’);
musicSlide=document.getElementById(‘music-process-slide’);
musicProcess=document.getElementById(‘music-process-p’);
musicVolume=document.getElementById(‘music-volume-v’);
musicVolumeSlide=document.getElementById(‘music-volume-slide’);
musicSlide.style.marginLeft=”0px”;
musicProcess.style.width=”270px”;
bdy=document.getElementsByTagName(‘body’);
bdy=bdy[0];
var screenH = window.screen.height;
var screenW = document.body.clientWidth;
//Background cache //
backgroundNumber =Math.ceil(Math.random()*10);
backgroundImages[0] =new Image();
backgroundImages[1]= new Image();
backgroundImages[0].src= “./rain/”+backgroundNumber+”.jpg”;
backgroundImages[1].src= “./rain/”+(backgroundNumber >= 10 ?
1:backgroundNumber+1)+”.jpg”;
bdy.style.background=”url(“+backgroundImages[0].src+”) top”;
//*****************//
music = document.getElementsByTagName(‘audio’);
music = music[0];
music.autobuffer=true;
setInterval(mProcess,1000);
musicProcess.addEventListener(‘mousedown’,mSlideProcessDown);
musicProcess.addEventListener(‘mousemove’,mSlideProcessMove);
musicProcess.addEventListener(‘mouseup’,mSlideProcessUp);
musicVolume.addEventListener(‘mousedown’,mSlideVolumeDown);
musicVolume.addEventListener(‘mousemove’,mSlideVolumeMove);
musicVolume.addEventListener(‘mouseup’,mSlideVolumeUp);
//*******************Music Box
end******************//
//********************************************************//
//Weather Box
//*******************************************************//
var wget = new XMLHttpRequest();
var url=””;
url=’./weather.php’;
url=””;
var weatherInfo=new Array();
wget.open(‘GET’,url);
wget.onreadystatechange=function(){
if(wget.readyState==’4′ &&wget.status==200)
{
weatherInfo= wget.responseText;
weatherInfo=eval(“[“+weatherInfo+”]”);
weatherInfo=weatherInfo[0][‘weatherinfo’];
document.getElementById(‘weather-city’).innerHTML=weatherInfo[‘city’];
document.getElementById(‘weather-temperature’).innerHTML=weatherInfo[‘temp1’];
document.getElementById(‘weather-stat’).innerHTML=weatherInfo[‘weather1’];
}
}
wget.send(“User-Agent:Mozilla/4.04[en](Win95;I;Nav)”);
//*******************Weather Box
end*************************************//
}
function mProcess(){
if(1)
{
var ctime = music.currentTime;
var time =
Math.floor(ctime/60)+”:”+(Math.floor(ctime-60*Math.floor(ctime/60))<10
? “0”+Math.floor(ctime-60*Math.floor(ctime/60)) :
Math.floor(ctime-60*Math.floor(ctime/60)));
var time2 =music.duration-music.currentTime;
var etime=Math.floor(time2
/60)+”:”+(Math.floor(time2-60*Math.floor(time2/60))<10 ?
“0”+Math.floor(time2-60*Math.floor(time2/60)) :
Math.floor(time2-60*Math.floor(time2/60)));
var ra = music.currentTime/music.duration;

当今来稍稍解释一下所用到的七个正则表达吧(供给注解的是,因为本人也是刚刚接触,大概作者的分解并不是没错的,仅供参谋):

var mpw=musicProcess.style.width;
mpw = mpw.substring(0,mpw.indexOf(‘px’));
musicSlide.style.marginLeft = mpw *ra+”px”;

第一个:/<\/?[^>]*>/g

musicCtime.innerHTML=time;
musicEtime.innerHTML=etime;
if(music.ended==true)
{
mRandPlay();
}
}
}
//**************************************************************//
//Process
//**************************************************************//
function mSlideProcessDown(e){
mouseDown=true;
mouseX = e.pageX;
}
function mSlideProcessMove(e){
if(mouseDown==true)
{
var mLeft= (e.pageX-mouseX);
var t2 =
music.currentTime+music.duration*mLeft/musicProcess.style.width.substring(0,musicProcess.style.width.indexOf(‘px’));
t2=t2>0 ? t2:0;
mLeft=musicProcess.style.width.substring(0,musicProcess.style.width.indexOf(‘px’))*t2/music.duration;
musicSlide.style.marginLeft= (mLeft>0&&mLeft<300 ?
mLeft:0)+”px”;

发表评论

电子邮件地址不会被公开。 必填项已用*标注