评论 - lizhenqiu blog

#²¹²⁹

作者：广西南宁市

完美全兼容解决文字两端对齐 justify 中文姓名对齐

text-align:justify; 所有浏览器都支持

Run code

Cut to clipboard

，text-justify之类的却只有IE支持，就不要考虑了。

justify我的理解，使元素内部的子元素两端对齐，子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时，因为只有一行，当作最后一行，所以不会两端对齐的效果。

姓名对齐我们比较常用的是

（半个中文空格），（一个中文空格）

Run code

Cut to clipboard

来添充两个字，三个字的姓名，使包括四字的姓名都能对齐。例如：

所以就想到了用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：

　　让浏览器认为这不是最后一行就行了

在元素里面加一个会换行的空的子元素比如:

<i style="display:inline-block;width:100%;height:0;"></i>

Run code

Cut to clipboard

例子：html结构

<ul class="arter">
                    <li><span>作品名称<i></i></span>：  宝贝儿</li>
                    <li><span>作品类型<i></i></span>：  油画</li>
                    <li><span>艺术家<i></i></span>：  张玉瀛</li>
                    <li><span>风格<i></i></span>：  超现实</li>
                    <li><span>材质<i></i></span>：  布面油画</li>
                    <li><span>题材<i></i></span>：  人物</li>
                    <li><span>创作时间<i></i></span>：  2011</li>
                    <li><span>所在位置<i></i></span>：  华东</li>
                    <li><span>尺寸<i></i></span>：  78x78cm</li>
                </ul>

Run code

Cut to clipboard

scss

li{font-size:14px;line-height:24px;color:#4a4a4a;
                    span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;
                         i{display:inline-block;width:100%;height:0;}
                    }
                }

Run code

Cut to clipboard

效果

几点注意事项：

1）span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使<i>换行；

2）必须要设置span元素的height，和overflow:hidden否则<i>还是会占高度；

3）vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成

Run code

Cut to clipboard

原文

文章：常用html、demo代码发表时间：2016-09-29, 16:53:01

展开↯

#²¹³⁰

作者：广西南宁市

尾递归~~有点小意思！！！
尾递归很有意思~~~

拿快排说事的话，本来按照通俗易懂的理解，就是两次调用本身来进行左右排序。

按照尾递归的话得，可以省下一半的递归空间，直接拿一次的处理结果的low 或者high当参数传入下一次的调用。整个过程相比于同时进行两次本身的递归调用，这样只使用一次本身递归调用。

尾递归就是用迭代来代替递归全部过程。

递归调用会消耗大量的栈空间，每一次递归调用函数都会新开一个栈空间进行运行，同时要将上一次函数计算结果保存起来。所谓的保存现场，这样会消耗大量的栈空间。于是用迭代、用尾递归代替全递归调用就是一个很好的选择。

最常用距离都是斐波拉契数列，

Feb（n） = n*(n-1)*(n-2)….2*1;

Run code

Cut to clipboard

教科书就是用这个进行举例递归调用的。

function   Feb($n)
{
     if($n<=2)
     {
         return $n;
     }
     $res = $n*Feb($n-1);
     return $res;
}

Run code

Cut to clipboard

这样就是一个递归调用的最经典的例子，不过在计算的过程中，每次调用的时候都得将上次计算的过程进行现场保存。所以当n很大的时候，这个n会占用很大的内存。

所以改用迭代的过程，或者尾递归的过程，即把每次的计算的结果存储起来同时传递给下一次函数得调用。

function Febs($n,$sum)
{
     if($n<=2)
     {
         return $sum;
     }
     else
     {
        return Febs($n-1,$sum*$n);
     }
}

Run code

Cut to clipboard

在快排改进排序中也是同样利用while迭代，来替代另外一次的递归调用。

function Partion(&$arr,$low,$high)
{
    if($low >= $high)
    {
        return;
    }

    //标记位
    $povion = $arr[$low];
    while ($low <$high ) 
    {
        while ($low < $high && $arr[$high] <= $povion)
        {
            $high--;
        } 
        $arr[$low] = $arr[$high];
        while ($low < $high && $arr[$low] > $povion)
        {
            $low++;
        } 
        $arr[$high] = $arr[$low];
    }
    //循环完了之后将标记位回复到i=j相交的位置
    $arr[$low] = $povion; 
    return $low;
}

function Qsort(&$arr,$low,$high)
{
    if($low >= $high )
    {
        return;
    }
    while($low < $high)
    {
        $povision =  Partion($arr,$low,$high);
        Qsort($arr,$low,$povision-1);
        $low = $povision+1;
    }

     //正常的递归调用快排算法如下

     //    $povision =  Partion($arr,$low,$high);    
     //    Qsort($arr,$low,$povision);
     //    Qsort($arr,$povision+1,$high);
}

Run code

Cut to clipboard

突然发现一个问题，我原来混淆了斐波拉契数列。把n的阶乘当成斐波拉契数列数列啦。斐波拉契数列定义应该是

Feb(n) = Feb(n-1)+Feb(n-2);

Run code

Cut to clipboard

代码同理：

function   Feb($n)
{
     if($n<=2)
     {
         return 1;
     }
     $res = Feb($n-1)+Feb($n-2);
     return $res;
}

$res = Feb(20);
print_r($res);



function Febs($n,$sum1,$sum2)
{
     if($n<2)
     {
         return $sum1;
     }
     else
     {
        return Febs($n-1,$sum2,$sum1+$sum2);
     }
}

 print_r(Febs(20,1,1));

Run code

Cut to clipboard

其实所谓尾递归，还是递归调用。但是内部就是用的所谓的迭代。其实可以用while循环来改写。将else部分替换成while的话，可能会更显而易见。

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-29, 16:47:36

展开↯

#²¹³¹

作者：广西南宁市

缓存在网站开发中的重要性
通过计算斐波那契数列明白缓存在网站开发中的重要性
1 、首先测试一下没有使用数据缓存来计算斐波那契数列。

var count = 0;
function fib(n) {
count++;
if(n === 0 || n === 1) {
return 1;
}

return fib(n - 1) + fib(n - 2);
}
fib(40);
console.log(count);//count是函数fib运算次数，当fib(40)时候运行次数高达：331160281次，感兴趣的可以检测一下。

Run code

Cut to clipboard

2、下面我们看看使用数据缓存来计算斐波那契数列。


// 缓存是怎么使用的？
// 一般的缓存结构就是：键值对（对象 或者 数组）
// var obj = {};
// var arr = [];
// 使用缓存的方式：
// 1 先去缓存中查找有没有键对应的数据
// 2 如果有，就直接拿过来使用
// 3 如果没有，就计算或者是查询到，然后，要放到缓存中！
// 4 以后，就通过缓存来去数据
// 简化的步骤：先去缓存中查询有没有，如果没有就计算，并将结果放到缓存中
// 问题：缓存放到什么位置去？？
// 如果是全局变量，此时，任何人都能修改全局变量的内容
// 那就造成：数据不准确
// var obj = {};

// 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89....
var count = 0;
var fib = (function() {
// 使用闭包，将缓存放到闭包中去，
// 此时，就对这个缓存起到了保护的作用
// var cache = {};
var cache = [];

// 这个函数使用来计算：斐波那契数列
return function(n) {
count++;
// 1 先去缓存中查找有没有该键对象的值
if(cache[n] !== undefined) {
// 2 如果有，就直接返回当前的值
return cache[n];
}

// 3 如果没有，就计算，然后要添加到缓存中去
if(n === 0 || n === 1) {
// return 1;
cache[n] = 1;
return cache[n];
}

var temp = arguments.callee(n - 1) + arguments.callee(n - 2);
// 放到缓存中去
cache[n] = temp;
return cache[n];
};
})();

fib(40);

console.log(count);// 计算次数为：79次。

Run code

Cut to clipboard

通过上面两次对比，瞬间觉得数据缓存的重要性，由331160281次下降到79次。感兴趣的屌丝可以测试一下fib（50）；的运行次数，不使用数据缓存我测试了，我的浏览器崩溃了，使用数据缓存运行才99次。

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-29, 16:35:52

展开↯

#²¹³²

作者：广西南宁市

文章：成功的故事只能倒叙着讲发表时间：2016-09-29, 16:10:38

展开↯

#²¹³³

作者：广西南宁市

延迟JavaScript的加载
浏览器在执行JavaScript代码时会停止处理页面，当页面中有很多JavaScript文件或代码要加载时，将导致严重的延迟。尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载，但这些都不是一个好的解决方案。
下面是Google的建议。

<script type="text/javascript">

function downloadJSAtOnload() {
  
    var element = document.createElement("script");

    element.src = "defer.js";

    document.body.appendChild(element);

}

if (window.addEventListener)

    window.addEventListener("load", downloadJSAtOnload, false);

    else if (window.attachEvent)

   window.attachEvent("onload", downloadJSAtOnload);

   else window.onload = downloadJSAtOnload;

</script>

Run code

Cut to clipboard

这段代码的意思是等待页面加载完成后，然后再加载外部的“defer.js”文件。下面是测试结果。

文章：常用html、demo代码发表时间：2016-09-29, 12:15:28

展开↯

#²¹³⁴

作者：广西南宁市

人太容易被惯性推动着前进，而思维惯性是弊端最大的一个东西~~~要勇于打破一些禁锢自己的东西，这需要一个坚持的过程

文章：成功的故事只能倒叙着讲发表时间：2016-09-28, 14:56:59

展开↯

#²¹³⁵

作者：广西南宁市

setInterval(function() {
  if(Date.now() >= new Date("2016-09-12 15:59:00")) {
     $("#seckillQuantity").val(1);//1盒               
     $(".buyButtons.J_buyButtons").click();//抢购按钮
     var value = $(".answerList").children().eq(0).html(); //验证码取值  
     $('#randomAnswer').val(value);//验证码填值
     $('.answer-button').children().eq(0).click();//提交验证码
  }
}, 10)

Run code

Cut to clipboard

文章：《阿里盛世下的蝼蚁》发表时间：2016-09-27, 11:42:16

展开↯

#²¹³⁶

作者：广西南宁市

js的一些坑
1.变量类型模糊，容易出现问题;

2.全局变量与函数内部变量同名时，在函数内部声明变量，声明位置虽然在后，但在这之前，此名变量已为‘undefined’;

var a = 'aaa';
function b() {
    console.log(a);
    var a = 'bbb';
    console.log(a);
}
b();
console.log(a);

Run code

Cut to clipboard

输出：


undefined
bbb
aaa

Run code

Cut to clipboard

3.浮点数运算BUG，例如7*0.8=5.6000000000000005；

4.变量传递，对象为引用传递，数字和字符串是值传递；即函数内不能改变变量地址

var a = {};
var b = '我是b1';
a.name = 'aaaa';
(function(a,b) {
    a.name = 'bbbb';
	b='我是b2';
    a = {};
    a.name = 'cccc';
    console.log(a.name);
	console.log(b);
})(a,b); 
console.log(a.name);
console.log(b);

Run code

Cut to clipboard

输出cccc,我是b2,bbbb,我是b1

文章：常用html、demo代码发表时间：2016-09-27, 11:16:22

展开↯

#²¹³⁷

作者：广西南宁市

自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同：

另外，当我们规定 input[type="file"] 的高度，并把它的行高设置成与其高度相等后，chrome中难看的样式出现了：

“未选择任何文件”这一行并没有竖直居中。

似乎在 firefox 中好看一些，嗯，我比较喜欢用 firefox。但是这些浏览器中的表现不一致，我们必须做兼容处理。

思路：

1. 自定义与其中一个浏览器表现类似的样式，将其放在下层；

2. 将浏览器本身的表现出来的样式“隐藏掉”， opacity: 0; 置于上层，这样我们点击的才是 input[type="file"] 响应的事件；

3. 选择文件或改变文件后，改变显示 file 的值。

代码：
html:

<form action="" class="activityForm">
　　<div class="file">
    <label for="file">文件：</label>
    <div class="userdefined-file">
    　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">
    　　<button type="button">上传</button>
    </div>
    <input type="file" name="file" id="file">        
　　</div>
</form>

Run code

Cut to clipboard

css:

.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

Run code

Cut to clipboard

js:

document.getElementById("file").onchange = function() {
    document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

Run code

Cut to clipboard

这样处理后，就在各个浏览器中表现一致了：

文章：CSS 美化复选框CHECKBOX-无图片方式发表时间：2016-09-27, 11:08:19

展开↯

#²¹³⁸

作者：广西南宁市

自定义input[type="radio"]的样式
对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。

为了最大程度的显示出它们的差别，并且为了好看，首先定义了一些样式：
html:

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

Run code

Cut to clipboard

然后在各个浏览器中观察，会发现有很大的差别：

对于 firefox 浏览器，即便是设置了宽和高，依然是没有效果，input[type="radio"] 的那个圆圈还是初始状态那么大。其它浏览器的表现也不一致，为了达到一致的效果，我们需要做兼容处理。

思路：

1. 将 input[type="radio"] 隐藏， opacity: 0; 置于上层，当我们点击它时，就能正确的响应原本的事件。

2. 自定义一个圆圈，置于下层，模拟原本相似的样式；

3. 用 js 实现选中 input[type="radio"] 时，在其下层的自定义的元素改变原来的背景颜色。

代码：
html:

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
            <span class="female-custom"></span> <!-- 同下面的 span 一样作为自定义的元素 -->
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
            <span class="male-custom"></span>    
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.sex span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}        
.sex span.active {
    background-color: #000;            
}

Run code

Cut to clipboard

js:

$("#male").click( function () {
    $(this).siblings("span").addClass("active");
    $(this).parents("div").siblings("div").children("span").removeClass("active");
});
$("#female").click( function () {
    $(this).siblings("span").addClass("active");
    $(this).parents("div").siblings("div").children("span").removeClass("active");
});

Run code

Cut to clipboard

这样处理后，在浏览器中展示效果全部一样了：

扩展：

1. 对于代码中出现的定位，对父元素使用 position: relative; 给子元素使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能实现让子元素相对于父元素居中(满足水平居中和竖直居中)显示。如果只是需要竖直居中，则不需要添加 right: 0; 和 left: 0; 的样式。

2. 有时当我们不容易确定子元素的高度时，可以这样设置：对父元素 position: relative; 对子元素 position: absolute; top: 10px; bottom: 10px; margin: auto; 这样一来，子元素的高度就是父元素的高度减去20px后的值了，同样，top 和 bottom 支持百分数，可扩展性更强。

优化更新：

需求：

1. 有时候我们需要内联的单选样式；

2. 选中的按钮内的小圆圈不需要占满整个外圈的大小。

思路：

1. 让每一个包裹选择的 div 左浮动；

2. 给父元素添加圆形的外边框，子元素设置一个稍小于父元素大小的背景。

代码：
html:

<form action="">
    <div class="fruit">
        <div class="apple">
            <label for="apple">苹果</label>
            <input type="radio" name="fruit" id="apple">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="banana">
            <label for="banana">香蕉</label>
            <input type="radio" name="fruit" id="banana">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="orange">
            <label for="orange">橘子</label>
            <input type="radio" name="fruit" id="orange">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

* { box-sizing: border-box; }

body { padding: 50px; }

input { padding: 0; margin: 0; border: 0; }

.fruit:before { content: ""; display: table; }

.fruit:after { content: ""; display: table; clear: both; }

.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }

.fruit > div:last-child { margin-right: 0; }

.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }

.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }

.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }

.fruit .user-defined span.circle  { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }

.fruit .user-defined span.active  { background-color: #000; }

Run code

Cut to clipboard

js:

$("input").click(function() {
    $(this).siblings("div").children("span").addClass("active");
    $(this).parents("div").siblings("div").find("span").removeClass("active");
});

Run code

Cut to clipboard

效果显示如下：

文章：CSS 美化复选框CHECKBOX-无图片方式发表时间：2016-09-27, 11:04:12

展开↯

#²¹³⁹

作者：广西南宁市

JavaScript整理
JavaScript是脚本语言

常用对话框：

alert()——警告对话框，作用是弹出一个警告对话框
confirm()——带确定和取消按钮，返回True或false
prompt()——弹出一个可以输入内容的对话框
JavaScript语法

基本数据类型与C#基本一样，万能变量var——可以随便存储其它类型的值，可以直接使用

显式转换：

parseint()——转换为整数

parsefloat()——转换为小数

运算符：与C#一样

数学运算符：+ - * / % ++ --；

关系运算符：==  !=  >  >=  <  <=；

逻辑运算符:&&  ||  !；

其它运算符:+= -= *= /= %= ?:

分支语句：

if...else

循环语句：

for（）

数组：

new Array（）;——类型固定，长度不固定

数组属性：a.length；数组元素的个数

函数：

function 函数名(参数){}

function(){}——匿名函数

window对象：

window.open("打开的网址""打开的位置")
window.opener——打开此页面的上一个页面
window.close()——关闭当前页面
window.navigate("url")——超链接功能
window.moveTo(x,y)——移动浏览器至某一位置
window.resizeTo(x,y)——设置浏览器的宽高
window.scrollTo(x,y)——锚点功能
定时器：

window.setTimeout(function(){},间隔执行的时间)——等待多久后执行，仅执行一遍
window.setInterval(function(){},间隔执行时间)——每隔多长时间执行一次，不会停止
window.history:

window.history.back()——页面后退
window.history.forward()——页面前进
window.history.go(n)——前进后退,n为正数则前进n个页面，为负数则后退n个页面
window.location.href="url"  ——超链接，主要
window.status——操作页面底部工具条的对象
window.document：

docunment.getElementById("id")；根据id找，最多找一个；
docunment.getElementsByName("name")；根据name找，找出来的是数组；
docunment.getElementsByTagName("name")；根据标签名找，找出来的是数组；
docunment.getElementsByClassName("name") 根据classname找，找出来的是数组；
操作内容：

普通元素：

1.innerHTML：赋值：

var a= document.getElementById("id");

 a.innerHTML = "<h1>aaaaaaa</h1>";

有<h1></h1>元素标记会被编译

取值：会将此元素内的所有内容包括元素标记都取出来

2.interText

赋值：会将赋的东西原样呈现

取值：只取文本内容

 表单元素：所有表单元素取值赋值全用value

操作属性：

 添加修改属性：对象.setAttribute("属性名","值")

如果没有此属性，那么会添加进去
如果已经有了此属性，那么会修改此属性的值

删除属性：对象.removeAttribute("属性名")

获取属性：对象.getAttribute("属性名")

操作样式

添加、修改样式：对象.style.样式名称=值

获取样式：对象.style.样式名称

相关元素

var a = document.getElementById("id");

取同辈的上一个和下一个元素：

var b = a.previousSibling，找a的上一个同辈元素

var b = a.nextSibling，找a的下一个同辈元素

取父级元素：var b = a.parentNode，找a的上一级父级元素

取子级元素：childNodes[n]找第几个

注意：回车和空格都算作一个元素

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2016-09-27, 10:52:14

展开↯

#²¹⁴⁰

作者：广西南宁市

JAVASCRIPT面向对象基础
　　最近学习了js的面向对象，
js通过函数来创建对象，而且js本身也是一种对象，那么什么又是对象呢，对象包含两种：1、属性（静态的特征）2、方法（动态的特征）。
通过js来创建对象：

2、用this关键字来设置属性和方法

function student(){

　　this.name　//student所包含的名字属性

　　this.sex　　//student所包含的性别属性

　　this.show=function(){

　　　　console.log(this.name);　　//student所包含的动作

　　}

}

Run code

Cut to clipboard

调用：

var zhangsan=new student();//zhangsan来调用这个student函数

　　  zhangsan.name="zhangsan";//将名字输入为“zhangsan”

　　  zhangsan.sex="男";//将性别输入为“男”

　　  zhangsan.show();//调用student所包含的动作（用控制台输出student的名字）

Run code

Cut to clipboard

3、设置object（对象）

function student(object()){

　　var o=new object();

　　o.name=name;

　　o.nsex=sex;

　　o.show=function(){

　　　　console.log(this.name);　　//student所包含的动作

　　};

　　return o;

　　}

Run code

Cut to clipboard

文章：成功的故事只能倒叙着讲发表时间：2016-09-27, 10:50:45

展开↯

#²¹⁴¹

作者：广西南宁市

自动判断手机版和pc版

<html>
<head>
<title>欢迎来到手机版</title>
<script>
var ua = navigator.userAgent;
var US = {
    Android:function () {   //安卓
        return ua.match(/Android/i)?true:false;
    },
    BlackBerry:function() {  //黑莓
        return ua.match(/BlackBerry/i)?true:false;
    },
    IOS:function(){  //IOS
        return ua.match(/iPhone|iPad|iPod/i)?true:false;
    },
    //这个其实没啥必要了,可以不用判断这个，毕竟IE是一种古老的东西
    Windows:function() {  
        return ua.match(/IEMobile/i)?true:false;
    },
    isMobile:function() {  //移动设备
        return US.Android()||US.BlackBerry()||US.IOS()||US.Windows();
    }
}
if(US.isMobile()==false){
    window.location = "http://www.baidu.com";     //如果是电脑访问 ，则跳入指定网址。在此以百度为例
}
</script>

</head>
<body><h1>欢迎来到手机版</h1></body>
</html>

Run code

Cut to clipboard

文章：成功的故事只能倒叙着讲发表时间：2016-09-27, 10:49:13

展开↯

#²¹⁴²

作者：广西南宁市

程序猿媳妇儿注意事项

　　十一年前我和程序猿第一次见面，还是大一军训期间。我甚至不确定程序猿是否记得那是第一次见面。当时不小心装伪文艺参加了吉他社，想借一本吉他入门书，然后同在吉他社热心的海哥说他一同学有，就带着我去拿书了。于是我们第一次“见面”了，我只看见一个对着电脑，佝偻着背的背影......严重怀疑程序猿根本没抬头看一眼那个已经晒得像反转熊猫一样的妹子，因为他递过来书以后，又迅速投入到了电脑的怀抱，相对应的，我也不记得他长什么样了。
　　我从来没有读懂过这个上天用那个背影给我的预警，于是堕入了一生的深渊。
　　当时的我对计算机、程序猿一无所知，只知道这些计算机系的，天然呆居多，玩游戏，不学习，民工气质愈演愈烈，穿着黄色民工拖鞋上课，在食堂和民工大哥们一起吃饭，头发不洗戴帽子遮，没衣服穿了从脏衣服堆里找，喝水的杯子长时间没刷竟然被蜜蜂筑了巢，天天拆别人电脑、烧别人电脑CPU或者对着电脑研究大便（debian）或者聚众看片儿..
　　即使程序猿后来文艺了一把还加入了一个乐队，当贝屎手，还是乐队里面最天然呆的，只会低头猛弹，不像主唱和吉他风骚。
　　经过初步了解，配电脑、修电脑、装系统等都可以找程序猿来干。而且程序猿不会油嘴滑舌的。很多妹子也都这么想的，于是大学四年，程序猿钻了不少次各种妹子宿舍，一去就一下午，他说装系统太慢，我暂且就信了吧。

　　程序猿大四差点没毕业，挂科十几门，从基础课的英语、高数、大物，到专业课的图形学什么的无一幸免，还好最后万分惊险，侥幸过关了。
　　我问他：你不是喜欢学计算机吗？怎么还学成一坨渣。他说：那些用过时教材的老师才教的是一坨渣。
　　事实证明，他是对的。我觉得有点莫名其妙，没见过他学习，原来也会写代码啊，还帮别人写了毕业论文，毕业了还顺利找到了工作。
　　关于毕业后的去向，程序猿是这么说的：国内也就北上广深还有点IT产业，你选个地方吧。我说：那就北京吧。这么着，我们就来帝都了。
　　七年前在北京，我们的第一份工作，程序猿的起薪还只有2500RMB，我找了份出版社的工作，起薪也是2500RMB。
　　刚开始工作的两年，在我记忆中是程序猿最最累的时候。两年时间，几乎没有休息过，周一至周五晚上加班到10点、11点以后才回来，甚至更晚或者通宵。周六日白天去公司加班。那时候还在做手机移植。人年轻，通宵一下还能扛得住，通宵后第二天还能继续上班。现在偶尔程序猿也会通宵发版，但是第二天几乎要休息大半天，不服年龄不行。
　　从大学的时候天天腻歪在一起到后来要适应等待程序猿加班的日子，习惯需要一个过程，也有始终习惯不了的，像我。直到现在，如果程序猿加班很晚回来，我都没有办法睡觉，一定要他回来才能睡，所以身体也跟着一起熬差了。
　　在北京工作了4年，我俩才考虑结婚，此时他已经换了一次工作，到了一家创业公司，开始做iOS。我比较佩服程序猿的一点在于他对行业发展还是比较敏感的，当时学习iOS就是个例证，以及自己没事儿吹牛说起大学就预测出微博类的产品会火，比特币刚出来几乎还没什么人知道的时候还挖了两天矿等等。但是不知此人是否天生命里没有横财，所以还只是勤勤恳恳打工过日子。

　　新换到创业公司也成了技术负责人，加班没那么猛了，但是也难看到出路，公司的风格很难改变，所以最后没有相信公司给出硕大的饼。我说如果公司真上市了，所有的期权加起来要上3000w？程序猿很平静地说，放心吧，上不了市。
　　当时公司目标3年还是5年上市，忘记了，反正至今也没上市。
　　后来程序猿又经过人介绍来到现在的公司，也算国内比较大的公司了，于是又拼命了一段时间，疯狂地加班，后来还算好一些。
　　我俩原来薪水都差不多，于是我总说等你薪水是我两倍了，我就辞职。后来两倍了，我又反悔了，我说等你薪水是我三倍了，我就辞职。于是...现在我辞职了，做了儿童绘本微店斑马星空，我也希望能早点给他生个孩子，继承一下他的高智商和好脾气。孩子生下来就给摸键盘，三岁学汇编，四岁学C，五岁写操作系统...
　　七年，从一个年轻小伙熬成了大叔，体重从55kg变成了75kg，从天然呆的码农到在大公司的小经理。非常符合程序猿成长路线。不知是喜是忧。

　　既然已经嫁给程序猿这么多年了，虽然至今仍然是小白一枚，但是也能总结几点：
　　一要耐得住寂寞
　　程序猿永远陪伴电脑的时间比陪媳妇儿时间长，加班相当频繁，要锻炼自己独立入睡。
　　二要耐得住落寞
　　也不能说程序猿没有情趣，但是也不能太指望。自从结婚后没有过过任何的纪念日之类的。偶尔会在生日什么的给买个礼物，基本以电子设备为主。
　　三要照顾得了程序猿的生活
　　当然大部分的程序猿对衣食标准要求不高，但也别指望他们能做太多。某猿只会每天早上大喊没有袜子穿啦，没有T恤穿啦。
　　吃货程序猿也会做几个大菜，但是只是有客人来露一手用的。
　　四要给程序猿财务自由去买电子产品
　　比如1k多的机械键盘，1k多的耳机，各种Nk的游戏设备，还有很多其他七七八八的腕带啊之类的。总之要电子设备新出来什么，他们想买就得买，不然他们浑身难受。
　　五要会玩三国杀等各类纸牌游戏以及德州扑克
　　坐着不动又能彰显他们智商的牌类游戏最适合程序猿了。
　　六参加他们的TB活动的时候要能融入进去
　　比如吃饭就要低头猛吃，饮料猛喝。偶尔听见“来干一下”，就干一下，呵呵一笑，然后继续低头猛吃，饮料猛喝。吃完喝完三国杀或者德州扑克。
　　七要听懂一些基本术语
　　比如说bug等、各编程语言名称。能听懂基本的IT笑话，比如前两天刚懂了类风湿的笑话。在iOS的拼写上，不要犯大众错误。
　　八要崇拜乔布斯，要记住IT圈各大佬的名儿
　　没事儿多看看IT圈新闻。
　　九要提醒提防程序猿病
　　小心眼角膜炎、肩颈疾病、脂肪肝、腱鞘炎。
　　十不要太担心程序猿在男女问题方面出问题
　　相信他们更愿意娶个电脑。如果真的出了问题，可能他本质不是程序猿，而是产品或者设计狮。
　　十一不要让亲戚朋友们找程序猿买电脑攒电脑修电脑装系统
　　因为程序猿说了，他们不是卖电脑的。
　　十二最后一条也是最重要的，要赞美程序猿，欣赏他们的审美，因为编程也是一门艺术。
　　程序猿身上都是有某种气质的，不然现在我们不会那么轻易在大街上的人群中分辨出程序猿。
　　因为程序猿是有使命感的，他们定是感受到了命运的召唤，要用计算机改变和毁灭人类的未来，他们已经并即将做到。
　　向程序猿们致敬。

　　文／Arale（简书作者）

文章：他不是脾气暴躁，只是不能被打扰发表时间：2016-09-26, 16:41:29

展开↯

#²¹⁴³

作者：广西南宁市

“Galaxy Note7，Galaxy Note7，最新一代旗舰，这位先生，您就买一台吧！”小女孩的赤脚已经被冻得发紫，可是她已经一整天没有吃饭了，如果再卖不出一台手机，她就要饿死了。赶着回家过新年的男士笑着摇摇头，因为这些手机太昂贵了。
小女孩蜷缩在墙角，想起了自己的奶奶，拿出一台Note7，插上数据线，删掉温控文件，这样会让她暖和一些。小女孩从破烂的连衣裙口袋里拿出了一个移动电源，想起了奶奶说过的话，给Note7充电会带给人们幸福。
她毫不犹豫地接上移动电源，一朵巨大的蘑菇盛开在大地上，这一天，无数人见到了他们的奶奶。

文章：成功的故事只能倒叙着讲发表时间：2016-09-26, 16:34:03

展开↯

#²¹⁴⁴

作者：广西南宁市

鲁迅：“晚安！”。

语文老师：“晚安”中“晚” 字点明了时间，令人联想到天色已黑，象征着当时社会的黑暗。而在这黑暗的天空下人们却感到“安”，侧面反映了人民的麻木，而句末的感叹号体现了鲁迅对人民麻木的“哀其不幸怒其不争”。

鲁迅：“。。。。”

文章：成功的故事只能倒叙着讲发表时间：2016-09-26, 16:09:34

展开↯

#²¹⁴⁵

作者：广西南宁市

用js写的一个路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现路由</title>
</head>
<body>
    <a href=" ">white</a>
    <a href="#/green" >green</a>
    <a href="#/blue" >blue</a>
    <a href="#/yellow" >yellow</a>
</body>
</html>

<script>

    function Route(){
    }
    Route.prototype.open=function(route,callback){
        var arr={};
        arr[route]=callback;

        window.addEventListener('hashchange',function(){
            var temp=window.location.hash;
            for(var i in arr){
                if(i==temp.slice(1,temp.length)){
                    arr[i]();
                }
            }
        })
    }
    window.Route=new Route();


    function change(color){
        var body=document.getElementsByTagName('body')[0];
        body.style.backgroundColor=color;
        console.log(color);
    }
    
    Route.open('/',function(){
        change('');
    });
    Route.open('/green',function(){
        change('green');
    });
    Route.open('/blue',function(){
        change('blue');
    });
    Route.open('/yellow',function(){
        change('yellow');
    });

</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2016-09-26, 15:57:58

展开↯

#²¹⁴⁶

作者：广西南宁市

CSS隐藏元素的N种实现方式。
1. width:0;

光有高度是不行的，还得有宽度。缺点文字隐藏不了，可以加个color:#fff和背景颜色一样就ok了，障眼法，迷惑人的，其实内容还在，如果有文字的话，还是可以触发点击事件的，这种做法很多黑客就会利用在目标站点链接上加一个和背景颜色一样的让管理员发现不了。

2. height:0;

和上面一样,一个物体至少得有宽和高。

3. opacity:0;

元素还在，只是看不见而已。

4. position:absolute;left:-9999px;

元素还在，只是超出了屏幕范围。

5. text-index:-9999;

只能达到隐藏文字的效果，没有其他副作用。给页面添加logo图片，还想seo添加文字又不想显示这段文字，就可以使用这个方法。

6. z-index:-99999;

需要配合定位使用，层级太低导致我们无法看见这个元素，使用这个缺点还是很多的，首先就算你z-index:-9999了并且定位，但如果这个元素比后面的元素高了或者宽了，再着有文字一样还是可以看到这个元素。

代码如下：

<style>
#box{
width:100px;
height:100px;
background-color:red;
position:absolute;
z-index:-9999;
}
</style>
<div id="box">111111</div>
<div>为什么要这样</div>
7. overflow:hidden;

如果元素超出所设置的宽和高，剩下的部分就会被隐藏，如果想让整个元素隐藏，设置宽和高为0就行。

width:0px;
height:0px;
overflow:hidden;
8. visibility:hidden;

元素被隐藏，但是还占位置。

9. display:none;

元素被隐藏，并且不占位置。

10. background-color:#fff;

把元素的背景颜色设置成body的背景，障眼法。

11. max-width:0px;

和width:0px;原理一样。

12. max-height:0px;

和height:0;原理一样。

13. background-color:rgba(0,0,0,0);color:#fff;

把元素透明度设置成0，达到看不见的效果，和opacity原理一样。如果想让文字也看不见，给它一个障眼法就好了,或者font-size:0

14. font-size:0px;

隐藏文字的效果。

15. transform:translate(-9999px);

和left:-99999px;原理一样，把元素移出屏幕可视区。

16. transform:scale(0);

让元素的大小设置成0不就看不见了哈。

17. transform:skew(90deg);

让元素重和，看不见了。

18. margin-left:-9999px;

把元素移出屏幕可视区

19. -webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

把元素剪裁了。

文章：常用html、demo代码发表时间：2016-09-26, 15:44:43

展开↯

#²¹⁴⁷

作者：广西南宁市

项目中踩过的坑之-sessionStorage

总想写点什么，却不知道从何写起，那就从项目中踩过的坑开始吧，希望能给可能碰到相同问题的小伙伴一点帮助。

项目情景：

有一个id，要求通过当前网页打开一个新页面(不是当前页面)，并把id传给打开的新页面，然后新页面在初始化时候使用这个id，发送请求········。

解决方案：

第一个小伙伴选择了cookie，总所周知cookie可以在同源网页间共享。我建议他不要用，因为cookie在页面发送请求的时候都需要一同发送的，浪费带宽不好。

然后我骄傲的建议了他使用sessionStorage或者localStorage，出于偷懒目的~我让他选择了sessionStorage，关闭页面就自动清除，localStorage还需要调用removeItem进行清除。

小伙伴就使用了sessionStorage，哈哈，果然可以传给打开的新页面id信息，还没高兴多久，问题又来了，又有新的入口打开新的页面不需要传递id，这简单呀，就只要打开一个然后在新页面

使用完sessionStorage的id就清空好了，这样就不会出现只想打开新页面的时候还出现之前依据老id加载页面的情况了。想法是简单的，现实是残酷的，实际效果还是按照老的id加载的，为啥呀

然后就是各种网上查资料，这才发现自己是如此的天真，在三篇文章中看到如下内容，不知道如何引用，暂且copy过来吧，写文章的都是好人········

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

上面红色的字总结一下就是不同页面是无法使用sessionStorage的，可是为啥通过超链接或者window.open新页面的时候是可以传递sessionStorage的呀，感觉有点歪打正着的感觉······经过多次实验，发现了一个惊天秘密，打开的新页面的sessionStorage是通过原网页的sessionStroage复制传递过来的，也可以理解为新网页的sessionStorage是原网页的sessionStorage的复制出来的独立体，每个网页的sessionStorage都是一个独立的，原来是这样啊。哈哈，下面就简单了，只要用完就把原网页的sessionStorage清掉就好了哈。。。。。突然发现，想偷懒是不可能的了。。。。可是问题又来了，我咋知道啥时候新网页获取好sessionStorage，是不是有点想喷血的赶脚。。。。

然后我又骄傲的在原网页设置好sessionStorage的代码下面，使用了st=setTimeout(function(){ sessionStorage.removeItem(XXX);clearTimeout(st)//此处显示出个人修养和最起码的职业操守，鉴定完毕}，1000);

···········问题愉快的解决了，可是我还在回想，假如当初讲究一下使用cookie，或者当时不想偷懒，直接使用localStorage就木有这么多问题了吧，哎，世事无常，想偷懒反而花费更多的时间和精力，反而学到了很多东西，假如有啥更好的解决方法请在下方回复哈，希望我踩的这个坑可以给大家一些帮助。

文章：常用html、demo代码发表时间：2016-09-26, 15:30:23

展开↯

Records:2794 113/148 «‹109 110 111 112 113 114 115 116 117 ›»