如何在你的网站上加上IPV6检测功能

现在中国政府正在大力推进ipv6行业发展,个人的小网站可以追一追潮流,具体效果看右侧(手机端在最下面)。

话不多说,直接贴代码,此代码依赖jQuery

<span id="ipv6-span" style="color:red;">你的网络不支持IPV6</span>
<br>
<span id="ipv4-span" style="color:red;">你的网络不支持IPV4</span>
<script>
    jQuery.ajax({
        url: 'https://v4.yinghualuo.cn/bejson',
        type: 'get',
        dataType: 'json',
        success: function(json) {
            jQuery('#ipv4-span').css('color', 'green');
            jQuery('#ipv4-span').html('你的网络完美支持IPV4<br>' + json.ip);
        }
    });
    jQuery.ajax({
        url: 'https://v6.yinghualuo.cn/bejson',
        type: 'get',
        dataType: 'json',
        success: function(json) {
            jQuery('#ipv6-span').css('color', 'green');
            jQuery('#ipv6-span').html('你的网络完美支持IPV6<br>' + json.ip);
        }
    });
</script>

如果您需要在您的网站上调取此跨域请求接口,请联系博主批准后再正式运营。博主不能保证未批准的服务稳定性

Chrome屏蔽烦人的百度搜索热点(无聊的新闻)

开发时,在百度上搜索一些资料时,总是不经意看到百度搜索热点的一些新闻,然后经不住诱惑的标题就不经意间点了进去,然后就是连锁反应了。。等再次回到开发时已经是半小时之后的事了。又要把想要的东西重新捋一遍,导致开发效率低下。为了避免这种情况,只好在网上想办法,发现了一款广告屏蔽软件,之前虽然也在用,但是没想到有如此个性化的功能。

下载Adblock Plus插件:

打开
https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb 安装Adbock Plus插件

安装好了,去设置一下插件,在高级里面添加如下规则:

www.baidu.com##div[tpl=”right_toplist1″]

上面的规则在后期需要更改,如果失效了,请私聊博主。屏蔽完成后美滋滋地撸代码了

跨域问题,当mode为include时,Access-Control-Allow-Origin不能为*,

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.


配合前端写Vue项目时,浏览器遇到这种错误,按道理来说http response 的 header 中 Access-Control-Allow-Origin参数 为* 时,可以满足一切域名情况。

看样子 看了半天也不行,修改nginx的配置 Access-Control-Allow-Origin 改为 http://xxx.xxx.com时候,可以了。最后查找跨域文档才发现

跨域请求发送cookie的时候,需要判断是否包含了请求源的origin,不然不发送cookie,然后,OPTIONS请求发送成功后,并没有新的请求发出。

解决方法是:
nginx配置修改一下

add_header Access-Control-Allow-Origin *;

改成

add_header Access-Control-Allow-Origin "$http_origin";


这样满足任何情况

最容易理解的CSS的position教程——十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

继续阅读“最容易理解的CSS的position教程——十步图解CSS的position”

html5实现ajax上传文件

var formData = new FormData();
formData.append('name', tr.find('input[name="name"]').val());

if (tr.find('input[name="logo"]')[0].files[0] !== undefined) {
    formData.append('logo', tr.find('input[name="logo"]')[0].files[0]);
}
$.ajax('http://example.com/abc/upload/', {
    type: 'POST',
    cache: false,
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(result) {
        console.log('保存成功');
    },
    error : function (msg) {

    },
});

html前端处理GET参数两个基类方法备忘

function ObjectToStr(obj) {
    var result = '';
    $.each(obj, function(k, v){
        if (result === '') {
            result = '?' + k + '=' + v;
        } else {
            result += '&' + k + '=' + v;
        }
    });
    return result;
}


function getParams() {
    var url = window.document.location.href.toString();
    var u = url.split("?");
    if(typeof(u[1]) == "string"){
        u = u[1].split("&");
        var get = {};
        for(var i in u){
            var j = u[i].split("=");
            get[j[0]] = j[1];
        }
        delete get.page;
        return get;
    } else {
        return {};
    }
}