Brains - 灵感乌托邦 - 前端学习
type: channel
link: https://www.fuuuy.cn/tag/前端学习/
items: 『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法
items: 『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系
items: 『笔记』JavaScript进阶学习笔记 0
items: 『笔记』JavaScript基础学习笔记 6
items: 『笔记』JavaScript基础学习笔记 2
items: 『笔记』JavaScript基础学习笔记 1

『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法
type: item
date: 2022-09-09T10:53:00+08:00
description: 前言主题有好多模板设置了分类的背景图，调用了第三方api但是最近第三方挂了这就是图省事不写代码的后果，一旦图片都失效，网站打开速度慢不说，图片的背景图还是灰蒙蒙一片，非常尴尬。。。百度了下必应每日api源代码有很多，但是随机显示的也都是调用人家自己的，这样就可能再次出现无法打开的情况，但是仅仅调用一张图片又略显单调（最烦我这种啥也不是，要求还多的人。。。）终于皇天不负有心人让我找到了一个随机显示必应图片的api调用方法，附上代码及适用教程。调用方法(教程和代码在下方)此API只支持https调用，所有参数均仅适用于以 GET 方式进行请求，可直接插入img标签中请求地址：（不要适用本站api代码，跨域）https://www.hellolin.cn/api-hello/bing调用参数参数代码参数含义可用参数rand是否随机显示最近8天内的图片true or falseday显示指定的最近图片-1，0，1，2，3，4，5，6，7(0为今天，-1为昨天)size指定获取图片大小详见下方可用分辨率info获取图片基础信息（json格式）true or false以上所有参数均非必要，默认参数为rand=false，day=0，size=1920×1080，info=false可用分辨率1920x10801366x7681280x7681024x768800x600调用示例默认调用：https://www.hellolin.cn/api-hello/bing不带任何参数调用，显示必应当天图片。Info调用：https://www.hellolin.cn/api-hello/bing?info=true返回值：{ title:Micheldever Wood的蓝铃花，英国汉普郡 (© Hursley/Getty Images Plus), url:https://www.bing.com/th?id=OHR.BluebellWood_ZH-CN8128422960_1920x1080.jpg, link:https://www.bing.com/search?q=%E8%93%9D%E9%93%83%E8%8A%B1&form=hpcapt&mkt=zh-cn, time:20200419 }随机调用:(随机显示一张图片)https://www.hellolin.cn/api-hello/bing?rand=true {mtitle title="随机显示，刷新更换"/}教程和API代码{hide}首先在网站根目录新建一个php文件，例如：index.php，然后粘贴如下代码：<?php //判断是否随机调用 if ($_GET['rand']==='true') { $gettime = rand(-1,7); }else{ //若不为随机调用则判断是否指定日期 $gettimebase = $_GET['day']; if (empty($gettimebase)) { $gettime = 0; }else{ $gettime = $gettimebase; } } //获取Bing Json信息 $json_string = file_get_contents('https://www.bing.com/HPImageArchive.aspx?format=js&idx='.$gettime.'&n=1'); //转换为PHP数组 $data = json_decode($json_string); //提取基础url $imgurlbase = "https://www.bing.com".$data->{"images"}[0]->{"urlbase"}; //判断是否指定图片大小 $imgsizebase = $_GET['size']; if (empty($imgsizebase)){ $imgsize = "1920x1080"; }else{ $imgsize = $imgsizebase; } //建立完整url $imgurl = $imgurlbase."_".$imgsize.".jpg"; //获取其他信息 $imgtime = $data->{"images"}[0]->{"startdate"}; $imgtitle = $data->{"images"}[0]->{"copyright"}; $imglink = $data->{"images"}[0]->{"copyrightlink"}; //判断是否只获取图片信息 if ($_GET['info']==='true') { echo "{title:".$imgtitle.",url:".$imgurl.",link:".$imglink.…

『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系
type: item
date: 2022-03-16T20:11:00+08:00
description: 前言前不久突发奇想，录了一个视频然后留了自己的博客，却发现博客却没有链接回去的方式，所以就写了一个社交信息的侧栏模块然后有小伙伴看到了，专门留言让我出个教程，当时答应的好好的，可是一连鸽了好几天，今天进入留言板看到许诺的话，不禁老脸一红，差点忘了这茬了 ::(狂汗) 成果展示博客的侧栏增加社交信息2.0 这个模块适合任何主题及程序，只需要根据自己的主题或者程序进行改进就行我这里演示的是我正在使用的Joe主题，是一款轻量、开源的主题{tabs}{tabs-pane label="PC展示"}{/tabs-pane}{tabs-pane label="PE展示"}{/tabs-pane}{/tabs}教程开始一、添加PC端打开 Joe/public/aside.php 文件，然后在想要增加的位置添加以下代码{tabs}{tabs-pane label="代码"}{hide} <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?> <?php $SocialInfo = $this->options->SocialInfo; if ($SocialInfo) { $SocialInfo_arr = explode("\r\n", $SocialInfo); if (count($SocialInfo_arr) > 0) { for ($i = 0; $i < count($SocialInfo_arr); $i++) { $QQ = explode("||", $SocialInfo_arr[$i])[0]; $WeChat = explode("||", $SocialInfo_arr[$i])[1]; $BiliBili = explode("||", $SocialInfo_arr[$i])[2]; $Weibo = explode("||", $SocialInfo_arr[$i])[3]; } } } ?> <a href="https://wpa.qq.com/msgrd?v=3&uin=<?php echo trim($QQ) ?>&site=qq&menu=yes" target="_blank" title="QQ"> <img src="<?php echo trim($WeChat) ?>" /> <a href="https://space.bilibili.com/<?php echo trim($BiliBili) ?>" target="_blank" title="哔哩哔哩"> <a href="https://weibo.com/u/<?php echo trim($Weibo) ?>" target="_blank" title="微博"> <?php endif; ?>{/hide}{/tabs-pane}{tabs-pane label="位置"}{/tabs-pane}{/tabs}二、添加PE端打开 Joe/public/header.php 文件，然后在想要增加的位置添加上面PC的代码PE端的代码和上面的一样，只需要将 换成 三、添加后台直接在 Joe/functions.php 添加以下代码（当然，如果看过我之前的文章，也可以放在 Joe/public/custom.php 里面）// 侧栏社交信息开关 $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'SocialSwitch', array( 'off' => '关闭（默认）', 'on' => '开启PC社交信息', 'on1' => '开启PE社交信息', 'on2' => '同时开启PC与PE社交信息', ), 'off', '是否启用侧栏社交信息', '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）' ); $SocialSwitch->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialSwitch->multiMode()); //侧栏社交信息 $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea( 'SocialInfo', NULL, NULL, '侧栏社交信息', '介绍：用于设置侧…

『笔记』JavaScript进阶学习笔记 0
type: item
date: 2021-11-22T14:18:00+08:00
description: 数据类型1、分类基本（值）类型{alert type="info"}String：任意字符串Number：任意的数字Boolean：true/falseundefined：undefinednull ：null{/alert}对象（引用）类型{alert type="info"}object ：任意对象function ：函数，一种特别的对象（可以执行）array ：数组，一种特别的对象（数值具有下标，内部数据是有序的）{/alert}2、类型的判断{alert type="success"}typeof ：可以判断 undefined/ 数值 / 字符串 / 布尔值Boolean / Function -不能判断 null和object object和arrayinstanceof ：判断对象的具体类型=== ：全等，可以判断undefined,null{/alert} 1、undefined与null的区别？undefined 代表定义未赋值null 代表定义并赋值了，但是值为null2、什么时候给变量赋值为null？初始赋值：表明将要赋值为对象结束前：让对象成为垃圾对象（垃圾回收）3、严格区别变量类型与数据类型？（1）数据的类型基本类型对象类型（2）变量的类型（变量内存值的类型）基本类型：保存的基本类型的数据引用类型：保存的是地址值对象类型即是引用类型 数据、变量、内存定义1、什么是数据存储在内存中代表特点信息的东西，本质上是0101.......数据的特点：可传递、可运算2、什么是内存内存条通电以后产生的可存储数据的空间（临时的）内存产生和死亡： 内存条（电路板）==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失一块小内存的2个数据 `内部存储的数据` `地址值`内存分类 `栈：保存全局变量/局部变量（变量名）` `堆：对象（函数、数组）` 3、什么是变量可变化的量：由变量名、变量值组成每个变量都对应一块小内存，变量名用来查找对应的内存，变量值就是内存中保存的数据4、内存、数据、变量三者之间的关系内存是用来存储数据的空间变量是内存的标识

『笔记』JavaScript基础学习笔记 6
type: item
date: 2021-11-17T21:32:00+08:00
description: DOM（文本对象模型）（20）鼠标拖拽的事件拖拽(一、二) 我是一段文字 box的偏移量=鼠标的偏移量-元素的偏移量捕获测试 按钮01 按钮02 拖拽（三） 我是一段文字 <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;" （21）滚轮的事件 （22）键盘的事件 <!-- --> 键盘移动vid {nextPage/}BOM（浏览器对象模型）BOM可以通过JS来操作浏览器在BOM中提供了一组对象，用来完成对浏览器的操作BOM对象{alert type="success"}Window 代表的是整个浏览器的窗口，同时也是网页中的全局对象Navigator 代表当前浏览器的信息，通过该对象可以识别不同的浏览器Location 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效Screen 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息这些BOM对象在浏览器中都是作为window对象的属性保存的{/alert}// console.log(window.navigator); console.log(navigator); console.log(location); console.log(history);一、Navigator（浏览器信息）代表当前浏览器的信息，通过该对象可以识别不同的浏览器由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了一般只会使用userAgent来判断浏览器的信息userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent// appCodeName 返回浏览器名称的代码 // appName 返回浏览器的名称 // userAgent 返回一个字符串来描述浏览器的信息 // alert(navigator.appName); // 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了 var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("我是火狐"); }else if(/chrome/i.test(ua)){ alert("我是Chrome"); }else if(/msie/i.test(ua)){ alert("我是IE浏览器"); }else if("ActiveXObject" in window){ alert("你是IE11，我已经抓住你了"); } // 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息 // 比如：ActiveXObject // alert("ActiveXObject" in window); if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了"); }else{ alert("你不是IE"); } 二、History（历史记录）代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页 点我一下 History 去下一个页面 三、Location（浏览器地址栏）该对象中封装了浏览器的地址栏的信息 点我一下 四、Window（浏览器的窗口）window的方法1、 定时调用 （1）切换图片练习 开始 停止 （2）修改div移动练习 2、 延时调用 （1）定时器的应用一 点击按钮以后box1向右移动 {nextPage/}（2）定时器的应用二 点击按钮以后box1向右移动 点击按钮以后box1向左移动 （3）定时器的应用三 点击按钮以后box1向右移动 点击按钮以后box1向左移动 点击按钮以后box2向右移动 测试按钮 tools.js（用于存放工具程序） // 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 f…

『笔记』JavaScript基础学习笔记 2
type: item
date: 2021-10-25T11:43:00+08:00
description: 对象JS中的数据类型{alert type="success"}String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义以上五种类型属于基本类型，只要不是以上五种，都是对象Object 对象{/alert}基本数据类型都是单一的值，值和值之间没有任何联系在JS中用来表示一个人的信息（name gender age）var name="张三"; var gender="男"; var age="18";如果使用基本数据类型，创建的变量都是独立的，不能成为一个整体对象属于一种复合的数据，在对象中可以保存多个不同数据类型的属性一、对象的分类1、内建对象{alert type="success"}由ES标准中定义的对象，在任何的ES的实现中都可以使用比如：Math String Number Boolean Function Object……{/alert}2、宿主对象{alert type="success"}由JS的运行环境提供的对象，主要由浏览器提供的对象比如：BOM(浏览器对象模型) DOM(文档对象模型){/alert}console.log(); document.write(); //都是由浏览器提供3、自定义对象{alert type="success"}由开发人员自己创建的对象{/alert}二、创建对象1、 使用 new 关键字调用的函数，是构造函数constructor2、 构造函数是专门用来创建对象的函数3、 使用typeof来检查一个对象时，会返回object{alert type="warning"}在对象中保存的值称为属性向对象添加属性，语法： 对象.属性名=属性值; {/alert}var obj = new Object(); //console.log(typeof obj); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj);{alert type="warning"}读取对象中的属性语法： 对象.属性名; 如果读取对象中没有的值，不会报错而是会返回undefined{/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj.name);//输出“张三”{alert type="warning"}修改对象中的属性语法： 对象.属性名 = 新值; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //修改obj的name属性值 obj.name="孙悟空" console.log(obj.name);//输出“孙悟空”{alert type="warning"}删除对象中的属性语法： delete 对象.属性名; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //删除obj的name属性值 delete obj.name; console.log(obj.name);//没有该值，输出undefined三、属性名和属性值1、属性名对象的属性名不强制要求遵守标识符的规范尽量按照标识符的规范设置{alert type="success"}如果使用特殊的属性名，不能采用.的方式来操作需要使用另一种方式，语法： 对象["属性名"]=属性值;读取时也需要采用这种方式使用[]这种形式去操作属性更加灵活在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性{/alert}var obj = new Object(); obj["123"]=567; obj["nihao"]="你好"; var n = "nihao" console.log(obj["123"]); console.log(obj[n]); 2、属性值JS对象的属性值，可以是任意的数据类型， 甚至也可以是一个对象 {alert type="warning"}in 运算符通过该运算符可…

『笔记』JavaScript基础学习笔记 1
type: item
date: 2021-08-21T09:45:00+08:00
description: 前言学无止境，继续加油！代码块 {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) { ale…