html,Code片段,代码实例,代码示例,代码片段库

html 转换HTML输入元素的东西。

转换HTML输入元素的东西。

gistfile1.html

<input type="text" name="some_name" autocomplete="off" autocorrect="off" autocapitalize="off">

html API：IP

API：IP

Tencent.html

使用JS代码进行调取：
<script language="javascript" type="text/javascript" src="http://fw.qq.com/ipaddress" charset="GB2312"></script> <script>document.write("你的IP是："+IPData[0]+"，来自："+IPData[2]);</script>

腾讯的IP地址API接口地址：http://fw.qq.com/ipaddress返回的是数据格式为： 
var IPData = new Array(“58.218.198.205″,”",”江苏省”,”徐州市”);

pconline.html

太平洋IP地址库
地址:http://whois.pconline.com.cn
(1)ip.jsp(2)ipJson.jsp(3)jsAlert.jsp(4)jsDom.jsp(5)jsFunction.jsp(6)jsLabel.jsp(7)jsWrite.jsp(8)whois/index.jsp接口参数:
@param ip:可指定IP地址，不指定则取request.getRemoteAddr()的值。支持以下格式：（a）202.96.159.254 （b）202.096.159.254 (c)202.96.159.254/192.168.20.106 (适用于接口1-8)
@param rep:可指定活动页代码，输出的结果会按系统设置映射到相应的地区 (适用于接口1-8)
@param level:可指定输出结果的精度，=1/=2/=3分别代表只输出省名称/输出省市名称/输出省市区名称 (适用于接口1-8)
@param siteId:可指定网站或应用代码,输出IP所属的区域 (适用于接口2,5. siteId与rep原则上是互斥的)
@param callback:指定回调函数的名称, 不指定则默认为'IPCallBack' (适用于接口2,5)
@param domId:指定结点ID (适用于接口4, 必须指定)
@param id:指定结点ID (适用于接口6, 必须指定)

sina.html

新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=12.130.132.30
返回的数据格式为:
var remote_ip_info = {"ret":1,"start":"119.162.78.0","end":"119.164.255.255","country":"\u4e2d\u56fd","province":"\u5c71\u4e1c","city":"\u6d4e\u5357","district":"","isp":"\u8054\u901a","type":"","desc":""};

html IM：链接

IM：链接

im.html

Tencent://Message/?Uin={Q}

html Miva - 404 Not Found Page（NTFD）：自定义字段重定向

Miva - 404 Not Found Page（NTFD）：自定义字段重定向

miva-404-ntfd_custom-field-redirects.html

<mvt:comment>
  Redirect /old_product_code.html to /new_product_code.html
</mvt:comment>
<mvt:assign name="l.settings:url" value="s.script_url" />
<mvt:item name="ry_toolbelt" param="Assign|g.url_length|len( l.all_settings:url )" />
<mvt:item name="ry_toolbelt" param="Assign|g.stripped_404_url|substring_var( l.all_settings:url, 2, g.url_length - 6 )" />
<mvt:foreach iterator="product" array="products">
	<mvt:item name="customfields" param="Read_Product_ID( l.settings:product:id, 'old_url', g.old_product_code )" />
	<mvt:if expr="tolower(g.old_product_code) EQ tolower(g.stripped_404_url)">
		<mvt:assign name="g.new_product_code_url" value="l.settings:product:code" />
	</mvt:if>
</mvt:foreach>
<mvt:if expr="NOT ISNULL g.new_product_code_url">
	<mvt:assign name="l.header" value="miva_output_header( 'Status', '301 Moved Permanently' )" />
	<mvt:assign name="l.header" value="miva_output_header( 'Location', 'http://' $ g.domain:name $ '/' $ g.new_product_code_url $ '.html' )" />
<mvt:else>
	<mvt:assign name="l.header" value="miva_output_header( 'Status', '404 Not Found' )" />
</mvt:if>

html jsbin.uqegab.html

jsbin.uqegab.js

//String.prototype.

console.log(typeof String);
console.log(typeof Object);
String.prototype.aa = function() {
  alert(this);
  //console.log(this);
  return 'aa';
};

console.log("asdf".aa());

Function.prototype.method = function(name, func) {
  this.prototype[name] = func;
  return this;
};
String.method('bb', function() {
  return 'bb';
});
console.log("asdf".bb());

jsbin.uqegab.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
</body>
</html>

html jsbin.uqegab.html

jsbin.uqegab.js

//String.prototype.

console.log(typeof String);
console.log(typeof Object);
String.prototype.aa = function() {
  alert(this);
  //console.log(this);
  return 'aa';
};

console.log("asdf".aa());

Function.prototype.method = function(name, func) {
  this.prototype[name] = func;
  return this;
};
String.method('bb', function() {
  return 'bb';
});
console.log("asdf".bb());

jsbin.uqegab.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
</body>
</html>

html 用于检查产品是否具有Colo（u）r选项且可用多种颜色的脚本。

用于检查产品是否具有Colo（u）r选项且可用多种颜色的脚本。

gistfile1.html

{% assign has_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
  {% capture downcased_option %}{{ option | downcase }}{% endcapture %}
  {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
    {% assign option_index = forloop.index0 %}
    {% assign has_color = true %}
  {% endif %}
{% endfor %}
{% if has_color %}
  {% assign how_many_colors = 0 %}
  {% assign colors = '' %}
  {% for variant in product.variants %}
    {% assign color = variant.options[option_index] | append: ',' %}
    {% unless colors contains color %}
      {% assign colors = colors | append: color %}
      {% assign how_many_colors = how_many_colors | plus: 1 %}
    {% endunless %}
  {% endfor %}
  {% if how_many_colors > 1 %}
  <p>Available in more colors</p>
  {% endif %}
{% endif %}

html 在REGISTRATION表单中收集客户标签的示例，以及多个标签。服务器需要以逗号分隔的标签列表

在REGISTRATION表单中收集客户标签的示例，以及多个标签。服务器需要以逗号分隔的标签列表。因此，我们通过隐藏的输入字段向他提供该列表，我们使用JavaScript更新。在SIGNUP表单中，除了用联系人[tags]替换customer [tags]之外，它是相同的代码。

gistfile1.html

<p>I am interested in:</p>
<p>
  <input type="checkbox" class="interested-in" value="sunsets">Sunsets<br />
  <input type="checkbox" class="interested-in" value="piña coladas">Piña coladas<br />
  <input type="checkbox" class="interested-in" value="getting lost in the rain">Getting lost in the rain<br />
  <input type="checkbox" class="interested-in" value="songs by rupert holmes">Songs by Rupert Holmes<br />
</p>

<!-- this is what is submitted to the server -->
<input type="hidden" name="customer[tags]" />

<script>
jQuery(function() {
  jQuery('.interested-in').change(function() {
    var tags = '';
    jQuery('.interested-in:checked').each(function(){
      tags += jQuery(this).val() + ',';
    });  
    jQuery('[name*="tags"]').val(tags);
  });
});
</script>

html html：twitter-follow-link

html：twitter-follow-link

html_twitter-follow-link.html

<a href="https://twitter.com/intent/user?screen_name=pablo_lobos" target="_blank">Seguir a @pablo_lobos</a>

html 圆到圆的地图

圆到圆的地图

confmap.js

function dist(z0,z,z1)
{
    var dx10 = z1.re-z0.re, dy10 = z1.im-z0.im;
    var dx0  =  z.re-z0.re,  dy0 =  z.im-z0.im;
    return Math.pow(dx10*dy0-dy10*dx0,2)/(dx0*dx0+dy0*dy0);
}

function resampleLoop(f,ps,eps)
{
    var ds = ps.map(f);

    function refStep(params,data)
    {
        for(var i = 0; i < params.length; i++)
        {
            var ni = i+1<params.length?i+1:0; 
            var p0 = params[i], p1 = params[ni];
            var newp = (p0+p1)/2;
            if( p1-p0 >= Math.PI || p1-p0 <= -Math.PI ) newp += Math.PI;
            var newf = f(newp);
            if(dist(data[i],newf,data[ni]) > eps) 
            { params.splice(++i,0,newp); data.splice(i,0,newf); }
        }
    }

    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);

    return ds;
}

function resampleLine(f,ps,eps)
{
    var ds = ps.map(f);

    function refStep(params,data)
    {
        for(var i = 0; i < params.length-1; i++)
        {
            var p0 = params[i], p1 = params[i+1];
            var newp = (p0+p1)/2;
            var newf = f(newp);
            if(dist(data[i],newf,data[i+1]) > eps) 
            { params.splice(++i,0,newp); data.splice(i,0,newf); }
        }
    }

    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);
    refStep(ps,ds);

    return ds;
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { font: 10px sans-serif; }
.brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
.brsh .back   { fill: none; stroke: black; stroke-width: 1px;}
.line         { fill: none; stroke: black; stroke-width: 1px; }
.force .line  { fill: none; stroke: red;   stroke-width: 1.5px; }
.poten .line  { fill: none; stroke: blue;  stroke-width: 1.5px; }
.axis         { fill: none; stroke: black; }
ellipse       { fill: none; stroke: black; }
circle        { fill: grey; stroke: black; }
</style>
<body>

<form>
      <label><input type="radio" name="mode" value="rctng"> Rectangular</label>
      <label><input type="radio" name="mode" value="crclr" checked> Circular</label>
</form>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="confmap.js"></script>
<script>
    function Complex(re, im) { this.re  =   re; this.im  =   im; };
    Complex.prototype.clone = function(){ return new Complex(this.re,this.im); };
    Complex.prototype.conj  = function(){ return new Complex(this.re,-this.im); };
    Complex.prototype.add = function(z) { this.re += z.re; this.im += z.im; return this; };
    Complex.prototype.sub = function(z) { this.re -= z.re; this.im -= z.im; return this; };
    Complex.prototype.mul = function(z) 
    { 
        var tmp = this.re;
        this.re = this.re*z.re - this.im*z.im; 
        this.im =     tmp*z.im + this.im*z.re; 
        return this;
    };
                                                     
    Complex.prototype.div = function(z) 
    { 
        var tmp =  this.re, 
              n =     z.re*z.re +    z.im*z.im;
        this.re = (this.re*z.re + this.im*z.im)/n; 
        this.im = (   -tmp*z.im + this.im*z.re)/n; 
        return this;
    };
                                                     
 
    var width = 960, height = 500;

 
    var svg = d3.select("body")
                .append("svg")
                .attr("width",   width)
                .attr("height", height);

    svg.append("clipPath")
       .attr("id","clip")
       .append("rect")
            .attr("x",0).attr("y",0)
            .attr("width",width/2).attr("height",height);


    var mapd = svg.append("g").attr("class","mapd").attr("clip-path","url(#clip)");

    var brsh = svg.append("g").attr("class","brsh")
                              .attr("transform","translate("+width/2+")");

    var brsR = brsh.append("g").attr("class", "poten");
    var brsP = brsh.append("g").attr("class", "force");

    var mapR = mapd.append("g").attr("class", "poten");
    var mapP = mapd.append("g").attr("class", "force");
 
 
    var x1 = d3.scale.linear().range([0, width/2]).domain([-2, 2]);
    var y1 = d3.scale.linear().range([ height, 0]).domain([-2, 2]);
    var x2 = d3.scale.linear().range([0, width/2]).domain([-1, 1]);
    var y2 = d3.scale.linear().range([ height, 0]).domain([-1, 1]);

    mapd.append("ellipse")
        .attr("cx",x1(0)).attr("rx",x1(1)-x1(0))
        .attr("cy",y1(0)).attr("ry",y1(0)-y1(1));

    var brush = d3.svg.brush().x(x2).y(y2).on("brush", plotC);    

    var cntr=new Complex(0.5,0.5); 
    var draggey = d3.behavior.drag()
            .on("drag",function(d){
                var nx = x1.invert(d3.event.x); if(nx > 2 || nx < -2) return;
                var ny = y1.invert(d3.event.y); if(ny > 2 || ny < -2) return;
                cntr.re=nx; cntr.im=ny;
                d3.select(this).attr("cx",d3.event.x).attr("cy",d3.event.y);
                brush.on("brush")();
            });

    mapd.append("circle")
        .attr("cx",x1(0.5)).attr("cy",y1(0.5))
        .attr("r",6).call(draggey);


    mapd.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x1).orient("bottom"));

    mapd.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y1).orient("left")); 

    brsh.append("ellipse")
        .attr("cx",x2(0)).attr("rx",x2(1)-x2(0))
        .attr("cy",y2(0)).attr("ry",y2(0)-y2(1));

    brsh.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x2).orient("bottom"));

    brsh.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y2).orient("left"));

    var line1 = d3.svg.line()
                      .x(function(d) { return x1(d.re); })
                      .y(function(d) { return y1(d.im); });

    var line2 = d3.svg.line()
                      .x(function(d) { return x2(d.re); })
                      .y(function(d) { return y2(d.im); });


    brsh.append("rect").attr("class","back")
                       .attr("width",width/2)
                       .attr("height",height);

    brsh.call(brush);

    function plines(sel,data, f)
    {
        var paths = sel.selectAll('.line').data(data);
        paths.enter().append('path').attr('class','line');
        paths.attr('d',f);
        paths.exit().remove();
    }

    d3.selectAll("input").on("change", function(){
        if(this.value==="crclr") brush.on("brush",plotC); 
        else brush.on("brush",plotR);
        brush.on("brush")(); });


    function f(z)    { return (cntr.clone().sub(z)).div(new Complex(1,0).sub(cntr.conj().mul(z))); }


    function plotC()
    { 
        if(brush.empty()) return;
        ext = brush.extent();
        
        var rads = d3.range(0,1.01,1/10);
        var phis = d3.range(-Math.PI,Math.PI,Math.PI/10);

        var x0 = (ext[1][0] + ext[0][0])/2;
        var y0 = (ext[1][1] + ext[0][1])/2;
        var dx = (ext[1][0] - ext[0][0])/2;
        var dy = (ext[1][1] - ext[0][1])/2;

        var Ppars  = rads.map(function(r){return function(t){return new Complex(x0+r*dx*Math.cos(t),y0+r*dy*Math.sin(t));};});
        var Rpars  = phis.map(function(p){return function(t){return new Complex(x0+t*dx*Math.cos(p),y0+t*dy*Math.sin(p));};});

        plines(brsR, Ppars.map(function(par){return resampleLoop(par,phis,0.0001);}), function(d){return line2(d)+'Z';});
        plines(brsP, Rpars.map(function(par){return resampleLine(par,rads,0.0001);}), function(d){return line2(d);});

        var PparsF = Ppars.map(function(par){return function(t){return f(par(t)); };});
        var RparsF = Rpars.map(function(par){return function(t){return f(par(t)); };});

        plines(mapR,PparsF.map(function(par){return resampleLoop(par,phis,0.00001);}),function(d){return line1(d)+'Z';});
        plines(mapP,RparsF.map(function(par){return resampleLine(par,rads,0.00001);}),function(d){return line1(d);});
    }

    function plotR()
    { 
        if(brush.empty()) return;
        ext = brush.extent();
        
        var x1 = ext[1][0], x0 = ext[0][0]
        var y1 = ext[1][1], y0 = ext[0][1]
        var dx = ext[1][0] - ext[0][0];
        var dy = ext[1][1] - ext[0][1];

        var xs = d3.range(0,1.01,1/15);
        var ys = d3.range(0,1.01,1/15);

        var Xpars  = xs.map(function(x){return function(t){return new Complex(x0+x*dx,y0+t*dy);};});
        var Ypars  = ys.map(function(y){return function(t){return new Complex(x0+t*dx,y0+y*dy);};});

        plines(brsR, Xpars.map(function(par){return ys.map(par);}), function(d){return line2(d);});
        plines(brsP, Ypars.map(function(par){return xs.map(par);}), function(d){return line2(d);});

        var XparsF = Xpars.map(function(par){return function(t){return f(par(t)); };});
        var YparsF = Ypars.map(function(par){return function(t){return f(par(t)); };});

        plines(mapR,XparsF.map(function(par){return resampleLine(par,ys,0.0001);}),function(d){return line1(d);});
        plines(mapP,YparsF.map(function(par){return resampleLine(par,xs,0.0001);}),function(d){return line1(d);});
    }

</script>
</body>