常用知识点

一、怎样判断打开的浏览器类型

<!--

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>

三、怎样拖动视频、音频的拖动条

<!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>

<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>

</body>

</html>

posted @ 2017-08-04 08:07 张学亮阅读(168) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

张学亮

常用知识点

公告