评论 - lizhenqiu blog

#²¹²⁹

作者：广西南宁市

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

展开↯

#²¹⁴¹

作者：广西南宁市

js弹出框、对话框、提示框、弹窗总结
js中最常见的框

 //弹出对话框并输出一段提示信息  
    function ale() {  
        //弹出一个对话框  
        alert("提示信息！");  
  
    }

Run code

Cut to clipboard

//弹出一个询问框，有确定和取消按钮  
    function firm() {  
        //利用对话框返回的值 （true 或者 false）  
        if (confirm("你确定提交吗？")) {  
            alert("点击了确定");  
        }  
        else {  
            alert("点击了取消");  
        }  
  
    }

Run code

Cut to clipboard

//弹出一个输入框，输入一段文字，可以提交  
    function prom() {  
        var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，  
  
        //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
        if (name)//如果返回的有内容  
        {  
            alert("欢迎您：" + name)  
        }  
  
    }

Run code

Cut to clipboard

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

展开↯

#²¹⁴²

作者：广西南宁市

一.冒泡排序

var arr1=[3,9,2,7,0,8,4];
for(var i=0;i<arr1.length;i++){
　　for(var j=i+1;j<arr1.length;j++){
　　　　var temp=0;
　　　　if(arr1[i]>arr1[j]){
　　　　　　temp=arr1[i];
　　　　　　arr1[i]=arr1[j];
　　　　　　arr1[j]=temp;
　　　　}
　　}
}
alert(arr1);

Run code

Cut to clipboard

二.快速排序

var a=[3,5,0,9,2,7,5];
function quickSort(arr){
　　var len=a.length;
　　if(len<=1) return arr;

　　function sort(low,height){
　　　　var pivot=a[low];
　　　　var i=low,j=height,t;
　　　　if(i>j) return false;
　　　　while(i!=j){
　　　　　　while(a[j]>=pivot&&i<j){
　　　　　　　　j--;
　　　　　　}
　　　　　　while(a[i]<=pivot&&i<j){
　　　　　　　　i++;
　　　　　　}
　　　　　　if(i<j){//把比pivot大的换到右边，小的换到左边
　　　　　　　　t=a[i];
　　　　　　　　a[i]=a[j];
　　　　　　　　a[j]=t;
　　　　　　}
　　　　}
　　　　//此时i和j指向同一个数字，把这个数字和pivot交换
　　　　a[low]=a[i];
　　　　a[i]=pivot;
　　　　//递归：把pivot左边的数进行一次排序，右边的数进行一次排序
　　　　sort(low,i-1);
　　　　sort(i+1,height);
　　}
　　//调用这个排序的函数
　　sort(0,len-1);
　　return a;
}
alert(quickSort(a));

Run code

Cut to clipboard

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-24, 17:48:15

展开↯

#²¹⁴³

作者：广西南宁市

javascript数组全排列,数组元素所有组合

function permute(input) {
  var permArr = [],
  usedChars = [];
  function main(input){
    var i, ch;
    for (i = 0; i < input.length; i++) {
      ch = input.splice(i, 1)[0];
      usedChars.push(ch);
      if (input.length == 0) {
        permArr.push(usedChars.slice());
      }
      main(input);
      input.splice(i, 0, ch);
      usedChars.pop();
    }
    return permArr
  }
  return main(input);
};
console.log(permute([5, 3, 7, 1]));

Run code

Cut to clipboard

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-23, 16:42:25

展开↯

#²¹⁴⁴

作者：广西南宁市

不骄不躁，不拘泥于此，时刻保持一颗归零的心，做必然之事

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

展开↯

#²¹⁴⁵

作者：广西南宁市

javascript数据类型理解整理

起因：关于数据类型这块，自己看了很多遍相关的资料，每次查看和实践都有一些体会和理解；但又感到没有理解透，总是差一点，最近又在看这块的内容，加上最近的积累，做个相关笔记

ECMAScript数据类型：
1. 5中简单数据类型：String Number Boolean Undefined Null
2. 1种复杂数据类型：Object，本质是一组无序的名值对组成的，eg：Array JSON ...
【理解】对于JS数据方面的操作，都是数据类型之间的转换和操作，只要针对的攻克每一种数据类型，在逐步的融合，JS水平会有一个很好的进步；

typeof操作符
1. 这是个操作符，不是方法
2. 之所以typeof存在，是因为ECMAScript是松散类型的语言；松散类型就是变量可以是任意数据类型，可以任意转换（不推荐）

typeof(String) => string => 如果这个值是字符串
typeof(Number) => number => 如果这个值是数值
typeof(Boolean) => boolean => 如果这个值是布尔值
typeof(Undefined) => undefined => 如果这个值未定义
typeof(Object) => object => 如果这个值是对象或null
typeof(Function) => function => 如果这个值是函数

Run code

Cut to clipboard

一、 Undefined类型

当【声明】一个变量，但是【未初始化】，这个变量的值就是undefined
一直以来的困惑：
1. 对【未初始化】的变量执行typeof操作符，返回undefined值
2. 对【未声明】的变量执行typeof操作符，返回undefined值

var message;
console.log(typeof message); // undefined
console.log(typeof age); // undefined

Run code

Cut to clipboard

困惑：导致自己一直不知道该怎么解决这个问题，书上标注的解决办法是：显式的使用undefined来给没有初始化的变量进行赋值，每次实践的结果和书上说的有出入
感悟：自己刚刚结合了jQuery上的$.type()的工具函数，和自己写的一些例子

var message;
// jQuery中$.type()工具函数
console.log($.type(message)); // undefined
console.log($.type(age)); // 【报错】age is not defined
// 自己理解写的例子
console.log(message==undefined); // true
console.log(age==undefined); // 【报错】age is not defined

Run code

Cut to clipboard

所以，无论从$.type()的角度看，验证结果；还是从例子中查看结果，都可以看出，对于【未声明】和【未初始化】分离和验证都不是难题；
【注】对于$.type()的原理实现，是否是我例子中的方法，我还没有验证；当然这不是重点，重点是，妈妈再也不担心我分不清【未声明】和【未初始化】了；
【项目中】在实际的项目中，肯定是不允许有报错行为的，这样大大的影响了程序的进一步运行；所以，用下面这种方式：

var message;
// jQuery中$.type()工具函数
console.log($.type(message)); // undefined
try{
    console.log($.type(age)); // 不报错了
}catch(e){
    console.log("age is not defined！");
};
// 自己理解写的例子
console.log(message==undefined); // true
try{
    console.log(age==undefined); // 不报错了
}catch(e){
    console.log("age is not defined！");
};

Run code

Cut to clipboard

二、Null类型

1.从逻辑的角度，null值表示一个空对象指针
2.typeof(null)，返回object
3.如果定义的变量未来准备用来保存对象，最好将其初始化成null
只要检测出来不是null就可以进行下一步操作：
if(ele != null){ //要执行的代码 }
4.undefined值是派生自null值，因此：console.log(undefined == null); //true

console.log(undefined == null); // true
// 从JS角度
console.log(typeof undefined); // undefined
console.log(typeof null); // object
// 从jQuery角度
console.log($.type(undefined)); // undefined
console.log($.type(null)); // null

Run code

Cut to clipboard

三、Boolean类型

1.有两个字面量：true and false
2.区分大小写，只有全小写形式，属于Boolean类型，其余的只是标识符
3.转型函数Boolean()，将任意类型的字符转换成Boolean类型
转换规则：
数据类型 => true => false

String类型 => 任意非空字符串 => ""(空字符串)
Number类型 => => 任意非零数字值(包括无穷大) => 0和NaN
Boolean类型 => true => false
Object类型 => 任意对象 => null
Undefined类型 => n/a(or N/A)，意思是不适用(not applicable) => undefined

Run code

Cut to clipboard

四、Number类型

1.数值字面量表示方式：十进制、八进制（严格模式不支持，直接报错）、十六进制
八进制：第一位必须是0，然后是八进制数字序列（0~7）
十六进制：前两位必须是0x，后跟十六进制数字序列（0~9及A~F），字母（A~F）大小写都可以
算术计算时：所有以八进制和十六进制表示的数值最终都将被转换成十进制数值
正零 == 负零（+0 == -0）

2.浮点数值
就是数值中包含一个小数点，小数点后必须至少有一位数字
小数点前面可以没有整数，但是不推荐（.1）
保存浮点数值所需的内存空间是保存整数的两倍，所以下面这些浮点数，会当做整数处理

1. => 1
10.0 => 10

Run code

Cut to clipboard

对于极大极小的数值，可以用e表示法（即科学计数法）来表示浮点数值；e前面的数值*10的指数次幂，幂是e后面的数值

3.125e7 == 31250000
0.00000000000000003 == 3e-17

Run code

Cut to clipboard

默认情况下，ECMAScript会将那些小数点后面带有6个零以上的浮点数值转换成e表示法
浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数

0.1 + 0.2 != 0.3
0.1 + 0.2 != 0.30000000000000004

Run code

Cut to clipboard

【注】浮点数值计算有舍入误差，其它基于IEEE754数值的浮点数计算语言都有这类通病

3.数值范围
由于内存的限制，ECMAScript不能保存世界上所有的数值

最小值：Number.MIN_VALUE
最大值：Number.MAX_VALUE

Run code

Cut to clipboard

最值具体等于多少数值，不同的浏览器有不同的结果，具体以实际为准
数值计算结果超出最值范围，将被自动转换成特殊的正值是Infinity（正无穷）值，负值是-Infinity（负无穷）
判断某个数值是不是有穷数值（是不是位于最小值和最大值之间），可以使用isFinish()函数，结果是有穷的返回true，否则false

var num = Number.MIN_VALUE + Number.MAX_VALUE;
console.log(num); // false

Run code

Cut to clipboard

Infinity和-Infinity保存只

Number.POSITIVE_INFINITY == Infinity
Number.NEGATIVE_INFINITY == -Infinity

Run code

Cut to clipboard

4.NaN
NaN，即非数值（Not a Number）是一个特殊的数值，当数值计算出现错误的时候，返回NaN，如：任何数除以0会返回NaN，这样不影响其它代码的执行
两个特点：
--- 1.任何涉及NaN的操作（NaN/10）都会返回NaN，这个特性在多步计算中有可能导致问题
--- 2.NaN与任何值都不相等，包括NaN本身

console.log(NaN == NaN); // false

Run code

Cut to clipboard

isNaN()函数，这个函数接收一个参数，该参数可以是任何类型；意思是是否【不是数值】
当参数不是数值时，返回true；当参数是数值时，返回false

console.log(isNaN("10")); // false
console.log(isNaN("blue")); //true

Run code

Cut to clipboard

isNaN()也适用于对象，首先调用对象的valueof()方法=？是否可以转换为数值，如果不能，在调用toString()方法

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-23, 16:33:54

展开↯

#²¹⁴⁶

作者：广西南宁市

平年闰年判断

function isLeapYear(year){ 
return (new Date(year,2,0)).getDate()==29;
}

Run code

Cut to clipboard

文章：Google方程式 WWWDOT – GOOGLE = DOTCOM 发表时间：2016-09-23, 16:17:19

展开↯

#²¹⁴⁷

作者：广西南宁市

确定天数

function sureDay(year,month){
return (new Date(year,month,0)).getDate()
}

Run code

Cut to clipboard

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

展开↯

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