分类 Web前端 下的文章

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>

完整文件下载:m3u8.zip

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 \5FAE\8F6F\96C5\9ED1; 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>

如何让微信分享链接带图片?

有时候看到好的网页内容会通过微信分享,我们会发现有的时候在微信里分享某个链接后会显示缩略图,有些不会显示缩略图,如下图:
如何让微信分享链接带图片?
**微信获取该缩略图的原理是:会取当前页面body内最前面的一张符合条件的图片。
符合条件:尺寸必须大于: 300px × 300px**
因此可以刻意在网页html代码的<body>下面第一行写上:

<span style="display:none"><img src="指定图标地址" width="400px" height="400px" /></span>

这样既指定了显示什么图标,又隐藏了,不影响原来网页的内容。

国内一些js、css的CDN公共库资源

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速;如果您网站的流量比较大,公共库资源还能为你节约一些服务器带宽资源。

一,百度CDN公共库,包含全球所有最流行的开源JavaScript库。

http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
http://cdn.code.baidu.com/

二,新浪云计算CDN公共库,SAE的CDN节点覆盖全国各大城市的多路(电信、联通、移动、教育)骨干网络。

http://lib.sinaapp.com/


阅读剩余部分