六六丶
(共79篇)
搜索到
79
篇与
六六丶
的结果
-
『笔记』JavaScript基础学习笔记 1 > **前言** 学无止境，继续加油！ > # **代码块 ** {alert type="success"} - 程序是由一条一条语句构成的 - 语句是按照自上而下的顺序一句一句执行的 - 在JS中可以使用 `{}` 来为语句进行分组 - 同一个 `{}` 中的语句称为一组语句，也叫代码块 `代码块要么都执行，要么都不执行` - 在代码块的后面不需要再编写 `;` 结束 - JS中的代码块只具有分组的作用 ，没有其他用途 `代码块内部的内容，在其外部是完全可见` {/alert} ```javascript { alert("hello"); document.write('class="link"') } { var a = 10; alert("hello"); document.write('class="link"') } console.log("a = "+a) ``` > # **流程控制语句 ** 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行 #### **一、条件判断语句** 在执行某个语句之前进行判断，成立才会执行语句，不成立则语句不执行 **注意：条件判断语句不要使用赋值运算符 `=` 否则会直接返回true** （一）语法一：`if语句` ```javascript if(条件表达式){ 语句… } ``` {alert type="success"} - `if` 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后的语句，为false则不会执行if后的语句 - if语句只能控制紧随其后的那个语句 `如果希望if语句可以控制多条语句，可以将这些语句放到一个代码块内` - **代码块不是必须的，但是开发中建议编写,哪怕只有一条语句** {/alert} ```javascript var a = 20; if(a > 10 && a = 60){ alert("你已经退休了"); }else{ alert("你还要继续工作") } ``` （三）语法三：`if…else if…else语句` ```javascript if(条件表达式){ 语句… }else if{ 语句… }else if{ 语句… }else{ 语句… } ``` {alert type="success"} - `if…else if…else` 语句执行时，会从上到下依次对条件表达式进行求值判断 `如果值为true则执行当前语句，如果值为false则继续向下判断` - 只会有一个代码块被执行，一旦执行语句会直接结束 {/alert} ```javascript 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} ```javascript var score = prompt("参数"); alert(score); ``` **（四）实例练习：** 1、练习一 输入0-100的成绩后进行判断并输出相应的结果 ```javascript 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、练习二 输入三个数据后进行判断并输出相应的结果 ```javascript 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、练习三 输入三个数据后进行排序并从小到大输出 ```javascript var num1 = +prompt("请输入第一个数"); var num2 = +prompt("请输入第二个数"); var num3 = +prompt("请输入第三个数"); if(num1 < num2 && num1 < num3) { // num1最小，比较num2和num3 if(num2= 60){ alert("奖励参考书"); }else{ alert("啥都没有"); } ``` **（三） `for` 循环** 在for循环中，提供了专门的位置来放 `初始化表达式` 、 `条件表达式` 、 `更新表达式` 1、语法： ```javascript for(①初始化表达式;②条件表达式;④更新表达式){ ③语句…… } ``` （1）执行流程 {alert type="error"} ① 执行初始化表达式，初始化变量（只会执行一次） ② 执行条件表达式，判断是否执行循环 `如果为true则执行循环语句③，如果为false则终止循环` ④执行更新表达式，更新表达式执行完毕继续重复执行条件表达式② {/alert} （2）for循环中的三个表达式可以省略，也可以写在外部 `如果在for循环中不写任何表达式，只写两个;;则变成死循环。 慎用！！！` ```javascript for(var i = 0 ; i < 10 ; i++ ){ alert(i); } for(;;){ alert("hello"); } ``` 2、实例练习 （1）打印1-100之间所有奇数之和 ```javascript for(var i=1 , sum=0; i
-
『笔记』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基础语法 **从上至下按行顺序执行** ```javascript alert("警告"); //弹出警告框 document.write("在文档输出内容"); //在body中输出内容 document：文档 console.log("控制台输出内容"); //向控制台中输出内容 ``` > ## JS编写的位置 1、可以直接编写到标签的onclick属性中 ```javascript 可以点击的超链接 不可点击的超链接 ``` 2、可以将JS编写到script标签中 ```javascript alert("script标签中的代码") ``` 3、可以将js代码编写到外部js文件中，再通过script标签引入 ```javascript ``` **注意：** script标签一旦用于引入外部文件了，就不能再编写代码，即使写了浏览器也会忽略 如果需要，可以再创建一个新的script标签用于编写内部代码 > ## JS基本语法 ```javascript /* 多行注释：注释的内容不会被执行，但是在源代码中查看 可以通过注释来对代码进行一些简单的调试 */ // 单行注释，只注释//后的内容，换行即无效 /* 1、JS中严格区分大小写 2、JS中每一条语句以分号（;）结尾 -如果不写分号，浏览器会自动补齐，但是会消耗系统资源 而且有些时候会加错分号导致错误，所以在开发中分号必须写 3、JS中会忽略多个空格和换行 */ ``` > ## 字面量和变量 字面量：都是一些不可改变的值 比如：1 2 3 4 等 字面量都是可以直接使用，但是一般不会直接使用字面量 变量：可以用来保存字面量，变量的值是可以改变的 -变量更加方便使用，开发中通常通过变量保存一个字面量 -可以通过变量对字面量进行描述，例如 var age = 18; 声明变量：在js中使用var关键字来声明一个变量 ```javascript // 声明变量 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} ```javascript 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_VALUE NaN是一个特殊的数字，表示Not A Number - 使用typeof检查NaN也会返回Number ```javascript //数字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} ```javascript var a = 1; var b = 2; var c = a+b; console.log(c); ``` #### 三、Boolean布尔值 布尔值只有两个，主要用来做逻辑判断 {alert type="success"} - true -表示真 - false -表示假 {/alert} #### 四、Null和Undefined Null类型的值只有一个，就是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} ```javascript 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} ```javascript var a = 123; a = String(a); console.log(a); console.log(typeof a); ``` #### 二、将其他数值类型转换为Number 1、使用Number()函数 {alert type="success"} - 字符串转换为数字 ① 如果是纯数字的字符串，直接转换为数字 ② 如果字符串中有非数字内容，则转换为NaN ③ 如果是一个空串或者是一个全是空格的字符串，则转换为0 {/alert} ```javascript 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} ```javascript var a = true; var a = false; a = Number(a); console.log(a); console.log(typeof a); ``` {alert type="success"} - null转换为数字时为 0 - undefined转换为数字时为 NaN {/alert} ```javascript 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()可以将一个字符串中的有效整数内容取出来，然后转换为Number` - parseFloaf()将一个字符串转换为一个浮点数 `parseFloaf()可以将一个字符串中的有效浮点数内容取出来，然后转换为Number` - 如果对非String使用parseInt()和parseFloaf()，会先将其转换为String再换为Number {/alert} ```javascript 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} ```javascript var a = "070"; a = parseInt(a,8); // 制定解析为8进制 console.log(a); console.log(typeof a); ``` #### 三、将其他数值类型转换为Boolean 1、 直接使用Boolean()函数 {alert type="success"} - 数字转Boolean，除了0和NaN，其余都是true - 字符串转Boolean，除了空字符串都是true - null和undefined转Boolean都为false - 对象也会转换为true {/alert} ```javascript 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、可以为任意一个数据类型取两次反!!，将其转换为布尔值 ```javascript var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值 ``` > ## 运算符 运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果 - tpyeof就是运算符，可以用来获得一个值的类型 - tpyeof会将该值的类型以字符串的形式返回，如number、string、boolean、undefined、object等 ```javascript 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} ```javascript 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()函数一样 ```javascript var a = "123"; var b = a - 0; console.log(b); console.log(typeof b); ``` (7) `%` 取模运算（取余数） ```javascript 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} ```javascript 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} ```javascript var a = 1; a++; console.log(a); // 输出为2 console.log(typeof a); ``` - 无论是 `前++` 还是 `后++` ，都会立即使原变量的值自增1 `不同的是a++和++a的值不一样` - **`a++` 的值等于原变量的值（自增前的值）** - **`++a` 的值等于原变量的新值（自增后的值）** ```javascript 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} ```javascript var a = 10; a--; console.log(a); // 输出为9 console.log(typeof a); ``` - 无论是 `前--` 还是 `后--` ，都会立即使原变量的值自减 1 `不同的是a--和--a的值不一样` - **`a--` 的值等于原变量的值（自减前的值）** - **`--a` 的值等于原变量的新值（自减后的值）** ```javascript 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 ``` **练习：** ```javascript 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} ```javascript var a = true; a = !a; console.log(a); // 输出为false ``` {alert type="success"} - 如果对一个值进行两次取反，值不会变 - 如果对非布尔值进行非运算，会先将其转换为布尔值再进行取反 `可以为任意一个数据类型取两次反!!将其转换为布尔值，可以用来将其他数据类型转换为布尔值` {/alert} ```javascript var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值 ``` (2) `&&` 与，可以对符号两侧的值进行 `与` 运算并返回结果 {alert type="success"} - 两个值中只要有一个值为false就会返回false - 两个值都为true才会返回true - JS中如果第一个值为false，就不会检查第二个值，直接返回false ```javascript 如果两端的值都为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，则返回true - JS中如果第一个值为true，就不会检查第二个值，直接返回true ```javascript 如果两端的值都为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，则直接返回第一个值 ```javascript var a = 1 && 3; console.log(a); // 输出为3 var a = NaN && 0; console.log(a); // 输出为NaN ``` {/alert} (2) `||` 或 运算：找true {alert type="success"} - 如果第一个值为true，则直接返回第一个值 - 如果第一个值为false，则直接返回第二个值 ```javascript var a = 1 || 3; console.log(a); // 输出为1 var a = NaN || 0; console.log(a); // 输出为0 ``` {/alert} #### **五、赋值运算符** (1) `=` 可以将符号右侧的值赋值给左侧的变量 ```javascript var a = 3; console.log(a); // 输出为3 ``` (2) `+=` 可以将符号右侧的值相加后再赋值给左侧的变量 (3) `-=` 可以将符号右侧的值相减后再赋值给左侧的变量 (4) `*=` 可以将符号右侧的值相乘后再赋值给左侧的变量 (5) `/=` 可以将符号右侧的值相除后再赋值给左侧的变量 (6) `%=` 可以将符号右侧的值取模（取余数）后再赋值给左侧的变量 ```javascript 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编码** `比较字符编码时会一位一位进行比较，如果两位一样则比较下一位，第一位与第一位比，第二位于第二位比，以此类推` ```javascript console.log( "a" > "b"); // 输出false console.log( "abc" > "aa"); // 输出true ``` {/alert} （1） `>` 大于号 {alert type="info"} - 判断符号左侧的值是否大于右侧的值 - 如果关系成立则返回true，如果关系不成立则返回false {/alert} ```javascript var a = 10 > 5; //返回true a = 5 > 5; //返回false a = 5 > 10; //返回false console.log(a); ``` （2） `>=` 大于等于号 {alert type="info"} - 判断符号左侧的值是否小于 `或` 等于右侧的值 - 如果关系成立则返回true，如果关系不成立则返回false {/alert} ```javascript var a = 10 >= 5; //返回true a = 5 >= 5; //返回true a = 5 >= 10; //返回false console.log(a); ``` （3） `c ? a :c) : (b > c ? b : c) // 不推荐，不易阅读 console.log( "最大值max = "+max); // 谁大输出谁 "hello"?alert("语句1"):alert("语句1"); // hello转换为true然后执行输出语句1 ``` **`，`逗号运算符** 使用 `，` 可以分割多个语句，可以使用`，` 逗号运算符同时声明多个变量并进行赋值 ```javascript var a , b , c; var a=1 , b=2 , c=3; alert(b); ``` #### **九、运算符的优先级** {alert type="success"} - 在JS中运算符也有优先级，比如：先乘除后加减 - 在JS中有一个运算符的优先级标准表，优先级越高越优先计算，如果优先级相同，则从左向右计算 {/alert}  > 最后 因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ ~~再水一篇文章~~ :@(装大款) ）
-
『原创』『教程』Typecho后台开关进入网站维护状态 > ## 前言 因为经常捣鼓网站，有时候会直接在服务器上热更新，这样会导致用户体验很不好 所以就想到了设置一个维护通知页面，告知访问的用户正在维护，防止用户因无法访问放弃访问本站。 > ## 成果展示 {tabs} {tabs-pane label="PC端展示"}  {/tabs-pane} {tabs-pane label="PE端展示"}  {/tabs-pane} {tabs-pane label="后台展示"}  {/tabs-pane} {/tabs} > ## 教程分享 本教程基于Joe主题，当然其他Typecho主题也可以使用，代码是固定的，但是方法是灵活的，期待您的灵感大爆发！ ### 一、添加后台开关 在主题目录下的 `functions.php` 里添加以下代码（因为我引入了自定义配置文件，所以我是放在 `public/custom.php` 文件里的） 隐藏内容，请前往内页查看详情 ### 二、添加全局跳转 因为我一般更新都是整站屏蔽的，所以我这里是添加的全局跳转，直接在`public/header.php`顶部添加以下代码 如果你只想某些页面跳转，比如只想跳转首页，你可以在`index.php`添加下面的代码 隐藏内容，请前往内页查看详情 ### 三、上传维护页面 下载下面的文件，上传到Typecho主程序的 `根目录` ，记得把文件名改为 `Maintain.html` （区分大小写） **注意：不是 主题 根目录** **注意：不是 主题 根目录** **注意：不是 主题 根目录** 隐藏内容，请前往内页查看详情 到此就大功告成了，去后台打开全站维护后再访问你的网站试试吧！
-
『原创』『教程』在Linux中搭建Windows环境 > 前言 众所周知，搭建网站最好用是Linux系统，但是有一些Windows软件没法运行在Linux服务器上，就很痛苦 经过我千辛万苦的寻找，我终于找到可以在Linux上运行的Windows环境了 虽然版本比较老，功能也很少，但是能够勉强运行大部分Windows软件，比如QQ机器人、自动运行的小软件等 > 成果展示 {tabs} {tabs-pane label="机器人"}  {/tabs-pane} {tabs-pane label="爬图"}  {/tabs-pane} {/tabs} > 教程 建议安装宝塔面板，如果实在无法安装宝塔面板又想拥有Windows环境的话也可以，但是一定要仔细看教程 #### 一、宝塔面板下安装教程 **1、安装环境** 宝塔面板-软件商店中安装 Docker管理器  **2、开始搭建** （1）第一步 安装镜像文件，在终端ssh输入以下指令 隐藏内容，请前往内页查看详情 （2）第二步 打开Docker管理器 点击容器列表-创建容器 {tabs} {tabs-pane label="创建容器"}  {/tabs-pane} {tabs-pane label="参数解释"} 绑定IP： ** `0.0.0.0 `** 端口映射： ** `8080 TCP 8080` ** 网页中的端口 ** TCP不可修改 ** （需要在服务器放行该端口） 目录映射： `/home/user 读写 /bot` 左边是容器目录（虚拟机目录），右边是当前服务器目录（必须是绝对目录，从根目录开始） 环境变量： ```php name=xiaolz #镜像名字，请勿修改 VNC_PASS=12345678 #VNC密码 VNC_SCREEN=1024x768 #VNC屏幕分辨率 ``` 内存配额： `1000` 你的服务器的内存大小，越大越好 CPU权重： `100` 填写0-100的数值，越大越好 执行命令： `/bin/bash` 默认，可不填 {/tabs-pane} {/tabs} 点击保存即可，**不要忘了点击端口映射和目录映射旁边的小加号** **3、进入界面** 浏览器输入 `你服务器的IP地址:8080` 假设你的服务器IP为 127.0.0.1 那么你的访问地址就是 127.0.0.1:8080  进入后，点击连接，输入密码即可进入Wine系统  **4、添加文件或软件** 打开你 ** `2 — 第二步` ** 中填写的服务器目录，把文件或者软件上传到该目录，然后在虚拟机中直接运行就可以了  #### 二、非宝塔面板下安装教程 **1、安装Docker** 如果你没法安装宝塔面板，那就直接在ssh输入以下代码安装Docker 安装命令： ```php yum install -y git docker wget ``` 也可以使用国内 daocloud 一键安装命令： ```php curl -sSL https://get.daocloud.io/docker | sh ``` `启动Docker` ```php systemctl start docker ``` **2、下载docker镜像** 隐藏内容，请前往内页查看详情 **3、启动虚拟机** 隐藏内容，请前往内页查看详情 其中 `VNC_PASS` 为VNC(远程桌面)连接密码,必填 其中 `VNC_SCREEN` 为VNC(远程桌面)分辨率,必填 其中 `8080` 为VNC(远程桌面)端口 其中 `/bot/` 为虚拟机在当前服务器映射的目录 启动后可以使用 `docker ps` 查看Docker下运行的目录  **4、进入界面** 登录虚拟机远程桌面跟上面一样，直接打开 `服务器IP:8080` 就行
-
『转载』『教程』利用宝塔面板和PHP实现Typecho定时推送链接到百度 > 前言 网站SEO是一个网站的痛点，虽然没有很好的SEO技术，但是最基础的百度推送还是要做的 这里就是一个实现定时自动推送你网站sitemap到百度的方法，管不管用谁也说不准，但是做了总比不做的好 #### 一、 编写PHP文件 在网站根目录创建一个php文件添加以下内容 隐藏内容，请前往内页查看详情 #### 二、添加自己的推送接口 想必大家都知道在百度站长添加网站吧，这里就不赘述了 百度站长平台：https://ziyuan.baidu.com/dashboard/index 在百度站长中打开自己的网站（ **注意：** 这里的网站一定要跟你推送的网站一致 ）  复制推送接口到上面的代码里，然后在浏览器中访问 `你的域名/文件名.php` ,出现以下结果说明配置成功  #### 三、实现定时自动推送 接下来就是定时推送到百度 首先，打开 `宝塔面板-计划任务` ，然后添加计划任务 任务类型：访问URL 任务名称：随意填写 执行周期：随意（建议6小时，一天4次） URL地址：你的域名/文件名.php（例如：https://www.fuuuy.cn/pages/baidu/baidu.php）  然后点击执行  出现以下代码就表示成功了 
-
『转载』『插件』B站来源的Typecho追番页插件 > **前言** 前段时间，在浏览其他博客时发现一个很有意思的插件，可以显示B站的追番动态 放在个人介绍页，可以让别人看到你在追哪些番，更容易找到志趣相投的好朋友 > **成果展示**  > **教程** 首先下载这个插件，插件我进行了一些美化，主要是美化了上/下一页的按钮（其他的挺好看的，没必要美化） 隐藏内容，请前往内页查看详情 然后放到你的typecho的插件目录 `根目录/usr/plugins` 里解压，文件夹名称一定为 `BiliBangumi` 接着进入网站后台启用并设置相应的数据就可以了  > **UID和cookie获取** ####一、UID获取  ####二、cookie获取 1、打开你的B站个人主页 2、F12检查源码  3、点Network 4、F5刷新网页 5、找到你的UID，点击 `Headers` 再点击 `Request Headers` 就可以看到你的cookie了 6、创建独立页面模板 在 `主题根目录` 下创建一个php文件，名字随意，然后打开粘贴以下代码并保存即可 {hide} ```php
-
『活动』热烈庆祝建党100周年  > **热烈庆祝建党100周年** 2021年，中国共产党迎来百年华诞。从建党的开天辟地，到新中国成立的改天换地，到改革开放的翻天覆地，再到党的十八大以来党和国家事业取得历史性成就、发生历史性变革，中国共产党带领中国人民砥砺奋进，走向胜利。百年征程波澜壮阔，百年大党风华正茂。 一百年的暴风骤雨，伟大的中国共产党高举指路的明灯，为我们指引前进的方向！ 一百年的惊涛骇浪，伟大的中国共产党执掌前进的舵把，为我们把握正确的航向！ !!! 祝福伟大的中国共产党，100岁生日快乐！ !!! > **一次次为信仰点亮光芒！这是穿越百年不变的理想！** {bilibili bvid="BV17U4y1V7UF" page=""/}
-
『原创』『教程』博客主题修改记录（长期不定时更新） > ## 前言 最近一直在摸鱼，也好久没更新博客了，今天登陆上一看，发现博客自动更新出问题了。 简单了解了一下，发现是自己改动的东西太多了，服务器本地主题和作者github内容重复了 所以只好重新下载作者的主题，再把自己改的加上去，但是突然发现自己已经记不太清楚修改了哪些了 所以打算摸鱼写一篇文章来记录自己博客的修改内容，毕竟好记性不如烂笔头嘛 > ## 修改目录 主要修改的内容 {timeline} {timeline-item color="#19be6b"} **PC端＆PE端侧栏自定义** [恋爱计时](../archives/139.html) {/timeline-item} {timeline-item color="#19be6b"} **文章底部端** [打赏按钮](../archives/199.html) {/timeline-item} {timeline-item color="#19be6b"} **PC端＆PE端** [登录按钮](../archives/223.html) {/timeline-item} {timeline-item color="#19be6b"} **PC端** [评论弹幕](../archives/289.html) {/timeline-item} {timeline-item color="#19be6b"} **关于页** [我的追番](../archives/319.html) **页面** {/timeline-item} {timeline-item color="#19be6b"} **[QQ自动跳转浏览器](../archives/250.html)** {/timeline-item} {timeline-item color="#19be6b"} **复制内容时添加转载说明** {/timeline-item} {timeline-item color="#19be6b"} **修改了恋爱计时，将其内嵌到主题了** {/timeline-item} {timeline-item color="#19be6b"} **修改了时光机的发表权限为贡献者以上** {/timeline-item} {timeline-item color="#19be6b"} **修改了评论上传图片的尺寸和清晰度** {/timeline-item} {timeline-item color="#19be6b"} **添加了评论上传图片的审核功能** {/timeline-item} {timeline-item color="#19be6b"} **新增了评论可选小电视和QQ表情包** {/timeline-item} {timeline-item color="#19be6b"} **添加了全站的JS广告及广告位** {/timeline-item} {/timeline} > ## 补充教程 因为在学习了一些Typecho的后端设置后，觉得直接把所有自定义功能放在一起，然后通过 `functions.php` 调用更为方便 所以就有了以下教程，虽然也是在其他人那里嫖来的，但是根据自己的理解也进行了举一反三，所以在此记录一下 ### （一）引入自定义配置文件 #### 1、创建自定义文件 首先在主题根目录或者/public目录下创建一个 `custom.php` 文件（文件名可自定义） **内容包含在 ``内**  #### 2、引入配置文件 接着在根目录的 `functions.php` 文件内引入自定义配置文件 {tabs} {tabs-pane label="代码"} ```php // 引入自定义设置 require_once("public/custom.php"); ``` {/tabs-pane} {tabs-pane label="添加位置"} 放在 `functions.php` 的倒数第二行，只要放在 `function themeConfig($form){}` 里面就行了。  {/tabs-pane} {/tabs} #### 3、添加tabs 最后在根目录的 `functions.php` 文件的外观设置tabs里再加一个自定义配置 {tabs} {tabs-pane label="代码"} ```php 自定义设置 ``` {/tabs-pane} {tabs-pane label="添加位置"} 以Joe主题为例  {/tabs-pane} {/tabs} 这样就可以引入自定义配置文件了  ### （二）引入自定义JS和CSS文件 #### 1、引入到主题框架 直接在 `Joe/public/include.php` 插入以下代码即可 ```php
-
『转载』『教程』Typecho的Joe主题添加评论弹幕功能（限PC） > **前言** 主要是结合自己实践，总结遇到的问题和做个备份 > **成果展示** {tabs} {tabs-pane label="前端"}  {/tabs-pane} {tabs-pane label="后台"}  {/tabs-pane} {/tabs} #### **一、修改header.php文件** 新增代码，文件路径：usr/themes/Joe/public/header.php #####（一）第一段 {tabs} {tabs-pane label="放在最上面"} ```php
-
『笔记』『代码』CSS3 Flex 布局详解文档  > 网页布局（layout）是 CSS 的一个重点应用  布局的传统解决方案，基于 [盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) ，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。  2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法。 ## 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 ```html .box{ display: flex; } ``` 行内元素也可以使用 Flex 布局。 ```html .box{ display: inline-flex; } ``` Webkit 内核的浏览器，必须加上 `-webkit` 前缀。 ```html .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-wrap - flex-flow - justify-content - align-items - align-content {/card-describe} ### 3.1 flex-direction属性 `flex-direction` 属性决定主轴的方向（即项目的排列方向）。 ```html .box { flex-direction: row | row-reverse | column | column-reverse; } ```  它可能有4个值。 - `row` （默认值）：主轴为水平方向，起点在左端。 - `row-reverse` ：主轴为水平方向，起点在右端。 - `column` ：主轴为垂直方向，起点在上沿。 - `column-reverse` ：主轴为垂直方向，起点在下沿。 ### 3.2 flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。 `flex-wrap` 属性定义，如果一条轴线排不下，如何换行。  ```html .box{ flex-wrap: nowrap | wrap | wrap-reverse; } ``` 它可能取三个值。 （1）nowrap（默认）：不换行。  （2）wrap：换行，第一行在上方。  （3）wrap-reverse：换行，第一行在下方。  ### 3.3 flex-flow `flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式，默认值为 `row nowrap` 。 ```html .box { flex-flow: || ; } ``` ### 3.4 justify-content属性 `justify-content` 属性定义了项目在主轴上的对齐方式。 ```html .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属性定义项目在交叉轴上如何对齐。 ```html .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属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 ```html .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个属性设置在项目上。 - `order` - `flex-grow` - `flex-shrink` - `flex-basis` - `flex` - `align-self` ### 4.1 order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 ```html .item { order: ; } ```  ### 4.2 flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 ```html .item { flex-grow: ; /* default 0 */ } ```  如果所有项目的 `flex-grow` 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 `flex-grow` 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 ### 4.3 flex-shrink属性 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 ```html .item { flex-shrink: ; /* default 1 */ } ```  如果所有项目的 `flex-shrink` 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 `flex-shrink` 属性为0，其他项目都为1，则空间不足时，前者不缩小。 **负值对该属性无效。** ### 4.4 flex-basis属性 `flex-basis` 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 `auto` ，即项目的本来大小。 ```html .item { flex-basis: | auto; /* default auto */ } ``` 它可以设为跟 `width` 或 `height` 属性一样的值（比如350px），则项目将占据固定空间。 ### 4.5 flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 ```html .item { flex: none | [ ? || ] } ``` 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 ### 4.6 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 ```html .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ```  该属性可能取6个值，除了auto，其他都与 `align-items` 属性完全一致。 转自： [Lovestu](https://www.lovestu.com/cssflex.html)
-
『转载』『教程』Typecho的Joe主题新增QQ打开自动跳转到浏览器 > ## 前言 最近QQ抽风，很多站长的网站都被屏蔽白了，我的也不例外 而且很多人上午解了下午又白，所以我就想做一个跳转，跳转到浏览器访问 然后看到执念有教程，就直接搬过来了，也就当做个备份吧 > ## 效果图 {tabs} {tabs-pane label="后台"}  {/tabs-pane} {tabs-pane label="跳转"}  {/tabs-pane} {/tabs} > ## 修改步骤 ### 一、修改functions.php文件 新增如下代码；文件路径： `usr/themes/Joe/functions.php` 如果创建了 `custom.php` 就放在 custom.php 里 隐藏内容，请前往内页查看详情  ### 二、修改include.php文件 路径如下： `usr/themes/Joe/public/include.php` ，在最顶部新增 隐藏内容，请前往内页查看详情  ### 三、新增prevent.php文件 下载以下文件，上传路径： `usr/themes/Joe/public` > ## **文件下载：** 隐藏内容，请前往内页查看详情
-
