学习笔记
(共17篇)
搜索到
17
篇与
学习笔记
的结果
-
『笔记』JavaScript基础学习笔记 1 前言学无止境，继续加油！代码块 {alert type="success"}程序是由一条一条语句构成的语句是按照自上而下的顺序一句一句执行的在JS中可以使用 {} 来为语句进行分组同一个 {} 中的语句称为一组语句，也叫代码块 代码块要么都执行，要么都不执行在代码块的后面不需要再编写 ; 结束JS中的代码块只具有分组的作用 ，没有其他用途 代码块内部的内容，在其外部是完全可见{/alert}{ alert("hello"); document.write('class="link"') } { var a = 10; alert("hello"); document.write('class="link"') } console.log("a = "+a)流程控制语句 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行一、条件判断语句在执行某个语句之前进行判断，成立才会执行语句，不成立则语句不执行 注意：条件判断语句不要使用赋值运算符 = 否则会直接返回true（一）语法一：if语句if(条件表达式){ 语句… }{alert type="success"}if 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后的语句，为false则不会执行if后的语句if语句只能控制紧随其后的那个语句 如果希望if语句可以控制多条语句，可以将这些语句放到一个代码块内代码块不是必须的，但是开发中建议编写,哪怕只有一条语句{/alert}var a = 20; if(a > 10 && a <= 20){ alert("a比10大,并且小于等于20"); }（二）语法二：if…else语句if(条件表达式){ 语句… }else{ 语句… }{alert type="success"}if…else 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后的语句，为false则会执行else后的语句{/alert}var age = 60; if(a >= 60){ alert("你已经退休了"); }else{ alert("你还要继续工作") }（三）语法三：if…else if…else语句if(条件表达式){ 语句… }else if{ 语句… }else if{ 语句… }else{ 语句… }{alert type="success"}if…else if…else 语句执行时，会从上到下依次对条件表达式进行求值判断 如果值为true则执行当前语句，如果值为false则继续向下判断只会有一个代码块被执行，一旦执行语句会直接结束{/alert}var age = 60; if(a > 100){ alert("活着挺没意思"); }else if(a > 60){ alert("你该退休了"); }else if(a > 50){ alert("你还要继续工作"); }else if(a > 17){ alert("你已经成年了"); }else{ alert("你还只是个孩子"); }4、prompt()函数{alert type="warning"}可以在页面弹出一个带有文本框的提示框用户可以在文本框中输入内容，该函数需要一个字符串作为参数prompt()函数的返回值都是字符串string类型{/alert}var score = prompt("参数"); alert(score);（四）实例练习：1、练习一输入0-100的成绩后进行判断并输出相应的结果var score = prompt("请输入成绩"); // 排除小于0大于100的值，同时排除非数字number类型的值 if(score >100 || score < 0 || isNaN(score)) { alert("毙了"); }else{ if(score ==100) { alert("奖励BMW"); }else if(score >= 80){ alert("奖励手机"); }else if(score >= 60){ alert("奖励参考书"); }else{ alert("啥都没有"); } }2、练习二输入三个数据后进行判断并输出相应的结果var height = prompt("请输入身高（cm）"); var money = prompt("请输入财富（万）"); var face = prompt("请输入颜值（px）"); if(height >180 && money > 1000 && face > 500) { alert("一定嫁"); }else if(height >180 || money > 1000 || face > 500) { alert("将就一下"); }}else{ alert("坚决不嫁"); }3、练习三输入三个数据后进行排序并从小到大输出var num1 = +prompt("请输入第一个数"); var num2 = +prompt("请输入第二个数"); var num3 = +prompt("请输入第三个数"); if(num1 < num2 && num1 < num3) { // num1最小，比较num2和num3 if(num2<num3){ alert(num1 + "，" +num2 +" ，"+num3); }else{ alert(num1 + "，" +num3 +" ，"+num2); } }else if(num2 < num1 && num2 < num3) { // num2最小，比较num1和num3 if(num1<num3){ alert(num2 + "，" +num1 +" ，"+num3); }else{ alert(num2 + "，" +num3 +" ，"+num1); } }else{ // num3最小，比较num1和num2 if(num1<num2){ alert(num3 + "，" +num1 +" ，"+num2); }else{ alert(num3 + "，" +num2 +" ，"+num1); } }二、条件分支语句条件分支语句也叫 switch 语句（一） switch 语法switch(条件表达式){ case 表达式: 语句… break; case 表达式: 语句… break; default: 语句… break; }(1)switch…case 语句执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较{alert type="success"}① 如果比较结果为true则从当前case处开始执行代码 ② 如果比较结果为false则从继续向下比较 ③ 如果所有的比较结果都为false，则执行default后的语句 {/alert}(2)使用 break; 可以退出switch语句(3)Switch语句和if语句有重复，可以互相代替var num = 1; switch(num){ case 1: console.log("壹") break; case 2: console.log("贰") break; default: console.log("数据不合法") break; }（二） 实例练习：对大于60分的输出“合格”，低于60分的输出“不合格”var score = 61; switch(parseInt(score/10)){ case 10: case 9: case 8: case 7: case 6: console.log("合格") break; default: console.log("不合格") break; }第二种方法var score = 61; switch(ttrue){ case sscore>=60: console.log("合格") break; default: console.log("不合格") break; }三、循环语句（一） while 循环 语法：while(条件表达式){ 语句…… }（1）while在语句执行时，先对条件表达式进行求值判断{alert type="success"}如果值为true，则执行循环体，循环体执行完毕后，继续对表达式进行判断如果为true则继续执行循环体如果值为false，则终止循环{/alert}（2）将条件表达式写死为true的循环叫做死循环，该循环不会停止，除非关闭浏览器（3）可以使用 break; 来终止循环while(true){ alert(n++); //判断n是否为10 if(n == 10){ //退出循环 break; } }（4）创建一个循环，往往需要三个步骤{alert type="error"}① 创建一个初始变量② 在循环中设置一个条件表达式③ 定义一个更新表达式，每次更新初始化变量{/alert}//① 创建一个初始变量 var n = 0; //② 在循环中设置一个条件表达式 while(n < 10){ //③ 定义一个更新表达式，每次更新初始化变量 document.write(n++ +'</br>'); }（二） do…while 循环 语法：do{ 语句…… }while(条件表达式);（1）do…while 循环会先执行循环体，再对while后的表达式进行判断{alert type="success"}如果值为true，则执行循环体，循环体执行完毕后，继续对表达式进行判断如果为true则继续执行循环体如果值为false，则终止循环{/alert}（2）do…while 可以保证循环体至少执行一次var n = 11; do{ document.write(n++ +'</br>'); }while(n <= 10);（3）死循环{callout color="#ff0000"} 尽量不要写死循环，会造成系统内存占用溢出，导致卡死 {/callout}（4）while 实战练习① 假如投资年利率为5%，试求从1000增长到5000需要多少年//定义一个变量，表示当前钱数 var money = 1000; //定义个一个计数器 var count = 0； while(money < 5000){ money *= 1.05; //使count自增 count++; } console.log("一共需要"+count+"年")②输入0-100的成绩后进行判断并输出相应的结果while(true){ var score = prompt("请输入成绩"); // 判断用户输入的值是否合法 if(score >=0 && score <= 100) { //满足该条件则证明用户的输入合法，退出循环 break; } alert("请输入有效的分数"); } if(score ==100) { alert("奖励BMW"); }else if(score >= 80){ alert("奖励手机"); }else if(score >= 60){ alert("奖励参考书"); }else{ alert("啥都没有"); }（三） for 循环 在for循环中，提供了专门的位置来放 初始化表达式 、 条件表达式 、 更新表达式 1、语法：for(①初始化表达式;②条件表达式;④更新表达式){ ③语句…… }（1）执行流程{alert type="error"}① 执行初始化表达式，初始化变量（只会执行一次）② 执行条件表达式，判断是否执行循环 如果为true则执行循环语句③，如果为false则终止循环 ④执行更新表达式，更新表达式执行完毕继续重复执行条件表达式②{/alert}（2）for循环中的三个表达式可以省略，也可以写在外部 如果在for循环中不写任何表达式，只写两个;;则变成死循环。 慎用！！！for(var i = 0 ; i < 10 ; i++ ){ alert(i); } for(;;){ alert("hello"); }2、实例练习（1）打印1-100之间所有奇数之和for(var i=1 , sum=0; i<=100 ; i++){ //判断i是否是奇数（不能被2整除的数就是奇数） //如果i除以2余数不为0则为奇数 if(i%2 != 0){ sum = sum+i; } }（2）打印1-100之间所有7的倍数的个数及总和for(var i=1 , sum=0 , count=0; i<=100 ; i++){ //如果i除以7余数为0则就是7的倍数 if(i%7 == 0){ sum += i; //使计数器自增 count++; } } console.log("总和为"+sum); // 输出总和 console.log("总数量为"+count); // 输出总和（3）打印所有水仙花数（一个3位数，它的每个位上的数字的3次幂之和等于它本身） 例如1^3+5^3+3^3=153//打印所有的三位数 for(var i=100; i<1000; i++){ //获取i的百位数字 var bai= parseInt(i/100); //获取十位数字 var shi= parseInt((i-bai*100)/10); //获取个位数字 var ge= i % 10; //判断i是否为水仙花数 if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){ console.log(i); } }（4）质数练习： 判断是否为质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）var num =prompt("请输入一个大于1的整数"); //判断这个值是否合法 if(num <= 1){ alert("该值不合法"); }else{ // 判断num是否是质数 for(var i=2 ; i<num ; i++){ // 判断num是否能被i整除 if(num % i == 0){ // 如果num能被i整除则说明该值一定不是质数（反向证明） flag = false; } } // 创建一个变量来保存当前的数的状态，默认当前num为质数 var flag = true; //如果num是质数则输出 if(flag){ alert(num+ "是质数"); }else{ alert("这个数不是质数"); } }3、嵌套的的 for循环 （1）外部循环执行1次，内部循环就执行5次//向页面中输出内容 for(var i=0; i<5; i++){ for(var n=0; n<i+1; n++){ document.write("星 "); } //输出一个换行 document.write("<br/>"); }（2）实例练习打印99乘法表<javascript> for(var i=1; i<=9; i++){ for(var n=1; n<=i; n++){ document.write("<span>"+ n+ "*" + i+ "=" + i*n +"</span>"); } } </javascript> <style> //添加span的属性 span{ display: inline-block; width: 80px; } </style>四、 break 和 continue1、break关键字{alert type="success"}（1）break关键字可以用来退出switch或循环语句（2）不能在 if语句 中使用break和continue关键词（3）break关键字会立即终止离它最近的循环语句（不影响外层循环）for(var i=0; i<5; i++){ console.log("外层循环"+i); for(var j=0; j<5; j++){ break; console.log("内层循环"+j); } }{/alert}（4）可以为循环语句创建一个label，来标识当前的循环label:循环语句使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的outer: for(var i=0; i<5; i++){ console.log("外层循环"+i); for(var j=0; j<5; j++){ break outer; console.log("内层循环"+j); } }2、continue关键词{alert type="success"}（1）continue关键词可以用来跳过当次循环（2）默认只会对离它最近的循环起作用（3） 与break用法类似 {/alert}outer: for(var i=0; i<5; i++){ for(var j=0; j<5; j++){ if(j == 1){ continue outer; } console.log("内层循环"+j); } console.log("外层循环"+i); }3、测试程序执行时间//开启计时器 console.time("test"); //停止计时器 console.timeEnd("test");4、 质数练习的改进 质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）{alert type="success"}可以通过 Math.sqrt() 对一个数进行开方{/alert}//开启计时器 console.time("test"); for(var i=2; i<1000; i++){ var flag = true; for(var j=2; j<=Math.sqrt(i); j++){ if(i%j==0){ flag = false; //一旦进入判断，则证明i不可能位质数了，此时循环没有再执行的意义 //可以使用break来结束循环 break; } } if(flag){ console.log(i); } } //停止计时器 console.timeEnd("test");
-
『笔记』JavaScript基础学习笔记 0 JS简介JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向 对象、命令式、声明式、函数式 编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。JS基础语法从上至下按行顺序执行<script type="text/javascript"> alert("警告"); //弹出警告框 document.write("在文档输出内容"); //在body中输出内容 document：文档 console.log("控制台输出内容"); //向控制台中输出内容 </script>JS编写的位置1、可以直接编写到标签的onclick属性中<!--可以直接编写到标签的onclick属性中 -当点击该属性时，js代码才会执行 --> <button onclick="alert('点击执行')"> <!--可以直接编写到超链接的href属性中 -当点击该超链接时，js代码才会执行 --> <a herf="javascript:alert('超链接内的JS代码');">可以点击的超链接</a> <a herf="javascript:;">不可点击的超链接</a>2、可以将JS编写到script标签中<script> alert("script标签中的代码") </script>3、可以将js代码编写到外部js文件中，再通过script标签引入<script type="text/javascript" src="js/script.js"></script>注意： script标签一旦用于引入外部文件了，就不能再编写代码，即使写了浏览器也会忽略 如果需要，可以再创建一个新的script标签用于编写内部代码JS基本语法<script type="text/javascript"> /* 多行注释：注释的内容不会被执行，但是在源代码中查看 可以通过注释来对代码进行一些简单的调试 */ // 单行注释，只注释//后的内容，换行即无效 /* 1、JS中严格区分大小写 2、JS中每一条语句以分号（;）结尾 -如果不写分号，浏览器会自动补齐，但是会消耗系统资源 而且有些时候会加错分号导致错误，所以在开发中分号必须写 3、JS中会忽略多个空格和换行 */ </script>字面量和变量字面量：都是一些不可改变的值 比如：1 2 3 4 等 字面量都是可以直接使用，但是一般不会直接使用字面量变量：可以用来保存字面量，变量的值是可以改变的 -变量更加方便使用，开发中通常通过变量保存一个字面量 -可以通过变量对字面量进行描述，例如 var age = 18;声明变量：在js中使用var关键字来声明一个变量// 声明变量 var a; // 为变量赋值 a = 123; //声明与赋值同时进行 var a = 123; 标识符在js中所有可以自主命名的都可以称为标识符例如：变量名、函数名、属性名都属于标识符命名一个标识符时需要遵守以下规则 1、标识符中可以含有字母、数字、_、$ 2、标识符不能以数字开头 3、标识符不能使用ES中的关键字或保留字 4、一般使用驼峰命名法：首字母小写，每个单词开头字母大写，其他字母小写。 例如：xxxYyyZzz JS底层保存标识符时是采用的Unicode编码，所以理论上所有utf-8中含有的内容都可以作为标识符数据类型数据类型指的就是字面量的类型在JS中一共有六种数据类型{alert type="success"}String 字符串Number 数字Boolean 布尔值Null 空值Undefined 未定义Object 对象{/alert}其中String、Number、Boolean、Null、Undefine属于基本数据类型，而Object属于引用数据类型一、String字符串在JS中字符串需要使用引号引起来使用单引号或者双引号都可以，但是不能混着用引号不能嵌套：双引号内不能放双引号，单引号内不能放单引号在字符串中可以使用作为转义字符{alert type="info"}当表示一些特殊符号时可以使用进行转义" 表示 "n 表示换行t 制表符\ 表示\{/alert}var str = "hello"; str = '我说："你好"'; alert(str); //输出变量值，值为 我说：“你好” alert("str"); //输出字面量str，值为 str 二、Number数字在JS中所有的数字都是Number类型，包括整数和浮点数（小数点后的数）JS中可以便是数字的最大值：Number.MAX_VALUE如果使用Number表示的数字超过了最大值，则会返回一个Infinity{alert type="warning"}Infinity表示正无穷-Infinity表示负无穷{/alert}使用typeof检查Infinity会返回Number大于0的最小值为：Number.Min_VALUENaN是一个特殊的数字，表示Not A Number使用typeof检查NaN也会返回Number//数字123 var a = 123; //字符串123 var b= "123"; 可以使用typeof检查变量类型 -语法：typeof 变量 -检查字符串时会返回string -检查数值时会返回number console.log(typeof a); console.log(typeof b);{callout color="#ff0000"}在JS中整数的运算基本可以保证精确如果使用JS进行浮点元素运算，可能得到一个不精确的结果{/callout}var a = 1; var b = 2; var c = a+b; console.log(c);三、Boolean布尔值布尔值只有两个，主要用来做逻辑判断{alert type="success"}true -表示真false -表示假{/alert}四、Null和UndefinedNull类型的值只有一个，就是Null{alert type="success"} null这个值专门用来表示一个为空的对象使用typeof检查null值时，会返回object{/alert}Undefined类型的值只有一个，就是undefined{alert type="success"} 当声明一个变量，但是不给变量赋值时，他的值就是undefined使用typeof检查undefined值时，会返回undefined{/alert}强制类型转换将一个数据类型强制转换为其他数据类型类型转换主要指，将其他数据类型转换为String Number Boolean一、将其他数值类型转换为String{alert type="success"} 1、调用被转换数据类型的toString()方法 - 该方法不会影响到原变量，它会将转换的结果返回 - Null和Undefined两个值没有toString方法，会报错 {/alert}var a = 123; a.toString(); a = a.toString(); console.log(a); console.log(typeof a);{alert type="success"} 2、调用String()函数，并将被转换的数据作为参数传递给函数 - 使用String()函数做强制类型转换时， 对于Number和Boolean实际上就是调用的toString()方法 对于null和undefined就不会调用toString()方法 会将null直接转换为"null",将undefined直接转换为"undefined"{/alert}var a = 123; a = String(a); console.log(a); console.log(typeof a);二、将其他数值类型转换为Number1、使用Number()函数{alert type="success"} 字符串转换为数字 ① 如果是纯数字的字符串，直接转换为数字 ② 如果字符串中有非数字内容，则转换为NaN ③ 如果是一个空串或者是一个全是空格的字符串，则转换为0{/alert}var a = "123"; var a = "abc"; var a = " "; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} 布尔值转换为数字 ① true 转为 1 ② false 转为 0{/alert}var a = true; var a = false; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} null转换为数字时为 0undefined转换为数字时为 NaN{/alert}var a = null; var b = undefined; a = Number(a); b = Number(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b);2、字符串专用转换方法{alert type="success"} parseInt()将一个字符串转换为一个整数 parseInt()可以将一个字符串中的有效整数内容取出来，然后转换为NumberparseFloaf()将一个字符串转换为一个浮点数 parseFloaf()可以将一个字符串中的有效浮点数内容取出来，然后转换为Number如果对非String使用parseInt()和parseFloaf()，会先将其转换为String再换为Number{/alert}var a = "123px"; var b = "123.321px"; a = parseInt(a); b = parseFloaf(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b); 其他进制数字 {card-describe title="在JS中"}如果需要表示16进制的数字，则需要以0x开头如果需要表示8进制的数字，则需要以0开头如果需要表示2进制的数字，则需要以0b开头（某些浏览器会不支持）可以在parseInt()中传递一个第二个参数，用来指定数字的进制{/card-describe}var a = "070"; a = parseInt(a,8); // 制定解析为8进制 console.log(a); console.log(typeof a);三、将其他数值类型转换为Boolean1、 直接使用Boolean()函数{alert type="success"}数字转Boolean，除了0和NaN，其余都是true字符串转Boolean，除了空字符串都是truenull和undefined转Boolean都为false对象也会转换为true{/alert}var a = 0; var b = " "; var c = null; var c = undefined; a = Boolean(a); b = Boolean(b); c = Boolean(c); console.log(a); console.log(b); console.log(c); console.log(typeof a);2、可以为任意一个数据类型取两次反!!，将其转换为布尔值var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值运算符运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果tpyeof就是运算符，可以用来获得一个值的类型tpyeof会将该值的类型以字符串的形式返回，如number、string、boolean、undefined、object等var a = 123; var result = typeof a; console.log(result); console.log(typeof a);{nextPage/}一、算数运算符（1）当对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算（2）任何数和NaN进行运算都会输出NaN（3）+ 可以对两个值进行加法运算，并将结果返回{alert type="success"} ① 如果对两个字符串进行加法运算，会将两个字符串拼成一个字符串，然后再将结果返回 ② 任何值和字符串做加法运算，都会现转换为字符串然后再和字符串做拼串操作 ③ 为任意的数据类型加一个空字符串""即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际也是调用的String() ④ 加法从左向右运算，会根据数据类型进行转换后再运算 {/alert}var a = 123; a + 1; var result = a + true; // true会转换为1，输出为124 var result = a + NaN; // 输出为NaN var result = "I" + "Love" + "You"; // 输出为ILoveYou var result = 123 + "1"; // 输出为1231 console.log(result); console.log(typeof result); console.log("a=" + a); // 输出为a=124(4) - 可以对两个值进行减法运算，并将结果返回(5) * 可以对两个值进行乘法运算，并将结果返回(6) / 可以对两个值进行除法运算，并将结果返回任何值做 - * / 运算时都会自动转换为Number可以通过为一个值 -0 *1 /1 将其转换为Number，原理和Number()函数一样var a = "123"; var b = a - 0; console.log(b); console.log(typeof b);(7) % 取模运算（取余数）var a = 9; var b = a % 3; var c = a % 4; var d = a % 5; console.log(b); // 输出9/3的余数为0 console.log(c); // 输出9/4的余数为1 console.log(d); // 输出9/5的余数为4 console.log(typeof b);二、一元运算符一元运算符，只需要一个操作数(1) + 正号正号不会对数字产生任何影响(2) - 负号负号可以对数字进行负号的取反(3) 对于非Number类型的值{alert type="success"}会先将其转换为Number，然后再运算可以对一个其他的数据类型使用 + 来将其转换为Number，原理和Number()函数一样{/alert}var a = true; var b = -a; console.log(b); // true转换为1，输出为-1 console.log(typeof b);三、自增和自减(1) 自增 ++ {alert type="success"}通过使用自增可以使变量在自身的基础上增加 1一个变量自增以后，原变量的值会立即自增 1自增分为两种： 后++ （a++）和 前++ （++a）{/alert}var a = 1; a++; console.log(a); // 输出为2 console.log(typeof a);无论是 前++ 还是 后++ ，都会立即使原变量的值自增1 不同的是a++和++a的值不一样a++ 的值等于原变量的值（自增前的值）++a 的值等于原变量的新值（自增后的值）var a = 1; console.log(a++) ; // 输出为1 console.log(++a) ; // 输出为2 // a++为1，++a是在a++的基础上自增所以为3，a相当于原变量a已经在自身基础上自增两次所以也为3 var b = a++ + ++a +a ; console.log("b = "+b) ; // 输出为1+3+3=7(1) 自减 -- {alert type="success"}通过使用自减可以使变量在自身的基础上减少 1一个变量自减以后，原变量的值会立即自减 1自减分为两种： 后-- （a--）和 前-- （--a）{/alert}var a = 10; a--; console.log(a); // 输出为9 console.log(typeof a);无论是 前-- 还是 后-- ，都会立即使原变量的值自减 1 不同的是a--和--a的值不一样a-- 的值等于原变量的值（自减前的值）--a 的值等于原变量的新值（自减后的值）var a = 10; console.log(a--) ; // 输出为10 console.log(--a) ; // 输出为9 // a--为10，--a是在a--的基础上自减所以为8，a相当于原变量a已经在自身基础上自减两次所以也为8 var b = a-- + --a +a ; console.log("b = "+b) ; // 输出为10+8+8=26练习：var n1=10, n2=20; var n = n1++; // n1 = 11 n1++ = 10 console.log('n='+n); // 10 console.log('n1='+n1); // 11 n = ++n1; // n1 = 12 ++n1 = 12 console.log('n='+n); // 12 console.log('n1='+n1); // 12 n = n2--; // n2 = 19 n2-- = 20 console.log('n='+n); // 20 console.log('n1='+n2); // 19 n = --n2; // n2 = 18 --n2 = 18 console.log('n='+n); // 18 console.log('n1='+n2); // 18四、逻辑运算符{callout color="#00fbff"} 布尔值的逻辑运算 {/callout}JS中提供了三种运算符(1) ! 非，可以用来对一个值进行 非 运算{alert type="success"}非运算就是对一个布尔值Boolean进行取反操作true变false，false变true{/alert}var a = true; a = !a; console.log(a); // 输出为false{alert type="success"}如果对一个值进行两次取反，值不会变如果对非布尔值进行非运算，会先将其转换为布尔值再进行取反 可以为任意一个数据类型取两次反!!将其转换为布尔值，可以用来将其他数据类型转换为布尔值{/alert}var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值(2) && 与，可以对符号两侧的值进行 与 运算并返回结果{alert type="success"}两个值中只要有一个值为false就会返回false两个值都为true才会返回trueJS中如果第一个值为false，就不会检查第二个值，直接返回false如果两端的值都为true，返回true var a = true && true; console.log(a); // 输出为true 只要有一个false，都返回false var a = true && false; console.log(a); // 输出为false{/alert}(3) || 或，可以对符号两侧的值进行 或 运算并返回结果{alert type="success"}两个值都是false，则返回false两个值中只要有一个true，则返回trueJS中如果第一个值为true，就不会检查第二个值，直接返回true如果两端的值都为false，返回false var a = false || false; console.log(a); // 输出为false 只要有一个true，都返回true var a = true || false; console.log(a); // 输出为true{/alert}{callout color="#00fbff"} 非布尔值的 与 、 或 运算 {/callout}对非布尔值进行 与 、 或 运算时会先将其转换为布尔值，然后再运算，并且返回原值(1) && 与 运算：找false{alert type="success"}如果第一个值为true，则必然返回第二个值如果第一个值为false，则直接返回第一个值var a = 1 && 3; console.log(a); // 输出为3 var a = NaN && 0; console.log(a); // 输出为NaN{/alert}(2) || 或 运算：找true{alert type="success"}如果第一个值为true，则直接返回第一个值如果第一个值为false，则直接返回第二个值var a = 1 || 3; console.log(a); // 输出为1 var a = NaN || 0; console.log(a); // 输出为0{/alert}五、赋值运算符(1) = 可以将符号右侧的值赋值给左侧的变量var a = 3; console.log(a); // 输出为3(2) += 可以将符号右侧的值相加后再赋值给左侧的变量(3) -= 可以将符号右侧的值相减后再赋值给左侧的变量(4) *= 可以将符号右侧的值相乘后再赋值给左侧的变量(5) /= 可以将符号右侧的值相除后再赋值给左侧的变量(6) %= 可以将符号右侧的值取模（取余数）后再赋值给左侧的变量var a = 10; a += 5; // 等价于a = a + 5 输出为15 a -= 5; // 等价于a = a - 5 输出为5 a *= 5; // 等价于a = a * 5 输出为50 a /= 5; // 等价于a = a / 5 输出为2 a %= 5; // 等价于a = a % 5 取模（取余数）输出为0 console.log(a); 六、关系运算符通过关系运算符可以比较两个值之间的大小关系{alert type="success"}如果关系成立会返回true，如果关系不成立则返回false对于非数字进行比较时，会将其转换为数字再进行比较 任何值和NaN比较都是false如果符号两侧都是字符串时，不会将其转换为数字进行比较，而会比较两个字符串的Unicode编码 比较字符编码时会一位一位进行比较，如果两位一样则比较下一位，第一位与第一位比，第二位于第二位比，以此类推console.log( "a" > "b"); // 输出false console.log( "abc" > "aa"); // 输出true{/alert}（1） > 大于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 > 5; //返回true a = 5 > 5; //返回false a = 5 > 10; //返回false console.log(a); （2） >= 大于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 >= 5; //返回true a = 5 >= 5; //返回true a = 5 >= 10; //返回false console.log(a); （3） < 小于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 < 5; //返回false a = 5 < 5; //返回false a = 5 < 10; //返回true console.log(a); （4） <= 小于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 <= 5; //返回false a = 5 <= 5; //返回true a = 5 <= 10; //返回true console.log(a); Unicode编码 在JS中的字符串中使用转义字符输入Unicode编码\u四位编码 数字为16进制console.log( "\u2620"); // 输出 ☠ 在网页中使用Unicode编码&#编码 数字为10进制，必须先从16进制转换为10进制<h1 style="font-size: 50px;">☠</h1> // 输出 ☠ 七、相等运算符(1) == 相等运算相等运算符用来比较两个值是否相等，相等返回true，否则返回false{alert type="success"}当使用 == 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较undefined 衍生自 null，所以这两个值比较时会返回trueNaN 不和任何值相等，包括它本身可以通过isNaN()函数来判断一个值是否是NaN 如果该值是NaN则返回true，否则返回false{/alert}console.log( 1 == 1 ); // 输出true var a = 10 console.log( a == 4 ); // 输出false console.log( "1" == 1 ); // 输出true console.log( null == 0 ); // 输出false console.log( undefined == null ); // 输出true console.log( NaN == NaN ); // 输出false var b = NaN; console.log(isNaN(b)); // 输出true(2) != 不相等运算相等运算符用来比较两个值是否不相等，不相等返回true，否则返回false{alert type="success"}当使用 != 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较 {/alert}console.log( 2 != 1 ); // 输出true var a = 4 console.log( a != 4 ); // 输出false console.log( "1" != 1 ); // 输出false(3) === 全等运算相等运算符用来比较两个值是否全等，全等返回true，否则返回false{alert type="success"}当使用 === 比较两个值时，如果两个值类型不同，则直接返回false{/alert}console.log( 1 === 1 ); // 输出true console.log( "1" === 1 ); // 输出false(4) !== 不全等运算相等运算符用来比较两个值是否不全等，不全等返回true，否则返回false{alert type="success"}当使用 !== 比较两个值时，如果两个值类型不同，则直接返回true{/alert}console.log( 1 !== 1 ); // 输出false console.log( "1" !== 1 ); // 输出true八、条件运算符条件运算符也叫三元运算符语法： 条件表达式?语句1:语句2条件运算符在执行时，首先对条件表达式进行求值 如果该值为true则执行语句1并返回执行结果，否则执行语句2并返回执行结果 如果条件表达式的求值结果是一个非布尔值，会先将其转换为布尔值再执行下一步true?alert("语句1"):alert("语句1"); // 返回语句1 false?alert("语句1"):alert("语句1"); // 返回语句1 var a = 30; var b = 20; a > b ?alert("a大"):alert("b大"); // 返回a大 var a = 30; var b = 20; var c = 40; var max = a > b ? a : b; max = max > c ? max : c; var max = a > b ? (a >c ? a :c) : (b > c ? b : c) // 不推荐，不易阅读 console.log( "最大值max = "+max); // 谁大输出谁 "hello"?alert("语句1"):alert("语句1"); // hello转换为true然后执行输出语句1，逗号运算符使用 ， 可以分割多个语句，可以使用， 逗号运算符同时声明多个变量并进行赋值var a , b , c; var a=1 , b=2 , c=3; alert(b);九、运算符的优先级{alert type="success"}在JS中运算符也有优先级，比如：先乘除后加减在JS中有一个运算符的优先级标准表，优先级越高越优先计算，如果优先级相同，则从左向右计算{/alert}最后因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ 再水一篇文章 :@(装大款) ）
-
『笔记』『代码』CSS3 Flex 布局详解文档 网页布局（layout）是 CSS 的一个重点应用布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上 -webkit 前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size 。三、容器的属性以下6个属性设置在容器上。{card-describe title=" flex-direction "}flex-wrapflex-flowjustify-contentalign-itemsalign-content{/card-describe}3.1 flex-direction属性flex-direction 属性决定主轴的方向（即项目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; }它可能有4个值。row （默认值）：主轴为水平方向，起点在左端。row-reverse ：主轴为水平方向，起点在右端。column ：主轴为垂直方向，起点在上沿。column-reverse ：主轴为垂直方向，起点在下沿。3.2 flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。3.3 flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。.box { flex-flow: <flex-direction> || <flex-wrap>; }3.4 justify-content属性justify-content 属性定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; }它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start （默认值）：左对齐flex-end ：右对齐center ： 居中space-between ：两端对齐，项目之间的间隔都相等。space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。.box { align-items: flex-start | flex-end | center | baseline | stretch; }它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。flex-start ：交叉轴的起点对齐。flex-end ：交叉轴的终点对齐。center ：交叉轴的中点对齐。baseline : 项目的第一行文字的基线对齐。stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }该属性可能取6个值。flex-start ：与交叉轴的起点对齐。flex-end ：与交叉轴的终点对齐。center ：与交叉轴的中点对齐。space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch （默认值）：轴线占满整个交叉轴。四、项目的属性以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>; }4.2 flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item { flex-grow: <number>; /* default 0 */ }如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。.item { flex-shrink: <number>; /* default 1 */ }如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。4.4 flex-basis属性flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */ }它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }该属性可能取6个值，除了auto，其他都与 align-items 属性完全一致。转自： Lovestu
-
『原创』『代码』为你的博客添加悬浮打赏按钮（按钮切换） 前言博客搭建已经有一段时间了，文章也写了不少了（虽然有些是扒的:@(狂汗)XD）但是前几天有人发消息说觉得我的文章帮到他了，想要打赏，却没有打赏途径找了很久，除了几个插件就没有我心仪的，但是插件又要下载上传，太麻烦了 XD所以我就用自学的HTML写了一个悬浮打赏按钮，添加到文章点赞旁边，效果很好，我非常满意，所以现在分享出来成果展示{tabs}{tabs-pane label="第一版"}{/tabs-pane}{tabs-pane label="第二版"}{/tabs-pane}{tabs-pane label="切换版"}{/tabs-pane}{/tabs}版本升级当我把这个功能做好后，发给要打赏我的人时，Ta却说打赏不了，在微信中总是识别成支付宝的链接 :@(吐血倒地) 然后我自己试了一下，发现确实会识别错位，不知道是不是支付宝的二维码更要强一些，识别十次九次都是支付宝链接，打赏的人都不想给我打赏了，气死我了 :@(内伤) {dotted startColor="#ff6c6c" endColor="#1989fa"/}然后我就想到了点击切换二维码，说干就干，首先我用css试了很久，发现光用css已经实现不了我的需求了然后我就开始琢磨JS来实现，开始用了if语句来切换 img 的 url ，确实可以切换了，但是if语句只能对应一个按钮，如果别人不知道按钮可以切换，那就仅显示一个二维码突然想到，既然用js了，那为什么不直接根据不同的 input 按钮给 img 赋值呢，然后我就写了三段赋值语句（学艺不精啊） :@(尴尬) 然后就实现了一个按钮切换一个二维码了{dotted startColor="#ff6c6c" endColor="#1989fa"/}再发给要打赏我的人，结果.... :@(无奈) 只打赏了0.01元 :@(扇耳光)代码分享其实这个功能很简单，其实就是CSS的 :hover 来实现的我使用的是Joe主题，所以我直接添加在点赞旁边，让它看看起来跟整个主题更协调首先找到Joe主题目录中的点赞文件 public/handle.php 再在点赞按钮后添加以下代码隐藏内容，请前往内页查看详情添加到 public/handle.php 的倒数第二行保存后，刷新网站，打赏按钮就出现了，试着把鼠标移上去看看效果吧！切换版下载
-
『原创』『教程』给你的Typecho博客侧边栏加一个恋爱计时（修复夜间模式样式） 前言前几天在翻主页的时候，看到 Nots 分享了他和他女朋友的甜蜜日常。然后注意到了他网站侧栏的小部件，有一个他和他女朋友恋爱的计时模块，很感兴趣我刚好也想给自己女朋友制作一点小浪漫，所以就着手把他分享的代码搬了过来，做了一些优化紧急修复刚测试时发现夜间模式下，会直接透明显示，没有浮块显示我估计是主题作者忘记给自定义模块设置背景色了，所以显示很不协调，就像这样所以我又调用了Joe主题的CSS样式，让这个模块会根据日间模式和夜间模式改变背景颜色，达到和其他模块样式统一顺便修改了这个模块的文字颜色，夜间模式下不会再是一片漆黑了（PE端同时修复）成果展示{tabs}{tabs-pane label="PC端"}{/tabs-pane}{tabs-pane label="手机端"}{/tabs-pane}{/tabs}实现方法本教程仅适用于typecho且使用了Joe主题的小伙伴，其他主题或者博客的小伙伴请自行发挥你们的才能{tabs}{tabs-pane label="PC端"}{callout color="#f0ad4e"}PC端代码：（样式我已经根据Joe主题适配好了，不喜欢的自己修改）{/callout}{mtitle title="在文章最后下载"/}如果是使用的 Joe for typecho ，那就很简单了，直接在后台的主题设置里登录你的网站后台，进入 外观设置-网站外观-设置外观（必须使用Joe主题）-侧栏设置找到 自定义侧边栏模块-PC 保存好后，再刷新自己的网站就可以看到了！{/tabs-pane}{tabs-pane label="PE端"}{callout color="#ab74e4"}PE端代码：（因为是后端代码，所以我就直接套用了Joe主题的样式）{/callout}{mtitle title="在文章最后下载"/}手机端的侧栏要复杂一点，但你都进入我的博客了，那我肯定要手把手把你教会了:@(得意)如果你懂一些 HTML，那就很容易能找到PE端的侧栏文件PE端的样式配置在 Joe/public/header.php里那我们直接在 header.php 添加代码就行了，找到PE端侧栏配置位置然后找到想要加入的位置，可以加在作者信息下，也可以加在网站统计下我是加在了作者信息下，可以更为直接显示，也更明显，主要是女朋友能够一眼就看到:@(得意)当然这里添加的代码跟上面的是有一点区别的，我试了几次，发现同样的代码会出现PE端显示，而PC端文字不显示测试了很多次，终于被我发现，原来是 JS 的 id 重复了，导致PHP后端的id占用了前端的id而因为PE端的代码是直接加在源代码里的，所以导致PC端文字不显示了因此我又对代码进行了优化，没错，从发现bug-测试bug-修改bug又磨了我一小时:@(喷血)注意：因为是修改了后端代码，每次更新Joe的主题时都会被覆盖，所以每次更新主题后记得去 header.php 重新添加代码希望Joe主题作者后期能够添加自定义PE侧栏的功能，或者不要更新太频繁 :@(扇耳光){/tabs-pane}{/tabs}结语教程到此结束，祝各位早日找到心仪的另一半，幸福美满！感谢 Nots 分享的代码。代码下载
