分类 Web前端 下的文章

js插件Autosize实现textarea标签高度自适应,且取消右边滚动条

Autosize插件官方:https://github.com/jackmoore/autosize
案例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Simple Autosize for textareas</title>
<style>
    textarea {
        padding: 10px;
        vertical-align: top;
        width: 200px;
        resize:none;
        outline:none;
    }
    textarea:focus {
        outline-style: solid;
        outline-width: 2px;
    }
</style>
</head>
<body>
    <h3>max-height 300px</h3>
    <textarea style='max-height: 300px'>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>

    <h3>no max-height</h3>
    <textarea>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>
</body>
<script src='/autosize.min.js'></script>
<script>
    autosize(document.querySelectorAll('textarea'));
</script>
</html>

Autosize下载:autosize.zip 最好去下载官方最新的版本。

注意,以上案例代码中,还用css3样式去掉textarea标签的右下角拖动元素修改尺寸大小属性(resize:none)和轮廓线(outline:none)。

百度小程序:显示栏目列表,再读取每个栏目的最新几条文章

需求:
1,页面上显示指定栏目下的子栏目列表
2,每个子栏目下再显示几条最新文章列表

要解决这个问题,首先要想好API接口怎么写,最简单当然是一个接口搞定:在接口中把1,2的数据都循环出来。
还有一个周折的办法,就是写两个接口,一个接口读取子栏目列表,一个接口读取栏目下的最新文章列表。

下面是用两个接口制作百度小程序列表的方案:




阅读剩余部分

网站制作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>

完整文件下载:m3u8.zip