需求：
1，页面上显示指定栏目下的子栏目列表
2，每个子栏目下再显示几条最新文章列表
要解决这个问题，首先要想好API接口怎么写，最简单当然是一个接口搞定：在接口中把1，2的数据都循环出来。
还有一个周折的办法，就是写两个接口，一个接口读取子栏目列表，一个接口读取栏目下的最新文章列表。
下面是用两个接口制作百度小程序列表的方案：
分类 Web前端 下的文章
网站制作favicon.ico最完美的方式
做网站的人如果细心一点，一定会制作favicon.ico，让浏览器标签顶部显示自己网站的小LOGO，是一件很有成就感的事。但是目前市面上浏览器种类比较多，不同的浏览器对待favicon.ico的显示是有所不同的。
我们假设一个页面：http://localhost:8800/news.html
1，Firefox浏览器请求的是：news.html页面meta标签link的href所对应的图标，根据你的设置来。
2，搜狗浏览器请求的是http://localhost:8800/favicon.ico，保留端口的同时，请求根目录下的favicon.ico文件。
3，360浏览器、谷歌浏览器请求的是http://localhost/favicon.ico，也就是不管你访问的页面是http://localhost/news.html，还是http://localhost:8800/news.html，还是http://localhost/pindao/news.html，他们请求的都是http://localhost/favicon.ico，不管端口，也不管你页面meta标签link的设置。
js从数字数组里随机获取N个不重复的数字
<script>
var arr = [713,1032,1051,710,711,943,985,1003,1011,1029,1031,1033,1034,1052,1056,4192,6965,6993,6994,6995,6997,6998,6999,7000,7362,7364,7365,7367,7368,7371,7372,7373,7374,7375,7376,7377,7378,7379,7380,7381,7382,7383,7384,7386,7388];
var out = [];
var num = 12;
while(out.length < num){
var temp = (Math.random()*arr.length) >> 0;
out.push(arr.splice(temp,1));
}
document.write(out);
</script>
arr是指定的数字数组，num是指定的12位，注意指定的获取位数不要低于数组中的个数，不然要出问题。
M3U8视频在PC端和手机端播放代码
最近在调研YY直播WAP页面视频直播的地址，发现居然是M3U8格式的。在网络上找了很久的播放器代码，最终找到一个兼容PC电脑、苹果手机和安卓手机的播放器代码。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>M3U8移动端+PC端播放</title>
<link href="image/video.css" rel="stylesheet">
<script src="image/video.js"></script>
<script src="image/videojs-live.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" autoplay="autoplay" width="1000"
height="500" data-setup='{}'>
<source src="http://175.20.85.23:447/83428215_83428215_50020_0_0_50020.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>
完整文件下载：
jQuery实现右侧指定区块固定漂浮效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试</title>
<script type="text/javascript" src="http://www.cqxinhao.com/image/jquery-1.4a2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
t = $('.piaofu').offset().top;
mh = $('.left').height();
fh = $('.piaofu').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 10){
$('.piaofu').css('position','fixed');
if(s + fh > mh){
$('.piaofu').css('top',mh-s-fh+'px');
}
}else{
$('.piaofu').css('position','');
}
})
});
</script>
<style type="text/css">
*{ padding:0px; margin:0px;}
.box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden;}
.left{ width:770px;height:2000px; background:#000;float:left;}
.right{ width:220px; background:#FC6; float:right;}
.sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
.piaofu{ width:220px; height:300px; background:#F66; font:normal 13px/30px 5FAE8F6F96C59ED1; text-align:center; top:10px;}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="sub01"></div>
<div class="sub01"></div>
<div class="sub01"></div>
<div class="piaofu">我要固定漂浮</div>
</div>
</div>
</body>
</html>