常用知識點
一、怎樣判斷打開的瀏覽器類型
<script type="text/javascript" >
<!--
function getOs()
{
var OsObject = "";
if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")!=-1){
return "Firefox";
}
if(isChrome=navigator.userAgent.indexOf("Chrome")!=-1){
return "Chrome";
}
if(isSafari=navigator.userAgent.indexOf("Safari")!=-1) {
return "Safari";
}
if(isOpera=navigator.userAgent.indexOf("Opera")!=-1){
return "Opera";
}
}
alert("type -> "+getOs());
-->
</script>
二、其他格式音樂在瀏覽器怎麽播放
不同瀏覽器對於html5 audio標簽和音頻格式的兼容性
音頻格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持
一般提供ogg和mp3格式，就可以支持所有主流瀏覽器了。
?
?
<!DOCTYPE HTML> <html> <head> <title>測試各種瀏覽器支持的音樂格式</title> </head> <body>
<br /> <br /> <br /> 播放《莊心妍-一萬個舍不得》： <br /> <br /> <br /> <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.m4a" type="audio/mpeg"> <source src="song.mp3" type="audio/mpeg"> 你的瀏覽器不支持html5的audio標簽 </audio>
<br /> <br /> <br /> 播放《曲婉婷-我的歌聲裏》 <br /> <br /> <br /> <audio controls="controls"> <source src="song2.ogg" type="audio/ogg"> <source src="song2.mp3" type="audio/mpeg"> 你的瀏覽器不支持html5的audio標簽 </audio>
<br /> <br /> <br /> </body> </html>
?
三、怎樣拖動視頻、音頻的拖動條
<!DOCTYPE html> <html> <head> <title>MP3播放器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://www.ce.cn/include/jqf.js"></script> <style type="text/css"> *{margin:0;padding: 0;} html,body{height: 100%;} body{background: url(http://www.ce.cn/test/wap/images/rzr.jpg) no-repeat;background-size:cover;} .clearfix:after{content:".";visibility:hidden;display:block;clear:both;height:0;} .clearfix{*zoom:1;} header{height: 50px; background:#000;opacity: 0.8;} footer{width:100%;height:90px; background:#000;opacity: 0.8; position: absolute;bottom: 0;left:0;padding-top:15px;} .time{width:96%;margin: 0 auto;} .current-time,.duration-time{color:#fff;float:left;width:15%;text-align:center;font-size:13px;} .circle{width:70%;height:3px;border-radius:3px;background:#74685D;position:relative;float:left;margin-top:6px;} .circle .loading{width:0px;height: 3px;border-radius:3px;background:#00aeff;position:absolute;left:0;top:0;z-index:1;} .circle #small{display:block;width:10px;height:10px;border-radius:50%;background:#c6c6c6;position:absolute;top:-4px;left:0;border:1px solid #000;z-index:9;} .button{width:150px;margin:15px auto;} .prev,.next,.play{width:39px;height:39px;float:left;margin-left:10px;border-radius:50%;} .prev{background: url(http://www.ce.cn/test/wap/images/prev.jpg) no-repeat;} .play{background: url(http://www.ce.cn/test/wap/images/pause.jpg) no-repeat;} .next{background: url(http://www.ce.cn/test/wap/images/next.jpg) no-repeat;} div.cur{background: url(http://www.ce.cn/test/wap/images/play.jpg) no-repeat;} .mp3-list{display:none;} </style> </head> <body> <header> </header>
<audio id="audio" src="http://www.ce.cn/test/wap/xiaoxiao.mp3" width="0" height="0"></audio>
<ul class="mp3-list"> <li><span>http://www.ce.cn/test/wap/images/rzr.jpg</span><span>http://www.ce.cn/test/wap/xiaoxiao.mp3</span></li> <li><span>http://www.ce.cn/test/wap/images/zxy.jpg</span><span>http://www.ce.cn/test/wap/htc.mp3</span></li> <li><span>http://www.ce.cn/test/wap/images/tara.jpg</span><span>http://www.ce.cn/test/wap/Maboo.mp3</span></li> <li><span>http://www.ce.cn/test/wap/images/dia.jpg</span><span>http://www.ce.cn/test/wap/WalkAway.mp3</span></li> </ul>
<footer> <div class="time clearfix"> <span class="current-time">00:00</span> <div class="circle"> <span class="loading"></span> <span id="small" data="pause"></span> </div> <span class="duration-time">00:00</span> </div> <div class="button"> <div class="prev"></div> <div class="play" data-type="play"></div> <div class="next"></div> </div> </footer> <script type="text/javascript"> $(function(){ var durationTime,currentTime,left; var width = $(".circle").width(); var len = $(".mp3-list li").length; var num = 0; $(".play").click(function(){ var type = $(".play").attr("data-type"); if(type=="play"){ document.getElementById("audio").play(); $(".play").attr("data-type","pause"); }else{ document.getElementById("audio").pause(); $(".play").attr("data-type","play"); } $(this).toggleClass("cur") getTotalTime(); }) setInterval(function(){getCurrentTime()},500);
// 獲取歌曲總時間 function getTotalTime(){ timer = setInterval(function(){ durationTime = document.getElementById("audio").duration; if(!isNaN(durationTime)){ $(".duration-time").html(setTime(durationTime)); clearInterval(timer); } },500); }
// 獲取歌曲當前的播放時間 function getCurrentTime(){ currentTime = document.getElementById("audio").currentTime; $(".current-time").html(setTime(currentTime)); left = currentTime/durationTime*width; $(".circle #small").css("left",left); $(".circle .loading").css("width",left+"px"); if(currentTime==durationTime){ num++; if(num>len-1){ num = len-1; return false; } $("#audio").attr("src",$(".mp3-list li").eq(num).find("span").eq(1).html()); $("body").css("background-image","url("+$(".mp3-list li").eq(num).find("span").eq(0).html()+")") document.getElementById("audio").play(); $(".play").attr("data-type","pause"); getTotalTime(); } }
// 時間格式化 function setTime(x){ var m = Math.floor(x/60); var s = x.toFixed(0)-m*60; m = m<10?"0"+m:m; s = s<10?"0"+s:s; return m+":"+s; }
$(".prev").click(function(){ num--; if(num<0){ num = 0; return false; } $("#audio").attr("src",$(".mp3-list li").eq(num).find("span").eq(1).html()); $("body").css("background-image","url("+$(".mp3-list li").eq(num).find("span").eq(0).html()+")") document.getElementById("audio").play(); $(".play").attr("data-type","pause"); $(".play").addClass("cur"); getTotalTime(); })
$(".next").click(function(){ num++; if(num>len-1){ num = len-1; return false; } $("#audio").attr("src",$(".mp3-list li").eq(num).find("span").eq(1).html()); $("body").css("background-image","url("+$(".mp3-list li").eq(num).find("span").eq(0).html()+")") document.getElementById("audio").play(); $(".play").attr("data-type","pause"); $(".play").addClass("cur"); getTotalTime(); })
瀏覽器，兼容，閉包等
// 拖拽事件 var touch = document.getElementById("small"); touch.addEventListener("touchstart",handleStart,false); touch.addEventListener("touchmove",handleMove,false); touch.addEventListener("touchend",handleEnd,false); var x1,y1,oldTime,newTime,olfLeft,newLeft; function handleStart(e){ e.preventDefault(); var touches = e.changedTouches; x1 = touches[0].pageX; y1 = touches[0].pageY; olfLeft = $("#small").position().left; document.getElementById("audio").pause(); } function handleMove(e){ e.preventDefault(); var x2 = e.changedTouches[0].pageX; var y2 = e.changedTouches[0].pageY; newLeft = x2-x1; nowLeft = olfLeft+newLeft; if(nowLeft<0){ nowLeft = 0; } if(nowLeft>width){ nowLeft = width; } $(".circle .loading").css("width",nowLeft+"px"); $("#small").css("left",nowLeft+"px"); var per = nowLeft/width; var nowAudioTime = durationTime*per; document.getElementById("audio").currentTime = nowAudioTime; } function handleEnd(e){ touch.removeEventListener("touchmove",handleEnd,false); document.getElementById("audio").play(); }
}) </script> </body> </html>
四、網頁怎樣在分辨率不同的電腦上全屏顯示
1、 自然拉伸 如果你的網站結構沒有用到大量的圖形來銜接，主要由表格來定結構，那麽你就可以使用該方法。非常適用於主要由表格、文字來表達信息的簡單的網頁頁面。制作表格時，只要你把表格的寬度屬搜索性定義為100% ，表格就會根據分辨率的不同自行調整寬度。
2、 固定居中 在800×600分辨率下制作的網頁在1024×768分辨率的機器上打開，整個網頁就會跑到左邊；1024×768分辨率的網頁在800×600分辨率的機器上有時也會變得"不堪入目"。兩種分辨率各做一個吧？做起來費勁。所以目前普遍采用的方法是固定居中法！ 現在大多數網民都還在用800*600的分辨率，所以我們一般可以以此分辨率為主。只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要註意一下，第一個要註意的是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麽使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要註意的是不能用DW中的層來定位。
3、 兵分兩路 如果你的網頁不經常更新，而且對頁面效果極其在意，那好，你就設計兩個頁面，分別對應800×600和1024×768兩種分辨率。然後根據不同的分辨率進行跳轉就行了。
五、什麽是閉包
閉包就是能夠讀取其他函數內部變量的函數。
六、百分比、響應式、自適應、rem、 em
1、自適應和響應式
先說共同點，兩者都是因為越來越多的 移動設備（ mobile, tablet device ）加入到互聯網中來而出現的為移動設備提供更好的體驗的技術。用技術來使網頁適應從小到大（現在到超大）的不同分辨率的屏幕.都是為了解決同一張頁面在不同設備分辨率上合理展示的技術。
不同點：
響應式布局：不管用戶使用的是什麽設備都是在服務器把數據推送到瀏覽器後，腳本或CSS自行偵測屏幕大小後執行對應的樣式表內容，並且一直通過本地腳本在監聽屏幕大小的變化，隨時做出樣式響應的變化，所以是主動的。同一頁面在不同大小設備可能呈現不一樣的頁面效果
自適應：不同大小設備呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小設備看起來一樣
如圖：
2、rem,em區別
rem,em都是順應不同網頁字體大小展現而產生的
其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便
而rem是始終相對於html大小，即頁面根元素
可看下面例子
<html> <head> <tit></tit> <style type="text/css"> html{ font-size: 10px; } .content{ font-size: 1.5rem; //font-size: 1.5em;
}
.content p{ font-size: 1rem; //如果使用rem,p文字font-size:1*10px=10px
//font-size: 1em; //如果使用em,p文字font-size: 1*1.5*10px=15px,因為其父元素是.content,所以要以父元素1.5em(1.5*10px)為準
} </style> </head> <body>
<div class="content">
<p>測試文字</p>
</div>
</body>
</html>
常用知識點