Posted on | In

瀑布流布局页面滚动自动加载实例

测试地址

瀑布流测试地址

1
2
3
4
5
6
7
8
var divbox = $(".fboxone");
        var divs = $(document).find(".fbox");
        for (var i = 0; i < divs.length; i++) {
            if (divbox.height() > $(divs[i]).height()) {
                divbox = $(divs[i]);//取高度最低的一个添加
            }
     }
divbox.find(".container").append(`${db[x].name}`);

原理:

每次添加内容是先计算当前列表的高度,取高度最低的一个添加

Posted on | In

js 正则匹配（去掉html标签）

1
- 得到网页上的链接地址：

string matchString = @”<a[^>]+href=\s(?:’(?[^’]+)’|””(?[^””]+)””|(?[^>\s]+))\s[^>]*>”;

1
- 得到网页的标题：

string matchString = @”(?<title>.*)“;

1
- 去掉网页中的所有的html标记：

string temp = Regex.Replace(html, “<[^>]>”, “”); //html是一个要去除html标记的文档
string matchString = @”([\S\s\t]?)“;

1
- js去掉所有html标记的函数：

function delHtmlTag(str)
{
return str.replace(/<[^>]+>/g,””);//去掉所有的html标记
}

1
-  js去掉所有html中所有 style="xxx"标记的函数：

var regEx = /style=\"(.*?)\"/g;
var zz=db.youlanzhinan.replace(regEx,"")
console.log(zz,"zz");// 正则表达式

`

Posted on | In
  • inux环境下，我们可以通过 iconv 这个C++模块来处理Node.JS不支持的字符编码，如GBK，BIG5。
    iconv需要依赖native库，这样一来，在一些不支持native模块安装的虚拟主机和windows平台上，我们还是无法安心处理GBK编码。 老外写了一个通过纯Javascript转换编码的模块 iconv-lite
    可以实现window下的转换 ，通过npm可以安装此模块，bufferhelper是一个操作buffer的加强类，关于buffer的详细解析，请参考地址:http://www.infoq.com/cn/articles/nodejs-about-buffer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var http = require('http'), 
var url = require('url').parse('http://www.baidu.com/');
var iconv = require('iconv-lite'); 
var BufferHelper = require('bufferhelper');
 
http.get(url,function(res){
  var bufferHelper = new BufferHelper();
  res.on('data', function (chunk) {
    bufferHelper.concat(chunk);
  });
  res.on('end',function(){ 
    console.log(iconv.decode(bufferHelper.toBuffer(),'GBK'));
  });
})

Posted on | In
  • 受支持的桌面环境中运行Chromium时，将使用系统代理设置。但您的系统不受支持，或启动系统配置时出现问题。

  • 但您仍可通过命令行进行配置。如需详细了解各项实验功能和环境变量，请参见 man chromium-browser。

  • 安装好google-chrome（或者chromium也行）后，我们发现浏览器的设置中，代理配置功能失效，显示为：

  • 在受支持的桌面环境中运行google-chrome时，将使用系统代理设置。但您的系统不受支持，或启动系统配置时出现问题。

  • 但您仍可通过命令行进行配置。如需详细了解各项实验功能和环境变量，请参见 man google-chrome。

    关闭该google-chrome，并重新从命令行启动，加入一个参数：

    1
    2
    jackX@thinkpad:~$ google-chrome --proxy-server="socks5://localhost:8787" 
    chromium-browser --proxy-server="socks5://localhost:8787"

  • 值得注意的是，由于我平常windows环境下使用的代理工具为：chrome+SwitchyOmega插件+MyEntunnel，配置是SSH+socks5，所以一开始没有在–proxy-server参数中指定socks5，导致启动后代理失效。(可通过google-chrome –help了解详细参数)

  • chrome成功启动后，打开百度输入“ip”，可显示我的代理服务器IP，说明代理成功启用。

Posted on | In

在shell脚本里常常需要获取系统时间来处理某项操作，今天系统的学习了一下如何获取系统时间。记录如下：
linux的系统时间在shell里是可以直接调用系统变量的如：
获取今天时期：date +%Y%m%d 或 date +%F 或 $(date +%y%m%d)
命令输出结果如下：

隐藏Activity的头部默认导航

1
2
3
4
5
6
[root@centi-C sh]# date +%Y%m%d 
20120727 
[root@centi-C sh]# date +%F 
2012-07-27 
[root@centi-C sh]# date +%y%m%d 
120727

获取昨天时期：date -d yesterday +%Y%m%d 也可以写成date -d -1day +%Y%m%d

1
2
3
4
5
6
7
8
[root@centi-C sh]# date -d yesterday +%Y%m%d 
20120726 
[root@centi-C sh]# date -d yesterday +%F 
2012-07-26 
[root@centi-C sh]# date -d -1day +%y%m%d 
120726 
[root@centi-C sh]# date -d -1day +%Y%m%d 
20120726

  • 获取前天日期：date -d -2day +%Y%m%d
  • 依次类推比如获取10天前的日期：date -d -10day +%Y%m%d
  • 或n天前的 date -d "n days ago" +%y%m%d
  • 明天：date -d tomorrow +%y%m%d

  • 注意以上中间有空格

  • 至于你需要什么样的日期时间格式，就需要应用相关的时间域参数来实现咯

  • 相关时间域如下：
  • % H 小时（00..23）
  • % I 小时（01..12）
  • % k 小时（0..23）
  • % l 小时（1..12）
  • % M 分（00..59）
  • % p 显示出AM或PM
  • % r 时间（hh：mm：ss AM或PM），12小时
  • % s 从1970年1月1日00：00：00到目前经历的秒数
  • % S 秒（00..59）
  • % T 时间（24小时制）（hh:mm:ss）
  • % X 显示时间的格式（％H:％M:％S）
  • % Z 时区 日期域
  • % a 星期几的简称（ Sun..Sat）
  • % A 星期几的全称（ Sunday..Saturday）
  • % b 月的简称（Jan..Dec）
  • % B 月的全称（January..December）
  • % c 日期和时间（ Mon Nov 8 14：12：46 CST 1999）
  • % d 一个月的第几天（01..31）
  • % D 日期（mm／dd／yy）
  • % h 和%b选项相同
  • % j 一年的第几天（001..366）
  • % m 月（01..12）
  • % w 一个星期的第几天（0代表星期天）
  • % W 一年的第几个星期（00..53，星期一为第一天）
  • % x 显示日期的格式（mm/dd/yy）
  • % y 年的最后两个数字（ 1999则是99）
  • % Y 年（例如：1970，1996等）
  • 注意：只有超级用户才有权限使用date命令设置时间，一般用户只能使用date命令显示时间。

添加一个练习脚本，功能：

  • 在每月第一天备份并压缩/etc目录的所有内容，存放在/root/bak目录里，且文件名为如下形式yymmdd_etc，yy为年，mm为月，dd为日。Shell程序fileback存放在/usr/bin目录下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #/bin/bash 
    #filebak 
    #file executable: chmod 755 filebak 
    PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin 
    export PATH 
    bakdir="/root/bak/" 
    filename="`date +%y%m%d`_etc.tar.gz" 
    if [ ! -x "$bakdir" ];then 
    mkdir $bakdir 
    fi 
    cd $bakdir 
    tar cvfz $filename /etc

  • 或使用crontab -e 命令添加定时任务：

  • 0 1 * /bin/sh /usr/bin/fileback

Posted on | In

需求

  • 由于ueditor官方没有nodejs后台的版本，所以只有通过别的大神开发的版本使用了。故写个教程，留作以后备用。

下载ueditor

  • 地址：http://ueditor.baidu.com/website/download.html
  • 由于没有nodejs版本的，所以下载php版本的，通过php版本的进行修改。
  • 博主当前下载的版本是：1.4.3.3

    引入ueditor

  • 先在express的public文件夹内创建一个ueditor目录，用于存放所有的解压出来的代码，由于本人懒，没有删除里面没有的文件，请大家自行删除。然后在模板页面中引入三个文件，分别是：

    1
    2
    3
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

  • 然后在需要显示编辑器的地方放入：

    1
    <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>

  • 最后在js里面实例化：

    1
    var ue = UE.getEditor('editor');

  • 打开页面，查看效果。

  • 但是你打开控制台，会发现，给你提示
    出现的错误

    配置nodejs ueditor相关

  • 上面的报错是因为我们没有配置ueditor的nodejs相关，接着我们就处理nodejs的问题。
    我们在基友网站上面找到了一个叫netpi大神的解决方案，github地址：https://github.com/netpi/ueditor
    制作了nodejs端的服务配置。具体操作：
    首先安装模块

    1
    npm install ueditor --save

  • 安装成功以后，按照大神的案例配置，在express里面的app.js里面配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    var bodyParser = require('body-parser')
    var ueditor = require("ueditor")
    app.use(bodyParser.urlencoded({
      extended: true
    }))
    app.use(bodyParser.json());

    // /ueditor 入口地址配置 https://github.com/netpi/ueditor/blob/master/example/public/ueditor/ueditor.config.js
    // 官方例子是这样的 serverUrl: URL + "php/controller.php"
    // 我们要把它改成 serverUrl: URL + 'ue'
    app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {

      // ueditor 客户发起上传图片请求

      if(req.query.action === 'uploadimage'){

        // 这里你可以获得上传图片的信息
        var foo = req.ueditor;
        console.log(foo.filename); // exp.png
        console.log(foo.encoding); // 7bit
        console.log(foo.mimetype); // image/png

        // 下面填写你要把图片保存到的路径 （ 以 path.join(__dirname, 'public') 作为根路径）
        var img_url = 'yourpath';
        res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
      }
      //  客户端发起图片列表请求
      else if (req.query.action === 'listimage'){
        var dir_url = 'your img_dir'; // 要展示给客户端的文件夹路径
        res.ue_list(dir_url) // 客户端会列出 dir_url 目录下的所有图片
      }
      // 客户端发起其它请求
      else {

        res.setHeader('Content-Type', 'application/json');
        // 这里填写 ueditor.config.json 这个文件的路径
        res.redirect('/ueditor/ueditor.config.json')
    }}));

  • 将上面的图片存储的文件夹路径自行修改，根目录是public文件夹。

    修改ueditor的配置

  • 最后找到public/ueditor/ueditor.config.js文件，将里面的URL + “php/controller.php”修改成为URL + ‘ue’
  • ueditor.config.json这个文件的配置，在php文件里面，从里面拿出来修改下名字将文件放在public/ueditor/即可

Posted on | In

https签名

生成https

1
2
certbot certonly --webroot -w /var/www/example/ -d  //单个生成 
certbot certonly --webroot -w /var/www/example/ -d www.example.com -d example.com -w /var/www/other -d other.example.net -d another.other.example.net //一次生成多个

https 续期

1
certbot renew  //更新全部证书

删除http证书

1
certbot delete --cert-name example.com  //删除一个https证书

Posted on | In

layui select change事件如何响应?

1
<select lay-filter="test"></select>
1
2
3
4
var form = layui.form();
form.on('select(test)', function(data){
  console.log(data);
});

layui 表单元素的选中问题

  • layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手
    这里要提两个我用过的,一个是单选框,一个是下拉列表
  • 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美化,所以我们需要做的事找到目标单选框的临近i标签,然后触发它的click事件
  • 下拉框,layui把下拉框美化成了一个dl,每一个option标签都变成了一个dd标签表示,其中value更改为lay-value属性,我们要做的就是找到下拉框对应的dl标签,将符合要求值lay-value的dd的click事件触发
    1
    2
    3
    var update=$("#update-form")
    update.find("input[type=radio][value=female]").next().find("i").click();//将value是female的单选框选中
    update.find("dd[lay-value=value-i-need]").click();//将下拉列表value为value-i-need的项选中

Posted on | In

scrollReveal.js – 页面滚动显示动画JS

  • 和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。

基本方法

1
基本方法

HTML

1
<div data-scroll-reveal>dowebok.com</div>
  • 必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：
    1
    2
    3
    <div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
    <div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
    <div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>

JavaScript

1
2
3
window.scrollReveal = new scrollReveal();
//或者，elem 为动画元素的任何级别的父元素
window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});

data-scroll-reveal属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
上面说了可以自定义 data-scroll-reveal 属性，下面来看看该属性的关键词和值（可选）。

enter
说明: 动画起始方向
值: top | right | bottom | left
move
说明: 动画执行距离
值: 数字，以 px 为单位
over
说明: 动画持续时间
值: 数字，以秒为单位
after/wait
说明: 动画延迟时间
值: 数字，以秒为单位
填充（可选）
可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：
	from
	the
	and
	then
	but
	with
  • 也就是可以像这样写 HTML：
    1
    2
    3
    4
    <div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
    <div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
    <div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
    <div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>

高级用法

  • 自定义默认值
  • 可以更改 scrollReveal.js 的默认配置，如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var config = {
        after: '0s',
        enter: 'bottom',
        move: '24px',
        over: '0.66s',
        easing: 'ease-in-out',
        viewportFactor: 0.33,
        reset: false,
        init: true
    };
    window.scrollReveal = new scrollReveal(config);

动态HTML

  • scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素，并进行初始化，所以对于动态加载的元素，可以这样操作：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var config = {
        enter: 'bottom',
        move: '40px',
        over: '0.16s',
        reset: true,
        init: false
    };
    window.scrollReveal = new scrollReveal(config);
    var data = {newElementHtml: '<div data-scroll-reveal>dowebok.com</div>'};
    var container = document.getElementById('#container');
    container.innerHTML(data.newElementHTML);
    scrollReveal.init();

Posted on | In

javascript中滚动到指定位置

  • 方法一

    1
    2
    3
    4
    5

    //主要运用到了$(selector).animate(styles,speed,easing,callback)和scrollTop函数
    $("body,html").animate({
    	scrollTop: 200  //让body的scrollTop等于pos的top，就实现了滚动
    }, 200);

  • jq滚动方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    $("#text1").click(function(){

           $("html,body").animate(

            {scrollTop:$($("#text1").attr('href')).offset().top},500 /*scroll实现定位滚动*/

            );/*让整个页面可以滚动*/

    return false;