发表于 | 分类于

声明变量注意：

1、声明变量时虽然可以不加var关键字，但是…

1
2
var stuname1 = “赵小臭”；
stuname2 = “凑凑”;

如果省略了var关键字，那么声明的就是“全局变量”，有可能造成“全局污染”。（建议每个变量前最好加上var）。
2、如果声明变量没有赋值的话，那么将自动赋值为underfined。

数据类型：

1、number类型（数字类型，表示32位整数，也可以表示64位的浮动数）

1
2
var num1 = 520;
var num2 = 13.14;

2、string类型（字符串类型）

1
2
var n1 = "520";
var n2 = "like"

3、boolean类型（布尔类型，仅有两个值：true和false，做算术运算时，true = 1，false= 0）

1
2
3
var result1 = true;//真
var result2 = false;//假
var result3 = "true";//string类型

4、undefinde类型（不存在该数据，未定义。场合：1、声明变量未赋值2、对象属性不存在）

代码调试

1
2
3
4
alert();//弹出框
console.log();//控制台打印输出
prompt ();弹出输入框
document.write();//文档页面输出内容

数据隐式转换

1、typeof（运算符，查看数据类型, 有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。）

1
2
console.log(typeof a);//'undefined'
console.log(typeof(true));//'boolean'

2、NaN(NaN属性代表一个“不是数字”的值)
Not a Number：不是一个数字
IsNaN();是（不是一个数字）
返回结果：true或false
true：不是一个数字
false：是一个数字
虽然 NaN 意味着“不是数字”，但是它的类型，不管你信不信，是 Number：

1
console.log(typeof NaN === "number");// logs "true"

NaN 和任何东西比较——甚至是它自己本身！——结果是false：

1
console.log(NaN === NaN);// logs "false"

3、总结

  1. 数字 + 字符串 ：将数字转换为字符串
  2. 数字 + boolean ：将 boolean 转换为 number类型
  3. 数字 + undefined ：结果为 NaN，NaN的类型为 number
  4. 字符串 + boolean ：将boolean 转换为 字符串
  5. boolean + boolean ：都转换成number在做相加运算
  6. 不同类型的数据在计算过程中会进行”自动转换”

数据强制转换

1、String();——将任意数据类型的数据转换为“字符串”

1
2
3
4
var num = 1314;
var result = String(num);
console.log(result);// logs 1314
console.log(typeof result);// logs string

2、parseInt();——将任意类型的数据转换为整数

1
2
3
4
5
6
var r1 = "520";
var result1 = parseInt(r1);
console.log(result1);// logs 520
var r2 = 13.14;
var result2 = parseInt(r2);
console.log(result2);// logs 13

3、parseFloat();——将指定数据转换为小数（浮点数）

1
2
3
4
5
6
var r1 = "5.20";
var result1 = parseFloat(r1);
console.log(result1);// logs 5.2
var r2 = "13ABC";
var result2 = parseFloat(r2);
console.log(result2);// logs 13

4、Number();——把一个string解析为number类型，如果待转换字符中包含非法字符，则返回NaN

1
2
3
4
5
6
var r1 = "5.20";
var result1 = Number(r1);
console.log(result1);// logs 5.2
var r2 = "13ABC";
var result2 = Number(r2);
console.log(result2);// logs NaN

发表于 | 分类于

HTML代码如下：

1
2
3
<img src="img/love.jpg" alt="" id="img">
<button id="btn_show">显示</button>
<button id="btn_hidden">隐藏</button>

JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    window.onload = function(){
        /*window表示窗口 onload是加载 意思是页面加载完毕后，才执行里面的js，所以可以放在顶端*/
        var img = document.gitElementById("img");
        var btn_show = document.gitElementById("btn_show");
        var btn_hidden = document.gitElementById("btn_hidden");

        btn_show.onclick = function(){
            img.style.display = "block";
        }
        /*点击显示按钮时，img的样式style的display属性赋值为"block"，下同理*/
        btn_hidden.onclick = function(){
            img.style.display = "none";
            /*display: none隐藏后的元素不占据任何空间*/
        }
    }
</script>

发表于 | 分类于

浮动产生的原因：

子级盒子对象使用了CSS中float属性，导致父级盒子对象不能被撑开。

浮动产出的副作用：

  1. 父级盒子对象的背景不能显示
  2. 父级盒子对象的边框不能撑开
  3. 父级盒子对象的margin和padding设置值不能正确显示

清除浮动的方法：

  1. 对父级设置适合CSS高度
  2. clear:both清除浮动

HTML代码如下：

1
2
3
4
5
<div class="fatherDiv">
    <div class="boyLeft">左浮动<div>
    <div class="boyRight">右浮动<div>
    <div calss="clear">
<div>

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fatherDiv {
    width: 168px; 
    background:red;
}
.boyLeft {
    float: left;
}
.boyRight {
    float: right;
}
/* 清除浮动代码 */
.clear {
    clear: both;
}
  1. 父级div定义overflow:hidden

HTML代码如下：

1
2
3
4
<div class="fatherDiv">
    <div class="boyLeft">左浮动<div>
    <div class="boyRight">右浮动<div>
<div>

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
.fatherDiv {
    width: 168px; 
    background:red; 
    overflow:hidden;/* 清除浮动代码 */
}
.boyLeft {
    float: left;
}
.boyRight {
    float: right;
}
  1. 使用伪元素:after清除浮动(缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout)

HTML代码如下：

1
2
3
4
<div class="fatherDiv">
    <div class="boyLeft">左浮动<div>
    <div class="boyRight">右浮动<div>
<div>

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.fatherDiv {
    width: 168px; 
    background:red; 
    zoom:1;/*IE浏览器的专有属性*/
}
.fatherDiv:after {
    /* 这三句必须写 */
    display:block;  /*变成块级元素*/
    clear:both;/*清除浮动*/
    /* 必须有这样写 */
    content:""; /*内容为空*/

    /* 这两句写不写无所谓 */
    visibility:hidden; /*将元素隐藏，但是在网页中该占的位置还是占着*/
    height:0;
}
.boyLeft {
    float: left;
}
.boyRight {
    float: right;
}

发表于 | 分类于

CSS中position 属性值：

  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  • relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
  • static：默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • inherit：规定应该从父元素继承 position 属性的值。

总结：

  1. 绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充(如果不存在一个有着position属性的父对象，那么就会以body为定位对象，按照浏览器的窗口进行定位)。
  2. 相对定位的元素仍然在文档流中，仍然占据着它本来占据的位置空间——虽然它现在已经不在本来的位置了（相对定位是相对于元素自己本身的位置）。
  3. 混合相对定位和绝对定位时，如果对一个父元素设置relative，而对它的一个子元素设置absolute,则子元素的绝对定位的参照物为父元素。
  4. fixed定位的参照物总是当前的文档（fixed总是以body为定位对象的，按照浏览器的窗口进行定位）。

发表于 | 分类于

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

  1. 创建博客目录

    1
    2
    $ hexo new [layout] <title>
    注：在命令中指定文章的布局（layout），默认为 post。

  2. 本地服务访问

    1
    2
    3
    4
    $ hexo clean		//清除缓存文件和已生成的静态文件
    $ hexo g		//生成静态文件（生成网站页面）
    $ hexo s		//启动本地服务（查看生成的网站）
    注：浏览器上输入localhost:4000查看效果

  3. 远程存储访问

    1
    2
    3
    4
    $ hexo clean		//清除缓存文件和已生成的静态文件
    $ hexo g		//部署之前预先生成静态文件
    $ hexo d		//文件生成后立即部署网站
    注：如果打开本地服务，需停止服务才能继续输入命令（停止服务快捷键Ctrl+c）

发表于 | 分类于

GitHub是用于版本控制和协作的代码托管平台。它可以让您和其他人在任何地方协同工作。

克隆线上仓库

  1. 在网页版GitHub上创建远程仓库
  2. 在磁盘上创建本地仓库文件夹
  3. 在本地仓库文件夹打开cmd操作界面进行命令行操作，把GitHub的线上仓库克隆到本地
    1
    2
    $ git clone https://github.com/ShawLive/vueDemo.git 
    注：https://github.com/ShawLive/vueDemo.git 表示我GitHub的线上仓库路径

上传本地文件

  1. 把要上传的文件拖拽到已克隆好的本地仓库中

  2. 查看准备提交的文件状态

    1
    $ git status

  3. 探测本地仓库的新增、修改、删除

    1
    2
    $ git add . 
    注：add空格后面有一点（ . ）

  4. 对你提交的内容进行描述

    1
    2
    $ git commit -m "readme" 
    注：双引号里填写的是你对提交的内容进行描述

  5. 上传文件

    1
    2
    3
    4
    $ git push 
    注：已配置GitHub的用户名和邮箱，可直接上传文件
    $ git push -u origin master  
    注：未配置GitHub的用户名和邮箱，此处需要你配置一下

发表于 | 分类于

DOS命令，是指DOS操作系统的命令，是一种面向磁盘的操作命令，主要包括目录操作类命令、磁盘操作类命令、文件操作类命令和其它命令。（注释：现在大家用的操作系统windows7、windows10和macOS都是图形化操作系统，在这些操作系统之前人们用的是DOS操作系统。）

  1. CD——改变当前目录

    1
    2
    格式：CD [子目录名]
    $ cd 你要进入的文件夹

  2. 盘符:——直接进入电脑分区盘

    1
    2
    格式：[盘符：]
    $ f: 直接进入电脑F盘

  3. CLS——清屏幕命令

    1
    2
    格式：CLS
    $ cls

  4. DIR——显示磁盘目录命令

    1
    2
    格式：[盘符][路径][/P][/W] DIR
    $ 你已进入的文件夹 dir

  5. mkdir——创建文件夹

    1
    2
    格式：mkdir [新建文件夹名]
    $ mkdir 新建文件夹名

发表于 | 分类于

粥于信，从前和以后我也喜欢的不得了。

“或许命运安排你们很多年前便是单独的世界，不需要有人站在柴门外轻敲，也不需要有人在院外冬树下呼喊打扰，但我不相信命运。”

“荒原一路同行，我要益极多，长安冬日并肩而游，很是欢喜。”

“雪夜红墙，你曾说过喜欢，我曾说过喜欢是不够的，而且最后证明确实是不够的，但至少你曾说过喜欢，我很喜欢。”

“长安城与大河国相距甚远，但不及荒原路途遥远，若真想来，若真想去，也便极近，日后你来看我，或我来看你，或他山云雾之中再见，都是人生欢愉事。”

“经历诸多事，我眼中河山已有新意，重逢那日，所书所写定然较今日更加壮阔，望你也多加努力，莫要令我失望。”

发表于 | 分类于

这里荒芜寸草不生，
后来你来这走了一遭，
奇迹般万物生长，
这里是我的心。

——这首小诗也可倒着读