我的 python 学习笔记
之所以学习 Python，本意是想写一些脚本之类的程序，用来在浏览器爬一些自己想要的文字，图片等资料，这些程序其实 GitHub 蛮多的，但奈何我对后端的语言一窍不通，直接拿过来给我用我都不会。 因此就萌生了先学习 Python 基础知识的想法，一直听说廖雪峰的 Python 教程写的不错，这次趁着这个机会要好好研读一番。也没想说用的多牛逼，至少希望能为自己浅薄的技术栈再增加一点光彩，毕竟我也曾梦想成为一个全栈开发。 下载安装完 Python 环境，就开始学习吧！ ## 运行我的第一个 python 程序 ```py print('hello,world') ``` ## 数据类型 在 Python 中，能直接处理的数据类型有几种，整数、浮点数、字符串、布尔值、空值、变量。 这与其他语言其实差别并不大，数据类型基本都是相似的，大概只有变量有自己的特性，所以我单独拿出来记录一下。 ### 变量 python 是一门动态语言，在赋值时可以不断改变，比如： ```py a = 123 print(a) # 终端输出数值 123 a = 'abc' print(a) # 终端输出字符串 abc ``` 这是允许的，而在 Java 中则不行，它是一门静态语言，如果多次赋值会报错。相对来说，动态语言更灵活，当然，各有利弊罢了。 并且在赋值上面有一个逻辑顺序，比如定义一个 `a = 'a'` 的变量。在 Python 中其实走了两步，先创造了一个字符串 `a` ，然后将这个字符串赋值给变量 a。 其实这在数学上是有些反逻辑的，`x = x + 2` 这个计算是行不通的在数学上，但是在计算机中，先计算 `x + 2` ，然后将其赋值给左侧的 `x` ，这是计算机的逻辑。 ```py x = 1 x = x + 2 print(x) # 3 ``` 其实很多计算机语言都是如此，比如我们所熟知的 js 等等。 如果有多个变量相互赋值的话，都是一行一行执行 ```shell a = 1 b = a a = 2 print(a) print(b) ``` 最后输出的结果分别是 `2`, `1` >Python 支持多种数据类型，在计算机内部，可以把任何数据都看成一个“对象”，而变量就是在程序中用来指向这些数据对象的，对变量赋值就是把数据和变量给关联起来。 对变量赋值 x = y 是把变量 x 指向真正的对象，该对象是变量 y 所指向的。随后对变量 y 的赋值不影响变量 x 的指向。 注意：Python 的整数没有大小限制，而某些语言的整数根据其存储长度是有大小限制的，例如 Java 对 32 位整数的范围限制在 -2147483648-2147483647。 Python 的浮点数也没有大小限制，但是超出一定范围就直接表示为 inf（无限大）。---《廖雪峰的官方网站》 ## 字符串和编码 Python 提供了两个处理编码的属性，`ord` 和 `chr` ```py ord('舒') # 33298 # 将字符串转换为整数表示 chr(33298) # '舒' # 将整数表示的内容转换为字符串 ``` ## list `list` 类似于 js 中的 `Array`，是多个数据的列表，写法如下 ```shell >>> classmates = ['a', 'b', 'c'] >>> classmates ['a', 'b', 'c'] ``` 这时候我们就可以说变量 `classmates` 是一个 list。 有一个 `len()` 可以输出 list 元素的个数 ```shell >>> len(classmates) >>> 3 ``` 同时 list 也有索引，从 0 开始，最后一个索引是 `len(classmates)-1`，同时如果想直接输出最后一个元素，可以使用 `classmates[-1]`. ```shell >>> classmates[-1] >>> 'c' ``` 既然都可以用 `-1` 表示最后一个元素，能不能用 `-2` 表示倒数第二个呢？答案是可以的。 ```shell >>> classmates[-2] >>> 'b' ``` **另外需要注意的是，在使用索引时不可超出范围，否则会报出下面的错误。** ```shell >>> classmates[4] Traceback (most recent call last): File "", line 1, in IndexError: list index out of range ``` **list** 是一个可变的有序列表，可以往里面添加或者删除元素。 1. append 在末尾添加元素 ```shell >>> classmates.append('d') >>> classmates ['a', 'b', 'c', 'd'] ``` 2. insert 在指定位置添加元素 其中 `1` 是索引，表示在索引为 1 的地方插入元素，后面的元素自然往后顺延。 ```shell >>> classmates.insert(1, 'd') >>> classmates ['a', 'd', 'b', 'c'] ``` 3. pop 删除末尾的元素 ```shell >>> classmates.pop() 'c' # 输出的时候被删除的元素 >>> classmates ['a', 'b'] ``` 4. pop(i) 删除指定位置的元素 ```shell >>> classmates.pop(1) 'b' # 输出被删除的元素 >>> classmates ['a', 'c'] >>> ```
via 子舒的博客
之所以学习 Python，本意是想写一些脚本之类的程序，用来在浏览器爬一些自己想要的文字，图片等资料，这些程序其实 GitHub 蛮多的，但奈何我对后端的语言一窍不通，直接拿过来给我用我都不会。 因此就萌生了先学习 Python 基础知识的想法，一直听说廖雪峰的 Python 教程写的不错，这次趁着这个机会要好好研读一番。也没想说用的多牛逼，至少希望能为自己浅薄的技术栈再增加一点光彩，毕竟我也曾梦想成为一个全栈开发。 下载安装完 Python 环境，就开始学习吧！ ## 运行我的第一个 python 程序 ```py print('hello,world') ``` ## 数据类型 在 Python 中，能直接处理的数据类型有几种，整数、浮点数、字符串、布尔值、空值、变量。 这与其他语言其实差别并不大，数据类型基本都是相似的，大概只有变量有自己的特性，所以我单独拿出来记录一下。 ### 变量 python 是一门动态语言，在赋值时可以不断改变，比如： ```py a = 123 print(a) # 终端输出数值 123 a = 'abc' print(a) # 终端输出字符串 abc ``` 这是允许的，而在 Java 中则不行，它是一门静态语言，如果多次赋值会报错。相对来说，动态语言更灵活，当然，各有利弊罢了。 并且在赋值上面有一个逻辑顺序，比如定义一个 `a = 'a'` 的变量。在 Python 中其实走了两步，先创造了一个字符串 `a` ，然后将这个字符串赋值给变量 a。 其实这在数学上是有些反逻辑的，`x = x + 2` 这个计算是行不通的在数学上，但是在计算机中，先计算 `x + 2` ，然后将其赋值给左侧的 `x` ，这是计算机的逻辑。 ```py x = 1 x = x + 2 print(x) # 3 ``` 其实很多计算机语言都是如此，比如我们所熟知的 js 等等。 如果有多个变量相互赋值的话，都是一行一行执行 ```shell a = 1 b = a a = 2 print(a) print(b) ``` 最后输出的结果分别是 `2`, `1` >Python 支持多种数据类型，在计算机内部，可以把任何数据都看成一个“对象”，而变量就是在程序中用来指向这些数据对象的，对变量赋值就是把数据和变量给关联起来。 对变量赋值 x = y 是把变量 x 指向真正的对象，该对象是变量 y 所指向的。随后对变量 y 的赋值不影响变量 x 的指向。 注意：Python 的整数没有大小限制，而某些语言的整数根据其存储长度是有大小限制的，例如 Java 对 32 位整数的范围限制在 -2147483648-2147483647。 Python 的浮点数也没有大小限制，但是超出一定范围就直接表示为 inf（无限大）。---《廖雪峰的官方网站》 ## 字符串和编码 Python 提供了两个处理编码的属性，`ord` 和 `chr` ```py ord('舒') # 33298 # 将字符串转换为整数表示 chr(33298) # '舒' # 将整数表示的内容转换为字符串 ``` ## list `list` 类似于 js 中的 `Array`，是多个数据的列表，写法如下 ```shell >>> classmates = ['a', 'b', 'c'] >>> classmates ['a', 'b', 'c'] ``` 这时候我们就可以说变量 `classmates` 是一个 list。 有一个 `len()` 可以输出 list 元素的个数 ```shell >>> len(classmates) >>> 3 ``` 同时 list 也有索引，从 0 开始，最后一个索引是 `len(classmates)-1`，同时如果想直接输出最后一个元素，可以使用 `classmates[-1]`. ```shell >>> classmates[-1] >>> 'c' ``` 既然都可以用 `-1` 表示最后一个元素，能不能用 `-2` 表示倒数第二个呢？答案是可以的。 ```shell >>> classmates[-2] >>> 'b' ``` **另外需要注意的是，在使用索引时不可超出范围，否则会报出下面的错误。** ```shell >>> classmates[4] Traceback (most recent call last): File "", line 1, in IndexError: list index out of range ``` **list** 是一个可变的有序列表，可以往里面添加或者删除元素。 1. append 在末尾添加元素 ```shell >>> classmates.append('d') >>> classmates ['a', 'b', 'c', 'd'] ``` 2. insert 在指定位置添加元素 其中 `1` 是索引，表示在索引为 1 的地方插入元素，后面的元素自然往后顺延。 ```shell >>> classmates.insert(1, 'd') >>> classmates ['a', 'd', 'b', 'c'] ``` 3. pop 删除末尾的元素 ```shell >>> classmates.pop() 'c' # 输出的时候被删除的元素 >>> classmates ['a', 'b'] ``` 4. pop(i) 删除指定位置的元素 ```shell >>> classmates.pop(1) 'b' # 输出被删除的元素 >>> classmates ['a', 'c'] >>> ```
via 子舒的博客
清明时节雨纷纷，路上行人欲断魂。 ### 云栖竹径     
via 子舒的博客
via 子舒的博客
基于 docsify 搭建一个文档
## 一、搭建 docsify 是一个类似 vuepress, gitbook 等静态文档程序，但是对比之前，个人还是喜欢 docsify 的风格和源码。不想要那么多附带的功能，能满足写文章，目录的功能就行了。 打开终端输入指令，把本地环境搭建起来： ```shell npm install docsify-cli -g ``` 初始化文档： ```shell docsify init ./docs ``` 本地运行： ```shell docs serve ``` 然后在浏览器打开 `localhost:3000` 就可以查看了。 ## 二、页面 我觉得最基本的页面就三个 1. _navbar.md 导航栏 ```markdown * [关于](/) ``` 然后在 index.html 调用。 ```js window.$docsify = { ... loadNavbar: true, ... } ``` 如图：  2. _sidebar.md 侧边栏 ```markdown * [基于 docsify 搭建一个文档](基于docsify搭建一个文档.md) ``` 在 index.html 调用。 ```js window.$docsify = { ... loadSidebar: true, ... } ``` 如图：  3. README.md 主页 ```markdown ## about 博客地址：[https://imhan.cn](https://imhan.cn) 作者：shuxhan 时间：2021.04.20 本文档作为博客的文章备份，如果对文章有一些其他的评论可以直接点击链接到原地址。 ``` 如图： 
via 子舒的博客
## 一、搭建 docsify 是一个类似 vuepress, gitbook 等静态文档程序，但是对比之前，个人还是喜欢 docsify 的风格和源码。不想要那么多附带的功能，能满足写文章，目录的功能就行了。 打开终端输入指令，把本地环境搭建起来： ```shell npm install docsify-cli -g ``` 初始化文档： ```shell docsify init ./docs ``` 本地运行： ```shell docs serve ``` 然后在浏览器打开 `localhost:3000` 就可以查看了。 ## 二、页面 我觉得最基本的页面就三个 1. _navbar.md 导航栏 ```markdown * [关于](/) ``` 然后在 index.html 调用。 ```js window.$docsify = { ... loadNavbar: true, ... } ``` 如图：  2. _sidebar.md 侧边栏 ```markdown * [基于 docsify 搭建一个文档](基于docsify搭建一个文档.md) ``` 在 index.html 调用。 ```js window.$docsify = { ... loadSidebar: true, ... } ``` 如图：  3. README.md 主页 ```markdown ## about 博客地址：[https://imhan.cn](https://imhan.cn) 作者：shuxhan 时间：2021.04.20 本文档作为博客的文章备份，如果对文章有一些其他的评论可以直接点击链接到原地址。 ``` 如图： 
via 子舒的博客
基耶斯洛夫斯基和他的现实
> 由于博友不在维护博客，导致图片链接丢失，仅以此为纪念。 > 2023-06-02 --- >文章作者：[江江_Jan](https://www.jannns.com) >文章链接：https://blog.jannns.com/posts/Kieslowski-and-his-reality/ >版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 江卮可乐！ ## 前言 克日什托夫·基耶斯洛夫斯基（以下简称基氏），20 世纪波兰著名导演，其作品**《蓝白红三部曲》（也称三色系列），被许多评论家视为电影史的巅峰。** **比起身份上电影人的定义，基氏本人更像是一个哲学家、斗争者。他立足于现实生活，擅长用冷静陈述的方式表达对世界的感知，热衷于揭露生活的残酷本质和人性的阴暗内里，并甘愿为【自由的表达】和外界抗衡。** **我对基氏作品的感知是客观且冷静（甚至有点冷漠）。**他的叙事似乎不带任何感情色彩，但回味起来却能感受到他对生命的热爱。 基氏的电影没有二元的善恶对错。残暴的杀人犯可以是为妹妹之死隐忍数年的无助青年（《杀人短片》）；权威物理教授会因为相信科学而亲手葬送自己的幼子（《十诫：第一诫》）；少年会因为精神爱情的破灭而赴死（《爱情短片》）；深爱多年的人是否能因为被证实无血缘而在一起（《十诫：父女情深》）……**一些人生困境真实摆在眼前时，比起一些脸谱化的选择，我认为基氏的电影更接近生活的本质，也可能是我个人认同的生活本质。** 总之他的电影蛮有意思的，值得挖掘的东西也很多，自己最近沉迷其中无法自拔。 ## 基耶斯洛夫斯基如是说 第一次看基耶斯洛夫斯基的电影是《蓝白红三部曲》，四年前，马哲课老师的推荐。看完感觉三观都没了。女主为什么毁了丈夫遗作却念念不忘？她怎么可以这么对待默默爱她那么多年的人？她为什么对破坏自己婚姻的人那么好？…被一大堆灵魂提问炙烤以后，我默默告诫自己以后不要再看欧洲电影了，超出我的认知范围，感情方面尤其跟不上西方人思路。（当然“不看欧洲电影”这个 flag?，后来因为被其他优秀电影疯狂打脸。） 可能因为叙事方式或者文化背景的原因，欧洲电影没有很强的渲染力（美国大片那种看完就热血沸腾的感觉），它热衷于描绘的都是一些很细小很日常挺东西，无论好的还是不好的都客观的摊在你面前，有时候甚至感觉它的道德边界是模糊的（《两小无猜》令我头大），但回味起来，这些电影表达方式可能戏剧化，但对情感的表述很真实，确定的、不确定的、果断的、犹豫的……**它告诉我们生活本来就是残酷的，但也会提示你生活中有很多不容忽视的小美好、值得我们的期待和爱护。** **基氏热衷于揭露生活的残酷真相和人性的阴暗面。**（可能这也是他电影十分吸引我的原因，我喜欢真实。）他的早期作品都是纪录片，力求反映真实的社会生活，后来因为一些社会原因和本身对纪录片表达方式的失望，他才开始拍摄剧情片。 **他所处的时代比较动荡，人们渴望真正的自由。** **他用自己的方式替人们发声，与外部抗衡。**朋友问他为什么不索性做政客去改变环境，他只是表达不适合自己，他在做的是自己应该做的事情。 对他观点感兴趣的朋友可以在去 b 站看纪录片《基耶斯洛夫斯基如是说》。 我比较认同他对人性的看法。 一旦某种特性在人们心中扎了根，很难改变。**性善性恶这种论题没有定论，也说不清这个“本”应该追溯哪里，但就未来而言，现在就是本，我比较相信“日久见人心”这个古话，人的本性经不起时间考验。** 这是一段废话 突然想到前两年网上疯传的**原生家庭理念，仿佛我们所有的性格缺陷，**只要归在原生家庭的问题上就可以结束了。这个理念让很多人找到了共鸣，大家可以理直气壮的指责原生家庭带给自己的伤害，所以在遇到一些问题时没法很好解决。但这种指责行为只是一种毫无意义的负面情绪宣泄，于家于己都毫无益处。 我从不否认原生家庭会给人影响，《野草莓》里探讨的持续三代的情感疏离，《小偷家族》里典型东方家庭的内敛……个体在遭受重大事件时性格都会受到影响，更何况耳濡目染的家庭。**但我觉得原生家庭概念的提出不是为了创造家庭矛盾、或者给自己的问题找开脱，而是给个体更多素材（比如家人互动模式）去找到解决问题的方法。** --- 以下内容含大量剧透及解析，请慎重阅读。 图源豆瓣或自截。 --- ## 蓝白红三部曲之蓝故事梗概 茱莉在一场意外中失去了丈夫和幼女，不堪回忆烦扰的她选择重新开始生活。清空过去的家、切断和过去人们的联系，但情感方面的东西，始终无法像切断物质关系一样简单，能够清理的干干净净。媒体四处渗透她的生活、想要她续写她丈夫的遗作，丈夫的助手一直爱着他、默默关心着她，最重要的是，她脑海中总是回荡着她和丈夫一起创作的交响乐…一个电视采访让她意外发现这首乐曲和另一个女人有关，并且她还有了丈夫的骨肉…… 和贯穿全剧的交响乐相契合，故事也可以分成四个乐章。 ### 第一乐章 **常以奏鸣曲或快板形式表现。常常是两个具冲突性的主题交替上演，在最后突出首要主题。** 电影开头是一段行车的镜头。基氏通过一家人的默契互动、小女孩玩糖纸的动作、街边玩耍的路人，来表现这一天的平常以及这个家庭的和谐氛围。 突然，车离奇的撞上了路外的树。 ### 第二乐章 **复三部曲式或变奏曲，慢板。** 女主茱莉的丈夫、女儿，因为车祸和她阴阳两隔。寻死不成，她开始漫长的适应过程。 茱莉变卖了家里的东西，安顿园丁和管家的生活，以决绝的方式和一直对她存有感情的助手道别，自己搬进市区的公寓，想要忘记过去生活的痕迹。 但是不适就像水一样无缝隙的将她包围。过去的生活习惯、一起创作的乐曲、国家要她续写交响曲的请求…人们的互动总是强行把她拉进生活中。 ### 第三乐章 **小步舞曲或谐谑曲，中、快板。** 茱莉不想与周围世界产生关联，但是她控制不了他人。莫名和同栋公寓的 prostitute 产生了联系以后，她的平静生活慢慢被打破，一次意外看到的电视节目把茱莉彻底逼回现实。助手接受国家委托，续写本已被她销毁的交响曲；丈夫生命中还有另一个女子。原本小心封存的回忆突然就炸开了。她去找助手，责问他凭什么去续写这首乐曲；她去找亡夫的情人，却只能“平静”接受对方已有丈夫骨肉的事实……（女主这段表演真的很精彩） 茱莉重新审视自己的生活、感情。她把准备变卖的房产赠给了丈夫的情人；重新投入作曲，把一直萦绕在脑内的旋律写出来… ### 第四乐章 **终曲。通常是快板，经常采用会选取时或者回旋奏鸣曲式。也就是对主题进行呼应。** 电影的最后是本剧的高潮，像走马灯一样回顾了茱莉的遭遇。戴着爱的十字架的男孩突然惊醒、在过去徘徊的母亲永远的沉寂、混乱生活的 prostitute 的沉思、及情人对新生儿的微笑…伴着最终成曲，回顾了茱莉这段人生经历。 导演的布局真的太妙了，每一个要素都紧紧地联系在一起。蓝色基调、交响乐贯穿全剧，既烘托氛围，又表达茱莉沉默背后压抑的感情…… ## 后记 本来想把三色系列都写一遍，但好几遍《蓝》看下来感觉还是需要时间去消化。基耶斯洛夫斯基的电影值得反复看的，不同的人生阶段应该也会有不同的看法。 一人所学有限，若有疏漏，还请大家批评指正。
via 子舒的博客
> 由于博友不在维护博客，导致图片链接丢失，仅以此为纪念。 > 2023-06-02 --- >文章作者：[江江_Jan](https://www.jannns.com) >文章链接：https://blog.jannns.com/posts/Kieslowski-and-his-reality/ >版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 江卮可乐！ ## 前言 克日什托夫·基耶斯洛夫斯基（以下简称基氏），20 世纪波兰著名导演，其作品**《蓝白红三部曲》（也称三色系列），被许多评论家视为电影史的巅峰。** **比起身份上电影人的定义，基氏本人更像是一个哲学家、斗争者。他立足于现实生活，擅长用冷静陈述的方式表达对世界的感知，热衷于揭露生活的残酷本质和人性的阴暗内里，并甘愿为【自由的表达】和外界抗衡。** **我对基氏作品的感知是客观且冷静（甚至有点冷漠）。**他的叙事似乎不带任何感情色彩，但回味起来却能感受到他对生命的热爱。 基氏的电影没有二元的善恶对错。残暴的杀人犯可以是为妹妹之死隐忍数年的无助青年（《杀人短片》）；权威物理教授会因为相信科学而亲手葬送自己的幼子（《十诫：第一诫》）；少年会因为精神爱情的破灭而赴死（《爱情短片》）；深爱多年的人是否能因为被证实无血缘而在一起（《十诫：父女情深》）……**一些人生困境真实摆在眼前时，比起一些脸谱化的选择，我认为基氏的电影更接近生活的本质，也可能是我个人认同的生活本质。** 总之他的电影蛮有意思的，值得挖掘的东西也很多，自己最近沉迷其中无法自拔。 ## 基耶斯洛夫斯基如是说 第一次看基耶斯洛夫斯基的电影是《蓝白红三部曲》，四年前，马哲课老师的推荐。看完感觉三观都没了。女主为什么毁了丈夫遗作却念念不忘？她怎么可以这么对待默默爱她那么多年的人？她为什么对破坏自己婚姻的人那么好？…被一大堆灵魂提问炙烤以后，我默默告诫自己以后不要再看欧洲电影了，超出我的认知范围，感情方面尤其跟不上西方人思路。（当然“不看欧洲电影”这个 flag?，后来因为被其他优秀电影疯狂打脸。） 可能因为叙事方式或者文化背景的原因，欧洲电影没有很强的渲染力（美国大片那种看完就热血沸腾的感觉），它热衷于描绘的都是一些很细小很日常挺东西，无论好的还是不好的都客观的摊在你面前，有时候甚至感觉它的道德边界是模糊的（《两小无猜》令我头大），但回味起来，这些电影表达方式可能戏剧化，但对情感的表述很真实，确定的、不确定的、果断的、犹豫的……**它告诉我们生活本来就是残酷的，但也会提示你生活中有很多不容忽视的小美好、值得我们的期待和爱护。** **基氏热衷于揭露生活的残酷真相和人性的阴暗面。**（可能这也是他电影十分吸引我的原因，我喜欢真实。）他的早期作品都是纪录片，力求反映真实的社会生活，后来因为一些社会原因和本身对纪录片表达方式的失望，他才开始拍摄剧情片。 **他所处的时代比较动荡，人们渴望真正的自由。** **他用自己的方式替人们发声，与外部抗衡。**朋友问他为什么不索性做政客去改变环境，他只是表达不适合自己，他在做的是自己应该做的事情。 对他观点感兴趣的朋友可以在去 b 站看纪录片《基耶斯洛夫斯基如是说》。 我比较认同他对人性的看法。 一旦某种特性在人们心中扎了根，很难改变。**性善性恶这种论题没有定论，也说不清这个“本”应该追溯哪里，但就未来而言，现在就是本，我比较相信“日久见人心”这个古话，人的本性经不起时间考验。** 这是一段废话 突然想到前两年网上疯传的**原生家庭理念，仿佛我们所有的性格缺陷，**只要归在原生家庭的问题上就可以结束了。这个理念让很多人找到了共鸣，大家可以理直气壮的指责原生家庭带给自己的伤害，所以在遇到一些问题时没法很好解决。但这种指责行为只是一种毫无意义的负面情绪宣泄，于家于己都毫无益处。 我从不否认原生家庭会给人影响，《野草莓》里探讨的持续三代的情感疏离，《小偷家族》里典型东方家庭的内敛……个体在遭受重大事件时性格都会受到影响，更何况耳濡目染的家庭。**但我觉得原生家庭概念的提出不是为了创造家庭矛盾、或者给自己的问题找开脱，而是给个体更多素材（比如家人互动模式）去找到解决问题的方法。** --- 以下内容含大量剧透及解析，请慎重阅读。 图源豆瓣或自截。 --- ## 蓝白红三部曲之蓝故事梗概 茱莉在一场意外中失去了丈夫和幼女，不堪回忆烦扰的她选择重新开始生活。清空过去的家、切断和过去人们的联系，但情感方面的东西，始终无法像切断物质关系一样简单，能够清理的干干净净。媒体四处渗透她的生活、想要她续写她丈夫的遗作，丈夫的助手一直爱着他、默默关心着她，最重要的是，她脑海中总是回荡着她和丈夫一起创作的交响乐…一个电视采访让她意外发现这首乐曲和另一个女人有关，并且她还有了丈夫的骨肉…… 和贯穿全剧的交响乐相契合，故事也可以分成四个乐章。 ### 第一乐章 **常以奏鸣曲或快板形式表现。常常是两个具冲突性的主题交替上演，在最后突出首要主题。** 电影开头是一段行车的镜头。基氏通过一家人的默契互动、小女孩玩糖纸的动作、街边玩耍的路人，来表现这一天的平常以及这个家庭的和谐氛围。 突然，车离奇的撞上了路外的树。 ### 第二乐章 **复三部曲式或变奏曲，慢板。** 女主茱莉的丈夫、女儿，因为车祸和她阴阳两隔。寻死不成，她开始漫长的适应过程。 茱莉变卖了家里的东西，安顿园丁和管家的生活，以决绝的方式和一直对她存有感情的助手道别，自己搬进市区的公寓，想要忘记过去生活的痕迹。 但是不适就像水一样无缝隙的将她包围。过去的生活习惯、一起创作的乐曲、国家要她续写交响曲的请求…人们的互动总是强行把她拉进生活中。 ### 第三乐章 **小步舞曲或谐谑曲，中、快板。** 茱莉不想与周围世界产生关联，但是她控制不了他人。莫名和同栋公寓的 prostitute 产生了联系以后，她的平静生活慢慢被打破，一次意外看到的电视节目把茱莉彻底逼回现实。助手接受国家委托，续写本已被她销毁的交响曲；丈夫生命中还有另一个女子。原本小心封存的回忆突然就炸开了。她去找助手，责问他凭什么去续写这首乐曲；她去找亡夫的情人，却只能“平静”接受对方已有丈夫骨肉的事实……（女主这段表演真的很精彩） 茱莉重新审视自己的生活、感情。她把准备变卖的房产赠给了丈夫的情人；重新投入作曲，把一直萦绕在脑内的旋律写出来… ### 第四乐章 **终曲。通常是快板，经常采用会选取时或者回旋奏鸣曲式。也就是对主题进行呼应。** 电影的最后是本剧的高潮，像走马灯一样回顾了茱莉的遭遇。戴着爱的十字架的男孩突然惊醒、在过去徘徊的母亲永远的沉寂、混乱生活的 prostitute 的沉思、及情人对新生儿的微笑…伴着最终成曲，回顾了茱莉这段人生经历。 导演的布局真的太妙了，每一个要素都紧紧地联系在一起。蓝色基调、交响乐贯穿全剧，既烘托氛围，又表达茱莉沉默背后压抑的感情…… ## 后记 本来想把三色系列都写一遍，但好几遍《蓝》看下来感觉还是需要时间去消化。基耶斯洛夫斯基的电影值得反复看的，不同的人生阶段应该也会有不同的看法。 一人所学有限，若有疏漏，还请大家批评指正。
via 子舒的博客
网站引入 iframe 视频，如何实现高度自适应？
我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题，某一篇文章想用 `iframe` 引入一个外链视频，但是大小总是有问题，宽度可以固定到 100% ，但是高度比如用实际高度来表示，比如 `100px`, `200px`，诸如此类。 但是问题来了，在不同的页面宽度下，视频的高度是一致的，就会导致一个很麻烦的问题， 看下面两个图， **pc 端**  **移动端**  很明显，在 pc 端正常显示的视频，放到移动端高度就错位了，很不美观。 解决这个问题，可以同媒体查询，但是显然费时费力，还不那么完美。 其实很简单，只需要不到 10 行代码即可完美实现。 1. 引入 jq，（一般网站默认都有这个文件） 2. 加上一段 js 代码，最好放在网站底部， `
` 前即可。 ```js $('iframe').wrap('
') ``` 3. 在 css 文件的底部加上： ```css .iframe{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` 这个时候再访问带有 iframe 视频的网页，不管宽度如何变化，高度可以随视频自适应。 例如这个网页，可以看一下效果：[https://imhan.cn/posts/20210507.html](/posts/20210507.html)
via 子舒的博客
我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题，某一篇文章想用 `iframe` 引入一个外链视频，但是大小总是有问题，宽度可以固定到 100% ，但是高度比如用实际高度来表示，比如 `100px`, `200px`，诸如此类。 但是问题来了，在不同的页面宽度下，视频的高度是一致的，就会导致一个很麻烦的问题， 看下面两个图， **pc 端**  **移动端**  很明显，在 pc 端正常显示的视频，放到移动端高度就错位了，很不美观。 解决这个问题，可以同媒体查询，但是显然费时费力，还不那么完美。 其实很简单，只需要不到 10 行代码即可完美实现。 1. 引入 jq，（一般网站默认都有这个文件） 2. 加上一段 js 代码，最好放在网站底部， `
` 前即可。 ```js $('iframe').wrap('
') ``` 3. 在 css 文件的底部加上： ```css .iframe{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` 这个时候再访问带有 iframe 视频的网页，不管宽度如何变化，高度可以随视频自适应。 例如这个网页，可以看一下效果：[https://imhan.cn/posts/20210507.html](/posts/20210507.html)
via 子舒的博客
Oracle 数据库安装教程（超详细）
>转载自：[https://www.moeor.com/26.html](https://www.moeor.com/26.html) ## 前言 本教程讲解 Oracle Database Express Edition (XE) Release 11.2.0.2.0 (11gR2) 版本的下载安装教程！ 该版本是一个便携式安装版本，直接安装，就可以了，非常方便。 由于官网的更新，找不到以前那种提供客户端服务端的安装了，所以这里不再讲解！ ## 准备 访问 Oracle 官网下载该版本数据库。下载时需要登录账号，可百度搜索共享的 Oracle 账号！ 下载地址：[https://www.oracle.com/database/technologies/xe-prior-releases.html](https://www.oracle.com/database/technologies/xe-prior-releases.html) 选择适合自己的系统版本，本文以 Win10 为例。建议使用下载工具或者科学上网，下载更快！  ## 安装 Oracle 下载后解压缩，双击打开文件夹中的“setup.exe" 安装程序，等待程序启动，进入安装程序。  开始安装，单击“下一步”  选择“我接受本许可协议中的条款”，然后单击“下一步”。  这一步是选择安装位置，由于文件程序比较大，建议安装 D 盘。新建一个 Oracle 文件夹，点击“浏览”，选择文件夹，注意查看目标文件夹，文件路径，然后单击“下一步”。  设置数据库的登录口令，即数据库密码，建议简单一点，比如：root，然后单击“下一步”。  单击“安装”，开始安装。  安装过程比较慢，耐心等待安装完成！  安装完成后，单击“完成”，即 Oracle 11gR2 已经安装完成了。  安装完成会在桌面新建一个图标，打开可以通过以 web 形式访问数据库。  双击打开，可能会弹出以下错误提示，这个是没有影响的，安装完成后重启一点电脑就可以了！  ## 验证数据库 选择桌面生成的图标  鼠标右键打开文件所在位置，弹出文件夹，往上翻，在文件夹中找到 bin 文件夹。  双击，进入 bin 文件夹，往下翻，找到 sqlplus.exe 程序。  双击运行。 输入用户名：system（统一默认都是 system），回车  输入口令：（刚才安装时设置的口令），口令输入是不显示的，直接回车就行了。  若出现“连接到：Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production”语句时，则安装成功！ 
via 子舒的博客
>转载自：[https://www.moeor.com/26.html](https://www.moeor.com/26.html) ## 前言 本教程讲解 Oracle Database Express Edition (XE) Release 11.2.0.2.0 (11gR2) 版本的下载安装教程！ 该版本是一个便携式安装版本，直接安装，就可以了，非常方便。 由于官网的更新，找不到以前那种提供客户端服务端的安装了，所以这里不再讲解！ ## 准备 访问 Oracle 官网下载该版本数据库。下载时需要登录账号，可百度搜索共享的 Oracle 账号！ 下载地址：[https://www.oracle.com/database/technologies/xe-prior-releases.html](https://www.oracle.com/database/technologies/xe-prior-releases.html) 选择适合自己的系统版本，本文以 Win10 为例。建议使用下载工具或者科学上网，下载更快！  ## 安装 Oracle 下载后解压缩，双击打开文件夹中的“setup.exe" 安装程序，等待程序启动，进入安装程序。  开始安装，单击“下一步”  选择“我接受本许可协议中的条款”，然后单击“下一步”。  这一步是选择安装位置，由于文件程序比较大，建议安装 D 盘。新建一个 Oracle 文件夹，点击“浏览”，选择文件夹，注意查看目标文件夹，文件路径，然后单击“下一步”。  设置数据库的登录口令，即数据库密码，建议简单一点，比如：root，然后单击“下一步”。  单击“安装”，开始安装。  安装过程比较慢，耐心等待安装完成！  安装完成后，单击“完成”，即 Oracle 11gR2 已经安装完成了。  安装完成会在桌面新建一个图标，打开可以通过以 web 形式访问数据库。  双击打开，可能会弹出以下错误提示，这个是没有影响的，安装完成后重启一点电脑就可以了！  ## 验证数据库 选择桌面生成的图标  鼠标右键打开文件所在位置，弹出文件夹，往上翻，在文件夹中找到 bin 文件夹。  双击，进入 bin 文件夹，往下翻，找到 sqlplus.exe 程序。  双击运行。 输入用户名：system（统一默认都是 system），回车  输入口令：（刚才安装时设置的口令），口令输入是不显示的，直接回车就行了。  若出现“连接到：Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production”语句时，则安装成功！ 
via 子舒的博客
css 中 fixed 定位属性和动画的冲突问题及解决方法
## 1.问题 >css 中使用动画属性会和同标签下的 fixed 属性冲突，导致定位失效，那么该如何解决他呢？ ## 2.分析 简单说一下问题产生的背景，昨天夜里我想给我的博客页面做一个简单的动画，浏览器刷新的时候从下往上渐现的效果，代码如下： ```css /* index-container 类名是页面的主体部分 */ .index-container { opacity: 0; animation-name: index; animation-duration: 0.7s; animation-fill-mode: forwards; } /* 一个简单的动画实现 */ @keyframes index { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } ``` 运行之后发现，动画可以很好的显示，但是当我翻阅文章详情的时候发现，目录固定失效了。 按照原来的设置是当页面往下滑动的时候，目录会紧贴浏览器的顶部，方便跳转和查看目录，但是现在它已经不能紧贴了。看一下浏览器设置，属性确实生效了，但是页面并没有显示我们想要的结果。  之前我写目录固定事件的时候用的是 `scroll` 事件，然后昨天写动画，绑定的 `onload` 事件，我初步判断是两个 window 冲突了，导致第二个失效，所以我就改了一种写法，用 `addEventListener` 事件监听执行他们，但最终无论怎么写，目录固定始终不能生效。 昨天熬得太晚了，就没管它放在那了，今天一早我就去张鑫旭的网站查了一下，果然有这么一个问题。 参考文章：[https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/](https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/) 但是文章只是介绍了问题产生的原因，并没有明确给出一个好的解决办法。 ## 3.方法 虽然没有明确的方法，但是给了我一个思路，因为动画中的一些属性，比如 `scale`、`translate` 等，会造车容器的宽高重新计算，而 fixed 属性则依赖于规定的一个像素值，所以当执行动画的时候，页面的高度发生了变化，所以 fixed 不能安心的执行自己的任务了。 原因找到了，方法自然而然就出来了，看图（图很丑，手画的，能理解意思就行）  这是我最开始的布局，我将动画绑定给 `红色框` 的容器了，而目录就在红色框内，所以失效。 现在我重新布局一下，  目录依旧处于侧边，但是我将他和通常的侧边栏分开成两个容器了，现在我把动画绑定给 `主体部分` 和 `侧边栏` ，这样目录就和绑定动画的标签分开了。 再到页面测试，发现没有任何问题，动画效果和目录固定互不影响。 很快乐，又可以愉快地折腾了！
via 子舒的博客
## 1.问题 >css 中使用动画属性会和同标签下的 fixed 属性冲突，导致定位失效，那么该如何解决他呢？ ## 2.分析 简单说一下问题产生的背景，昨天夜里我想给我的博客页面做一个简单的动画，浏览器刷新的时候从下往上渐现的效果，代码如下： ```css /* index-container 类名是页面的主体部分 */ .index-container { opacity: 0; animation-name: index; animation-duration: 0.7s; animation-fill-mode: forwards; } /* 一个简单的动画实现 */ @keyframes index { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } ``` 运行之后发现，动画可以很好的显示，但是当我翻阅文章详情的时候发现，目录固定失效了。 按照原来的设置是当页面往下滑动的时候，目录会紧贴浏览器的顶部，方便跳转和查看目录，但是现在它已经不能紧贴了。看一下浏览器设置，属性确实生效了，但是页面并没有显示我们想要的结果。  之前我写目录固定事件的时候用的是 `scroll` 事件，然后昨天写动画，绑定的 `onload` 事件，我初步判断是两个 window 冲突了，导致第二个失效，所以我就改了一种写法，用 `addEventListener` 事件监听执行他们，但最终无论怎么写，目录固定始终不能生效。 昨天熬得太晚了，就没管它放在那了，今天一早我就去张鑫旭的网站查了一下，果然有这么一个问题。 参考文章：[https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/](https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/) 但是文章只是介绍了问题产生的原因，并没有明确给出一个好的解决办法。 ## 3.方法 虽然没有明确的方法，但是给了我一个思路，因为动画中的一些属性，比如 `scale`、`translate` 等，会造车容器的宽高重新计算，而 fixed 属性则依赖于规定的一个像素值，所以当执行动画的时候，页面的高度发生了变化，所以 fixed 不能安心的执行自己的任务了。 原因找到了，方法自然而然就出来了，看图（图很丑，手画的，能理解意思就行）  这是我最开始的布局，我将动画绑定给 `红色框` 的容器了，而目录就在红色框内，所以失效。 现在我重新布局一下，  目录依旧处于侧边，但是我将他和通常的侧边栏分开成两个容器了，现在我把动画绑定给 `主体部分` 和 `侧边栏` ，这样目录就和绑定动画的标签分开了。 再到页面测试，发现没有任何问题，动画效果和目录固定互不影响。 很快乐，又可以愉快地折腾了！
via 子舒的博客
宝塔如何实现进程守护？
为了方便写一些东西，pc 端和手机端都可以同步，我用 leanote 搭建了一个在线笔记，但是必须在服务器后台运行一个指令 ```shell base run.sh ``` 不然就访问不了端口，我也不可能时刻在终端保持指令运行，所以就需要把指令放在服务器后台，让它自己保持运行，刚好有这么一插件 `Supervisor管理器 2.2` 。  是一款免费的 Python 插件，点击下载即可，然后进入设置。  点击添加进程守护。  把进程环境目录和启动命令都填好，名称就随便写个自己能分辨出来的就行，最后点击确定。  让它一直保持启动状态就可以，其他的不用动，以后就不用打开服务器终端输入指令了，直接在浏览器访问端口，就可以访问网页。 如果为了更方便，做个反代处理即可。
via 子舒的博客
为了方便写一些东西，pc 端和手机端都可以同步，我用 leanote 搭建了一个在线笔记，但是必须在服务器后台运行一个指令 ```shell base run.sh ``` 不然就访问不了端口，我也不可能时刻在终端保持指令运行，所以就需要把指令放在服务器后台，让它自己保持运行，刚好有这么一插件 `Supervisor管理器 2.2` 。  是一款免费的 Python 插件，点击下载即可，然后进入设置。  点击添加进程守护。  把进程环境目录和启动命令都填好，名称就随便写个自己能分辨出来的就行，最后点击确定。  让它一直保持启动状态就可以，其他的不用动，以后就不用打开服务器终端输入指令了，直接在浏览器访问端口，就可以访问网页。 如果为了更方便，做个反代处理即可。
via 子舒的博客
在 vue 中使用 axios 调用数据
如何在 vue 中完成一次接口的调用？首选就是 axios，方便快捷又好用，支持各种 api ,封装也很方便。 先用 node 安装一下。 ```js npm install axios ``` 然后在 main.js 文件中引入。 ```js import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 以我的一个工程目录作为实例，看一下代码。 ```js // ListThere.vue // html 代码 ...
{{ info }}
... // js 代码 import axios from "axios"; export default { name: "ListThere", data() { return { ... }; }, components: { ... }, methods: { ... }, mounted() { axios .get("http://api.h-camel.com/api?mod=interview&ctr=issues&act=today") .then((response) => (this.info = response)) }, }; ``` 数据成功的被取到，然后需要将它在页面中展示出来。使用 vue 自带的 `v-for` 列表渲染。 ```html
● {{ item.title }}
``` 然后通过 axios 把数据指向 v-for. ```js mounted() { axios // ... .then((response) => (this.show = response.data.result.today)) } ``` 数据成功取出然后展示在 `v-for` 里面。 当然了，这是成功的情况，加入失败了呢？我们需要浏览器给出提示，所以 axios 给出了一个 api --- `err 语法`。 ```js mounted() { axios // ... .catch(function (error) { if (error.response) { console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); console.log('err') } else if (error.request) { console.log(error.request); console.log('err') } else { console.log('Error', error.message); console.log('err') } console.log(error.config); console.log('err') }); } ``` 如果接口有问题，或者我们调用时代码写错了，都会给出报错提示，具体什么样的错误会有什么样的警告，需要我们一一去经历摸索。
via 子舒的博客
如何在 vue 中完成一次接口的调用？首选就是 axios，方便快捷又好用，支持各种 api ,封装也很方便。 先用 node 安装一下。 ```js npm install axios ``` 然后在 main.js 文件中引入。 ```js import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 以我的一个工程目录作为实例，看一下代码。 ```js // ListThere.vue // html 代码 ...
{{ info }}
... // js 代码 import axios from "axios"; export default { name: "ListThere", data() { return { ... }; }, components: { ... }, methods: { ... }, mounted() { axios .get("http://api.h-camel.com/api?mod=interview&ctr=issues&act=today") .then((response) => (this.info = response)) }, }; ``` 数据成功的被取到，然后需要将它在页面中展示出来。使用 vue 自带的 `v-for` 列表渲染。 ```html
● {{ item.title }}
``` 然后通过 axios 把数据指向 v-for. ```js mounted() { axios // ... .then((response) => (this.show = response.data.result.today)) } ``` 数据成功取出然后展示在 `v-for` 里面。 当然了，这是成功的情况，加入失败了呢？我们需要浏览器给出提示，所以 axios 给出了一个 api --- `err 语法`。 ```js mounted() { axios // ... .catch(function (error) { if (error.response) { console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); console.log('err') } else if (error.request) { console.log(error.request); console.log('err') } else { console.log('Error', error.message); console.log('err') } console.log(error.config); console.log('err') }); } ``` 如果接口有问题，或者我们调用时代码写错了，都会给出报错提示，具体什么样的错误会有什么样的警告，需要我们一一去经历摸索。
via 子舒的博客
冷知识世界新增一个大洋变成五大洋
从 6 月 8 日世界海洋日开始，南大洋将被认定为世界第五大洋。世界上就有七大洲，五大洋啦！中学课文需要改一改了。 美国国家地理学会宣布，南极洲周围海域将被称为南大洋，并正式承认南大洋为地球第五大洋。 南大洋是海洋生态系统的重要家园，也是南半球的焦点。它直接包围着南极洲，从大陆的海岸线一直延伸到南纬 60 度。 海洋的边界与其他四个大洋中的三个相连——大西洋、印度洋和太平洋。但南大洋与其它大洋的不同之处在于，它在很大程度上不是由周围的陆地决定的，而是由于内部有一股洋流，这片水域很独特。
via 子舒的博客
从 6 月 8 日世界海洋日开始，南大洋将被认定为世界第五大洋。世界上就有七大洲，五大洋啦！中学课文需要改一改了。 美国国家地理学会宣布，南极洲周围海域将被称为南大洋，并正式承认南大洋为地球第五大洋。 南大洋是海洋生态系统的重要家园，也是南半球的焦点。它直接包围着南极洲，从大陆的海岸线一直延伸到南纬 60 度。 海洋的边界与其他四个大洋中的三个相连——大西洋、印度洋和太平洋。但南大洋与其它大洋的不同之处在于，它在很大程度上不是由周围的陆地决定的，而是由于内部有一股洋流，这片水域很独特。
via 子舒的博客
将数据库中的图片信息导出并调用
>接口链接：[http://121.196.166.173/img/img.php](http://121.196.166.173/img/img.php) >展示 demo：[http://121.196.166.173/img](http://121.196.166.173/img) ## 前言 为了写博客以及其他的一些用途，我使用服务器搭建了一个连接 github 仓库的上传网页，并且在数据库中记录上传的信息，比如缩略名、时间戳和图片链接。分别对应 GitHub 仓库中的图片，但是后期我发现在 GitHub 查看图片非常别扭，因此我打算写一个可展示图片的网页，把 GitHub 仓库中的图片通过链接展示出来，当然我们不可能一张张复制，还好有数据库。 看一下具体内容  ## 写一个接口 很好，拥有我们需要的字段。事不宜迟，直接开动，下面是完成的接口代码。 ```phpconnect_error) {
die("连接失败：" . $conn->connect_error);
}
// imgmd5 名称转 md5
// imguploadtime 上传时间戳
// imgurl 链接
// 上传 ip
$sql = "select imgmd5,imguploadtime,imgurl,imguploadip from remote_imgs
";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
$data[]=$row;
}
$json = json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//把数据转换为 JSON 数据。
exit($json) ;
} else {
echo "未查询到结果！";
}
$conn->close();
?> ``` 分别将缩略名，时间戳，图片链接，和上传 ip 通过 json 格式导出，非常完美。接口链接：[http://121.196.166.173/img/img.php](http://121.196.166.173/img/img.php) ## 使用 ajax 进行调用 然后只需要在前端将接口调用，然后简单写一个页面即可，下面是 html 代码，，通过 ajax 调用。 ```html
图床 ``` 最后我把这个页面传到我的服务器当中，可以看一下效果 [http://121.196.166.173/img](http://121.196.166.173/img) 时间仓促，我也没使用更好的 ui 进行优化，只是大致写一下这个过程，待到以后具体使用时，我会对这个展示图片的页面进一步优化。
via 子舒的博客
>接口链接：[http://121.196.166.173/img/img.php](http://121.196.166.173/img/img.php) >展示 demo：[http://121.196.166.173/img](http://121.196.166.173/img) ## 前言 为了写博客以及其他的一些用途，我使用服务器搭建了一个连接 github 仓库的上传网页，并且在数据库中记录上传的信息，比如缩略名、时间戳和图片链接。分别对应 GitHub 仓库中的图片，但是后期我发现在 GitHub 查看图片非常别扭，因此我打算写一个可展示图片的网页，把 GitHub 仓库中的图片通过链接展示出来，当然我们不可能一张张复制，还好有数据库。 看一下具体内容  ## 写一个接口 很好，拥有我们需要的字段。事不宜迟，直接开动，下面是完成的接口代码。 ```phpconnect_error) {
die("连接失败：" . $conn->connect_error);
}
// imgmd5 名称转 md5
// imguploadtime 上传时间戳
// imgurl 链接
// 上传 ip
$sql = "select imgmd5,imguploadtime,imgurl,imguploadip from remote_imgs
";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
$data[]=$row;
}
$json = json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//把数据转换为 JSON 数据。
exit($json) ;
} else {
echo "未查询到结果！";
}
$conn->close();
?> ``` 分别将缩略名，时间戳，图片链接，和上传 ip 通过 json 格式导出，非常完美。接口链接：[http://121.196.166.173/img/img.php](http://121.196.166.173/img/img.php) ## 使用 ajax 进行调用 然后只需要在前端将接口调用，然后简单写一个页面即可，下面是 html 代码，，通过 ajax 调用。 ```html
图床 ``` 最后我把这个页面传到我的服务器当中，可以看一下效果 [http://121.196.166.173/img](http://121.196.166.173/img) 时间仓促，我也没使用更好的 ui 进行优化，只是大致写一下这个过程，待到以后具体使用时，我会对这个展示图片的页面进一步优化。
via 子舒的博客
关于我为什么要写博客？
## 关于这个博客的构成 这个就放在最前面吗，算是起到一个统计整理的作用。 博客基础的框架使用是 hugo, 前端样式是自己慢慢构思的，可能是因为没有设计师的天分吧，构思出来的 UI 就很奇怪。 我也尽量将色彩往黑白上靠，就是为了避免色彩的冲突造成阅读的不适，以文字为主体，也可以将我的重心转移到写文章上来。 然后通过本地渲染构建了 `public` 静态文件，我将这些文件推送到服务器上，服务器的配置是最基础的 1h2g，不过已经完全可以满足个人正常使用了，这样可以提升访问速度。同时的话，我在 Github 备份了源码，这样就不用害怕如果有什么突发事件。 而且，通过 Github，我在 vercel 也构建了一个备份网站，基于 rope 可以直接生成一个项目网站，也是非常实用。 目前这个博客主题我并没有将其分离起来，一是不想专门维护一个开源项目，二是我也很难保证其稳定性，隔三差五我都会优化或者改变整体布局，如果作为一个开源项目的话，这毫无疑问是不合格的。 如果你想使用同款主题，可以前往仓库 [https://github.com/anghunk/blog](https://github.com/anghunk/blog)，这是博客全部的源码。 你可以把 `themes` 文件夹下的代码 copy 走。或者直接 fork 仓库，然后把 `/content` 内的文章删掉，换成你自己的。 --- **2021.07.21 落笔** 写这篇文章，大概是想回顾一下自己从写第一篇博客，一直到现在的心理历程吧！但是动笔的时候，又突然改变想法了。决定好好审视一下自己的内心，“我为什么要写博客？”  ## 伊始 故事最开始源于 2020 年五月份，当时我正频临毕业之际，正处于找工作的状态，对前途还是有些迷茫的，不知道未来该怎么走，往哪方面发展，再加上对自己不够自信，可能有些焦虑吧。 但是不论心态怎么变化，生活总是要继续的，在闲暇之余我浏览很多技术网站，希望可以提升自己，当时我比较热衷于 csdn 和博客园吧，两个比较大的中文博客网站，不论是学习和查资料，百度出来的内容基本都是这两个网站的文章。然后在平时学习累计的过程中，我也会写一些笔记或者总结的内容，开始我是直接存放在本地，后来我放在 Gayhub 上面。 >Gayhub: 又名，Github. 全球最大的同性交友网站，在这里你可以畅快的交流技术，copy code。 但是上过这个网站的人都懂，它的速度是多么的令人着急。虽然后来学会了一些科学上网的方法，但是还是很不爽，所以我把目光投向了技术交流平台，论坛社区。我开始试着在把笔记放在 csdn 上面，当做博客发布出去，至今还保留一些浅显易懂的文章在我的 csdn 账号上，不过许久没有登陆了。 ## 接触 有一天，一个做前端的朋友给我推荐了一本书，叫做《Web 全栈工程师的自我修养》，作者是余果，之前我还写过一篇读后感，感兴趣的话也可以读一下，[《对全栈的一些思考》](/blog/10.html) >挺好的一本书，也很畅销，读完电子版的，我还专门为此买了一本纸质的书，表示支持一下作者。 然后了解到作者在大学时期就开始写个人博客，在深入了解过程中，我觉得他的思想真的不错，写的内容也很有深度，虽然很多文章跟技术无关，但是不可否认是好文章。（现在他已经转到微信公告号了，有兴趣搜一下：余果的专栏）。然后我就对他挺感兴趣的，以及对于个人博客这件事也突然有了更多的兴趣。 我感觉这是一个自己的私人领域，可以自由发挥，更像是自己盖了一栋房子，至于房子盖成什么样，就看自己的能力了。 一开始我选择的是 hexo 静态博客，他有很多优势，免费，部署快，可以不断的白嫖 github 仓库存储，包括文章，图片等，只要你愿意折腾，总有办法可以解决。 然后还有很多大佬开发了各种各样的插件，还有各种第三方平台。hexo 官网的主题也是相当丰富，都是个人开发者做出来，总能找到自己喜欢的那一款。 为此我还开发一款轻量的纯文字主题，simple99，感兴趣的话可以在官方列表搜索到，这里就不贴链接了，有夹带私货的嫌疑。 之后，我就把自己之前写的笔记都放在了这个博客中，部署之后自己查看的时候，也挺有成就感的。 ## 本质 >隔了两个月，开始继续更新这篇博客，接下来我会持续讲述自己的道路... 不知不觉已经写了一年的博客，从最开始兴奋，冲动，到现在的平息了内心的悸动，这一场心理历程，其实走的颇为坎坷。 中间有一段时间，频繁更换博客程序，hexo, hugo, halo, wordpress, typecho 最后终于确定了 hugo，一方面因为它是静态的系统，不需要服务器和数据库，可以随意在任何支持的平台部署（虽然最后我还是为了速度，将它部署在服务器上），而且它渲染的速度相当快，当文章越来越多时，使用 hexo 会渲染 10 多秒，让我感到很难受，因此我选择了速度更快的 hugo。 度过那段时间后，我感觉自己内心平静了很多，不会再为这些事情而折腾，处于一个平静期的状态。我想，这大概就是每个博主都要经历的阶段吧，抛去花里胡哨的外表，直击博客的本质。 我把它总结出四个字 --- 记录、分享。 现在我认识很多新的博主，大部分都是刚刚接触，内心感官就是新奇，渴望部署一个让自己满意的博客，我都会指点一些细节和心得，也很开心。毕竟，在这个博客衰败，碎片化信息的时代，还有人能喜欢这个圈子，这确让人感到开心。 我会鼓励他们自己动手解决问题，然后进行思考，得出结果，这无疑是很令各位博主有成就感的。 有时候我也会写一些教程，或者开发的小插件分享出去，有需要的伙伴就可以到搜索引擎输入关键字，或许可以看到我的文章，这也让我感到荣幸。 ## 反思 很多时候，我都会审视自己，在这个时代要不要继续坚持下去写博客，大部分人做的都是公众号，自媒体等等。这也是时代的趋势。然后我自己慢慢思考，拨开云雾见光明，我发现我想要的不是自媒体那样的感觉，我更渴望拥有自己的一片净土，偶尔放一些新奇的玩意，然后写写自己的生活记录和一些技术笔记。 我知道自己的水平远达不到大神的地步，单纯的想写点东西。仅此而已，不为其他。
via 子舒的博客
## 关于这个博客的构成 这个就放在最前面吗，算是起到一个统计整理的作用。 博客基础的框架使用是 hugo, 前端样式是自己慢慢构思的，可能是因为没有设计师的天分吧，构思出来的 UI 就很奇怪。 我也尽量将色彩往黑白上靠，就是为了避免色彩的冲突造成阅读的不适，以文字为主体，也可以将我的重心转移到写文章上来。 然后通过本地渲染构建了 `public` 静态文件，我将这些文件推送到服务器上，服务器的配置是最基础的 1h2g，不过已经完全可以满足个人正常使用了，这样可以提升访问速度。同时的话，我在 Github 备份了源码，这样就不用害怕如果有什么突发事件。 而且，通过 Github，我在 vercel 也构建了一个备份网站，基于 rope 可以直接生成一个项目网站，也是非常实用。 目前这个博客主题我并没有将其分离起来，一是不想专门维护一个开源项目，二是我也很难保证其稳定性，隔三差五我都会优化或者改变整体布局，如果作为一个开源项目的话，这毫无疑问是不合格的。 如果你想使用同款主题，可以前往仓库 [https://github.com/anghunk/blog](https://github.com/anghunk/blog)，这是博客全部的源码。 你可以把 `themes` 文件夹下的代码 copy 走。或者直接 fork 仓库，然后把 `/content` 内的文章删掉，换成你自己的。 --- **2021.07.21 落笔** 写这篇文章，大概是想回顾一下自己从写第一篇博客，一直到现在的心理历程吧！但是动笔的时候，又突然改变想法了。决定好好审视一下自己的内心，“我为什么要写博客？”  ## 伊始 故事最开始源于 2020 年五月份，当时我正频临毕业之际，正处于找工作的状态，对前途还是有些迷茫的，不知道未来该怎么走，往哪方面发展，再加上对自己不够自信，可能有些焦虑吧。 但是不论心态怎么变化，生活总是要继续的，在闲暇之余我浏览很多技术网站，希望可以提升自己，当时我比较热衷于 csdn 和博客园吧，两个比较大的中文博客网站，不论是学习和查资料，百度出来的内容基本都是这两个网站的文章。然后在平时学习累计的过程中，我也会写一些笔记或者总结的内容，开始我是直接存放在本地，后来我放在 Gayhub 上面。 >Gayhub: 又名，Github. 全球最大的同性交友网站，在这里你可以畅快的交流技术，copy code。 但是上过这个网站的人都懂，它的速度是多么的令人着急。虽然后来学会了一些科学上网的方法，但是还是很不爽，所以我把目光投向了技术交流平台，论坛社区。我开始试着在把笔记放在 csdn 上面，当做博客发布出去，至今还保留一些浅显易懂的文章在我的 csdn 账号上，不过许久没有登陆了。 ## 接触 有一天，一个做前端的朋友给我推荐了一本书，叫做《Web 全栈工程师的自我修养》，作者是余果，之前我还写过一篇读后感，感兴趣的话也可以读一下，[《对全栈的一些思考》](/blog/10.html) >挺好的一本书，也很畅销，读完电子版的，我还专门为此买了一本纸质的书，表示支持一下作者。 然后了解到作者在大学时期就开始写个人博客，在深入了解过程中，我觉得他的思想真的不错，写的内容也很有深度，虽然很多文章跟技术无关，但是不可否认是好文章。（现在他已经转到微信公告号了，有兴趣搜一下：余果的专栏）。然后我就对他挺感兴趣的，以及对于个人博客这件事也突然有了更多的兴趣。 我感觉这是一个自己的私人领域，可以自由发挥，更像是自己盖了一栋房子，至于房子盖成什么样，就看自己的能力了。 一开始我选择的是 hexo 静态博客，他有很多优势，免费，部署快，可以不断的白嫖 github 仓库存储，包括文章，图片等，只要你愿意折腾，总有办法可以解决。 然后还有很多大佬开发了各种各样的插件，还有各种第三方平台。hexo 官网的主题也是相当丰富，都是个人开发者做出来，总能找到自己喜欢的那一款。 为此我还开发一款轻量的纯文字主题，simple99，感兴趣的话可以在官方列表搜索到，这里就不贴链接了，有夹带私货的嫌疑。 之后，我就把自己之前写的笔记都放在了这个博客中，部署之后自己查看的时候，也挺有成就感的。 ## 本质 >隔了两个月，开始继续更新这篇博客，接下来我会持续讲述自己的道路... 不知不觉已经写了一年的博客，从最开始兴奋，冲动，到现在的平息了内心的悸动，这一场心理历程，其实走的颇为坎坷。 中间有一段时间，频繁更换博客程序，hexo, hugo, halo, wordpress, typecho 最后终于确定了 hugo，一方面因为它是静态的系统，不需要服务器和数据库，可以随意在任何支持的平台部署（虽然最后我还是为了速度，将它部署在服务器上），而且它渲染的速度相当快，当文章越来越多时，使用 hexo 会渲染 10 多秒，让我感到很难受，因此我选择了速度更快的 hugo。 度过那段时间后，我感觉自己内心平静了很多，不会再为这些事情而折腾，处于一个平静期的状态。我想，这大概就是每个博主都要经历的阶段吧，抛去花里胡哨的外表，直击博客的本质。 我把它总结出四个字 --- 记录、分享。 现在我认识很多新的博主，大部分都是刚刚接触，内心感官就是新奇，渴望部署一个让自己满意的博客，我都会指点一些细节和心得，也很开心。毕竟，在这个博客衰败，碎片化信息的时代，还有人能喜欢这个圈子，这确让人感到开心。 我会鼓励他们自己动手解决问题，然后进行思考，得出结果，这无疑是很令各位博主有成就感的。 有时候我也会写一些教程，或者开发的小插件分享出去，有需要的伙伴就可以到搜索引擎输入关键字，或许可以看到我的文章，这也让我感到荣幸。 ## 反思 很多时候，我都会审视自己，在这个时代要不要继续坚持下去写博客，大部分人做的都是公众号，自媒体等等。这也是时代的趋势。然后我自己慢慢思考，拨开云雾见光明，我发现我想要的不是自媒体那样的感觉，我更渴望拥有自己的一片净土，偶尔放一些新奇的玩意，然后写写自己的生活记录和一些技术笔记。 我知道自己的水平远达不到大神的地步，单纯的想写点东西。仅此而已，不为其他。
via 子舒的博客
npm install 报错和取消本地代理的问题
`npm install`下载依赖包的时候出现下面错误，请求失败。 ```shell npm ERR! FetchError: request to https://registry.npm.taobao.org/cnpm failed, reason: connect ECONNREFUSED 127.0.0.1:1181 ``` 调试过后发现是本地代理的问题，取消它。 ```shell npm config delete proxy npm config delete https-proxy ``` `npm install` 成功运行，完毕。
via 子舒的博客
`npm install`下载依赖包的时候出现下面错误，请求失败。 ```shell npm ERR! FetchError: request to https://registry.npm.taobao.org/cnpm failed, reason: connect ECONNREFUSED 127.0.0.1:1181 ``` 调试过后发现是本地代理的问题，取消它。 ```shell npm config delete proxy npm config delete https-proxy ``` `npm install` 成功运行，完毕。
via 子舒的博客
使用 jq 做一个数字递增效果
数字递增，顾名思义就是数字不断增加，数字递增的效果就是要一定时间内，让数字有一个增加的特效，一般用于强调某个内容。 用 jquery 也很好处理，大概就是下面这些。 * `data-to` 属性代表最后想要递增到的数值 * `data-speed` 代表数值想要递增的过程时间 `class="num-ber"` 和 `id="count-number"` 按照这个填入。 ```html
+
``` 引入 jquery 之后再添加下面的 js 代码。 ```js $.fn.countTo = function (a) { a = a || {}; return $(this).each(function () { var c = $.extend({}, $.fn.countTo.defaults, { from: $(this).data("from"), to: $(this).data("to"), speed: $(this).data("speed"), refreshInterval: $(this).data("refresh-interval"), decimals: $(this).data("decimals") }, a); var h = Math.ceil(c.speed / c.refreshInterval), i = (c.to - c.from) / h; var j = this, f = $(this), e = 0, g = c.from, d = f.data("countTo") || {}; f.data("countTo", d); if (d.interval) { clearInterval(d.interval) } d.interval = setInterval(k, c.refreshInterval); b(g); function k() { g += i; e++; b(g); if (typeof (c.onUpdate) == "function") { c.onUpdate.call(j, g) } if (e >= h) { f.removeData("countTo"); clearInterval(d.interval); g = c.to; if (typeof (c.onComplete) == "function") { c.onComplete.call(j, g) } } } function b(m) { var l = c.formatter.call(j, m, c); f.html(l) } }) }; $.fn.countTo.defaults = { from: 0, to: 0, speed: 1000, refreshInterval: 100, decimals: 0, formatter: formatter, onUpdate: "null, onComplete: null }; function formatter(b, a) { return b.toFixed(0) } $("#count-number").data("countToOptions", { formatter: function (b, a) { return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") } }); $(".num-ber").each(count); function count(a) { var b = $(this); a = $.extend({}, a || {}, b.data("countToOptions") || {}); b.countTo(a) }; ```
via 子舒的博客
数字递增，顾名思义就是数字不断增加，数字递增的效果就是要一定时间内，让数字有一个增加的特效，一般用于强调某个内容。 用 jquery 也很好处理，大概就是下面这些。 * `data-to` 属性代表最后想要递增到的数值 * `data-speed` 代表数值想要递增的过程时间 `class="num-ber"` 和 `id="count-number"` 按照这个填入。 ```html
+
``` 引入 jquery 之后再添加下面的 js 代码。 ```js $.fn.countTo = function (a) { a = a || {}; return $(this).each(function () { var c = $.extend({}, $.fn.countTo.defaults, { from: $(this).data("from"), to: $(this).data("to"), speed: $(this).data("speed"), refreshInterval: $(this).data("refresh-interval"), decimals: $(this).data("decimals") }, a); var h = Math.ceil(c.speed / c.refreshInterval), i = (c.to - c.from) / h; var j = this, f = $(this), e = 0, g = c.from, d = f.data("countTo") || {}; f.data("countTo", d); if (d.interval) { clearInterval(d.interval) } d.interval = setInterval(k, c.refreshInterval); b(g); function k() { g += i; e++; b(g); if (typeof (c.onUpdate) == "function") { c.onUpdate.call(j, g) } if (e >= h) { f.removeData("countTo"); clearInterval(d.interval); g = c.to; if (typeof (c.onComplete) == "function") { c.onComplete.call(j, g) } } } function b(m) { var l = c.formatter.call(j, m, c); f.html(l) } }) }; $.fn.countTo.defaults = { from: 0, to: 0, speed: 1000, refreshInterval: 100, decimals: 0, formatter: formatter, onUpdate: "null, onComplete: null }; function formatter(b, a) { return b.toFixed(0) } $("#count-number").data("countToOptions", { formatter: function (b, a) { return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") } }); $(".num-ber").each(count); function count(a) { var b = $(this); a = $.extend({}, a || {}, b.data("countToOptions") || {}); b.countTo(a) }; ```
via 子舒的博客
hugo 如何使用 Cusdis ?
Cusdis 是一个界面清爽、注重隐私的轻量级 (~5kb gzip) 评论系统，可以很方便地与 React、Vue 或其他博客系统结合，并且还提供了一个后台来管理所有的评论。 由于 Cusdis 自称是 Disqus 的替代方案，因此它还支持一键从 Disqus 导入、支持邮件通知等功能。 官方地址：[https://cusdis.com/](https://cusdis.com/) 他通常是用于静态博客的一个第三方评论系统，但是官方文档没有提供如何在 hugo 中使用的参数，我也是报错了多次才琢磨出来。 ## 1. 本地部署 根据提示，注册账号，然后 `Add website` ，建立一个仓库。 进入它，然后点击 `setting`。  `Embed Code` 会提供几行代码以及一些 api，复制他们。  `data-app-id` 是注册时自动生成的，注意保密，每个人都不一样。 ```html
``` 将这些代码复制到本地主题的 `comments.html` 文件内（就是评论的那个模块，每个主题或许都不一样，注意分辨）。 这个时候如果你 hugo server 基本都会报错，因为没有修改 `{{ PAGE_ID }}` 等内容，这不是 hugo 官方提供的参数，按照我下面的格式，将 id, url, title 重写一下即可。 ```html ``` 保存重新 hugo server 即可。 >这样做的好处是当你接受一条评论信息后，审核列表可以清楚地标明来自哪一篇文章。通常大多数博客都提供了这么一个功能。 ## 2. 邮箱提醒 除了必备的评论功能，Cusdis 还提供了一个非常快速的邮箱提醒功能，不需要绑定密匙，直接输入自己的邮箱即可。 先勾选这个 Email Notification，然后点击下方的 Advanced Notification Settings (高级通知设置)  就可以进入设置，输入自己的邮箱。  ## 3. 中文化 默认的评论和提示文字均为英文，对我们很不友好，这里提供一个不错的解决方案，在引入 Cusdis 之后，顺便复制引入下面这段代码。 ```html ``` 。。。
via 子舒的博客
Cusdis 是一个界面清爽、注重隐私的轻量级 (~5kb gzip) 评论系统，可以很方便地与 React、Vue 或其他博客系统结合，并且还提供了一个后台来管理所有的评论。 由于 Cusdis 自称是 Disqus 的替代方案，因此它还支持一键从 Disqus 导入、支持邮件通知等功能。 官方地址：[https://cusdis.com/](https://cusdis.com/) 他通常是用于静态博客的一个第三方评论系统，但是官方文档没有提供如何在 hugo 中使用的参数，我也是报错了多次才琢磨出来。 ## 1. 本地部署 根据提示，注册账号，然后 `Add website` ，建立一个仓库。 进入它，然后点击 `setting`。  `Embed Code` 会提供几行代码以及一些 api，复制他们。  `data-app-id` 是注册时自动生成的，注意保密，每个人都不一样。 ```html
``` 将这些代码复制到本地主题的 `comments.html` 文件内（就是评论的那个模块，每个主题或许都不一样，注意分辨）。 这个时候如果你 hugo server 基本都会报错，因为没有修改 `{{ PAGE_ID }}` 等内容，这不是 hugo 官方提供的参数，按照我下面的格式，将 id, url, title 重写一下即可。 ```html ``` 保存重新 hugo server 即可。 >这样做的好处是当你接受一条评论信息后，审核列表可以清楚地标明来自哪一篇文章。通常大多数博客都提供了这么一个功能。 ## 2. 邮箱提醒 除了必备的评论功能，Cusdis 还提供了一个非常快速的邮箱提醒功能，不需要绑定密匙，直接输入自己的邮箱即可。 先勾选这个 Email Notification，然后点击下方的 Advanced Notification Settings (高级通知设置)  就可以进入设置，输入自己的邮箱。  ## 3. 中文化 默认的评论和提示文字均为英文，对我们很不友好，这里提供一个不错的解决方案，在引入 Cusdis 之后，顺便复制引入下面这段代码。 ```html ``` 。。。
via 子舒的博客
使用 js 随机生成背景颜色
先写一个简单的 html 页面出来 ```html
● html
● css
● js
``` 通过 `Math.random()` 属性可以随机生成一个数字，然后通过转化为十六进制的方法进行处理，下面就是随机生成 6 位数字的代码，并进行转化的代码。 ```js const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; ``` 可以在控制台输出看一下结果，随机生成了一个结果 `#62113b`。  接下来就需要将这个颜色传给上面的 li 标签，首先需要将所有的 li 遍历然后生成一个数组，可以使用 for 循环进行遍历。 ```js var arr = document.getElementsByTagName('li'), temp = []; for (var i = 0; i < arr.length; i++) { temp.push(arr[i].innerHTML); } ``` 然后再对数组进行循环处理，每个 li 标签要要运行一遍随机生成颜色，并且传给自身。同样也是通过 for 循环进行操作。 ```js var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { for (var num = 0; num < li.length; num++) { li[num].style.background = randomHex(); } } ``` 这些事件都是在页面加载完成之后运行的，所以需要通过 `window.onload` 写入事件，然后把所有的代码合在一起。 看看效果如果。  把这些复制下来放到本地运行一下就可以看到效果了。 ```html 随机生成颜色
● html
● css
● js
``` 如果有更好的写法，欢迎评论！
via 子舒的博客
先写一个简单的 html 页面出来 ```html
● html
● css
● js
``` 通过 `Math.random()` 属性可以随机生成一个数字，然后通过转化为十六进制的方法进行处理，下面就是随机生成 6 位数字的代码，并进行转化的代码。 ```js const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; ``` 可以在控制台输出看一下结果，随机生成了一个结果 `#62113b`。  接下来就需要将这个颜色传给上面的 li 标签，首先需要将所有的 li 遍历然后生成一个数组，可以使用 for 循环进行遍历。 ```js var arr = document.getElementsByTagName('li'), temp = []; for (var i = 0; i < arr.length; i++) { temp.push(arr[i].innerHTML); } ``` 然后再对数组进行循环处理，每个 li 标签要要运行一遍随机生成颜色，并且传给自身。同样也是通过 for 循环进行操作。 ```js var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { for (var num = 0; num < li.length; num++) { li[num].style.background = randomHex(); } } ``` 这些事件都是在页面加载完成之后运行的，所以需要通过 `window.onload` 写入事件，然后把所有的代码合在一起。 看看效果如果。  把这些复制下来放到本地运行一下就可以看到效果了。 ```html 随机生成颜色
● html
● css
● js
``` 如果有更好的写法，欢迎评论！
via 子舒的博客
有关国庆出行的感想
好长时间没回老家了，这次本想借着国庆七天回家一趟，顺便处理一些其他的事情。所以我从 9 月 30 日晚，与家人一同驾车回家。 ### 艰难的回家之路 刚上高速跑得很快，原以为已经错开出行高峰期，结果发现是我想多了，不出意外的堵在高速上。 导航呢，这时候也是推荐不走高速，直接从国道走（真的是后悔），然后我们就下了高速，结果这个导航给我整的有点蒙，在临安绕来绕去，11 点从杭州出发，凌晨 3 点还在临安出不去，国道都在堵车，然后没办法只能就地休息，困得实在不行了，其实睡也睡不舒服，跑夜车都是这个样子。  睡到 5 点多，这时候已经是 10 月 1 日了，继续出发，按照导航走，结果走到了一个盘山公路，不知道叫什么山，没注意看。  大概走了 3 个小时，盘山公路弯弯曲曲的，九转十八弯。不过风景还行，权当安慰自己出来旅游了。 中午才从山里出来，这时候在安徽境内，接近六安。 大家随便弄点泡面吃了吃，继续出发，已经是 1 号下午了。跑到下午 5 点多的时候，距离老家还有 100 公里左右，再来两个小时差不多就到了。结果发生了一些小意外，导致轮胎爆了，然后处理事故到后半夜，修好车也不能走了，身心疲惫，就地开了个宾馆休息，一夜的深度睡眠真的很爽，以后再也不熬夜了，难受死。 早上睡到 9 点半起，简单收拾一下，10 点出发，也没有吃饭，不太饿，打算一口气开回家，也是不负众望，午饭前就赶到县城了。 好久没回家，发现物价真的低，四个人吃的撑死，最后没吃完，把剩下的菜打包带回去，结账也才 150 左右。不过工资水平也和物价水平差不多，然后就引发了我的一个新的思考，以后是否可以回县城养老。 --- 回家碎碎念...照片 (无) --- 6 号踏上返程的道路，7 号回到杭州，真的身心疲惫。又是一路的夜车，在服务区休息了两个小时也顶不了多大的用。 到杭州之后就开始胃疼了，大致算了一下，7 天，有 4 天都在路上奔波，吃的都是饼干泡面，实在是扛不住，到这边之后吃完饭洗了个澡直接睡到下午六点，起来还是精神有些萎靡，我估计至少得三天才能缓成正常。毕竟年纪大了，真的痛苦。 ### 关于开车出行的反思 长了个记性，以后再也不开学出行跑长途了，特别节假日，火车七八个小时，睡一觉就能解决的问题搞得那么复杂，不过也是因为带了一些行李的缘故。下次就打算行李直接寄回去，随身背个包，然后坐火车轻装上阵，岂不是美滋滋。 ### 吐槽高速的一些事情 安徽段高速真的不行，管理不到位，救援迟缓，在安徽境内高速上堵车的时候，应急车道基本没闲着，私家车直接跑，路过别的省份基本很少有这种现象，而且出现事故的时候，救援迟缓，交管不到位，直接导致堵车堵了很长时间，我在河南段，浙江段跑的时候，看到事故都是处理的很快，基本没有太长的堵车现象。
via 子舒的博客
好长时间没回老家了，这次本想借着国庆七天回家一趟，顺便处理一些其他的事情。所以我从 9 月 30 日晚，与家人一同驾车回家。 ### 艰难的回家之路 刚上高速跑得很快，原以为已经错开出行高峰期，结果发现是我想多了，不出意外的堵在高速上。 导航呢，这时候也是推荐不走高速，直接从国道走（真的是后悔），然后我们就下了高速，结果这个导航给我整的有点蒙，在临安绕来绕去，11 点从杭州出发，凌晨 3 点还在临安出不去，国道都在堵车，然后没办法只能就地休息，困得实在不行了，其实睡也睡不舒服，跑夜车都是这个样子。  睡到 5 点多，这时候已经是 10 月 1 日了，继续出发，按照导航走，结果走到了一个盘山公路，不知道叫什么山，没注意看。  大概走了 3 个小时，盘山公路弯弯曲曲的，九转十八弯。不过风景还行，权当安慰自己出来旅游了。 中午才从山里出来，这时候在安徽境内，接近六安。 大家随便弄点泡面吃了吃，继续出发，已经是 1 号下午了。跑到下午 5 点多的时候，距离老家还有 100 公里左右，再来两个小时差不多就到了。结果发生了一些小意外，导致轮胎爆了，然后处理事故到后半夜，修好车也不能走了，身心疲惫，就地开了个宾馆休息，一夜的深度睡眠真的很爽，以后再也不熬夜了，难受死。 早上睡到 9 点半起，简单收拾一下，10 点出发，也没有吃饭，不太饿，打算一口气开回家，也是不负众望，午饭前就赶到县城了。 好久没回家，发现物价真的低，四个人吃的撑死，最后没吃完，把剩下的菜打包带回去，结账也才 150 左右。不过工资水平也和物价水平差不多，然后就引发了我的一个新的思考，以后是否可以回县城养老。 --- 回家碎碎念...照片 (无) --- 6 号踏上返程的道路，7 号回到杭州，真的身心疲惫。又是一路的夜车，在服务区休息了两个小时也顶不了多大的用。 到杭州之后就开始胃疼了，大致算了一下，7 天，有 4 天都在路上奔波，吃的都是饼干泡面，实在是扛不住，到这边之后吃完饭洗了个澡直接睡到下午六点，起来还是精神有些萎靡，我估计至少得三天才能缓成正常。毕竟年纪大了，真的痛苦。 ### 关于开车出行的反思 长了个记性，以后再也不开学出行跑长途了，特别节假日，火车七八个小时，睡一觉就能解决的问题搞得那么复杂，不过也是因为带了一些行李的缘故。下次就打算行李直接寄回去，随身背个包，然后坐火车轻装上阵，岂不是美滋滋。 ### 吐槽高速的一些事情 安徽段高速真的不行，管理不到位，救援迟缓，在安徽境内高速上堵车的时候，应急车道基本没闲着，私家车直接跑，路过别的省份基本很少有这种现象，而且出现事故的时候，救援迟缓，交管不到位，直接导致堵车堵了很长时间，我在河南段，浙江段跑的时候，看到事故都是处理的很快，基本没有太长的堵车现象。
via 子舒的博客
通过 getTimezoneOffset() 方法判断当前时区是否为夏令时
`getTimezoneOffset() 方法` 方法返回 UTC 时间和本地时间之间的时差，以分钟为单位。 >世界协调时间 (UTC) 是世界时间标准设定的时间，UTC 时间与 GMT 时间（格林威治时间）相同。 测一下我所在时区和标准时区的时间差 ```js function myDate () { var d = new Date(); var n = d.getTimezoneOffset(); console.log(n) } myDate(); // PS E:\demo> node 1.js // -480 ``` 也就是 480 分钟（8 个小时），北京时间是东八区，刚好与格林威治时间相差 8 个小时，这说明 `getTimezoneOffset()` 方法是很有效的。 接下来利用这个方法，判断一下当前时区是否为夏令时。 ```js const time1 = new Date(2021, 0, 1); const time2 = new Date(2021, 6, 1); if (time1.getTimezoneOffset() != time2.getTimezoneOffset()) { console.log('夏令时'); } else { console.log('非夏令时'); } // PS E:\demo> node 1.js // 非夏令时 ```
via 子舒的博客
`getTimezoneOffset() 方法` 方法返回 UTC 时间和本地时间之间的时差，以分钟为单位。 >世界协调时间 (UTC) 是世界时间标准设定的时间，UTC 时间与 GMT 时间（格林威治时间）相同。 测一下我所在时区和标准时区的时间差 ```js function myDate () { var d = new Date(); var n = d.getTimezoneOffset(); console.log(n) } myDate(); // PS E:\demo> node 1.js // -480 ``` 也就是 480 分钟（8 个小时），北京时间是东八区，刚好与格林威治时间相差 8 个小时，这说明 `getTimezoneOffset()` 方法是很有效的。 接下来利用这个方法，判断一下当前时区是否为夏令时。 ```js const time1 = new Date(2021, 0, 1); const time2 = new Date(2021, 6, 1); if (time1.getTimezoneOffset() != time2.getTimezoneOffset()) { console.log('夏令时'); } else { console.log('非夏令时'); } // PS E:\demo> node 1.js // 非夏令时 ```
via 子舒的博客