- 博客(47)
- 收藏
- 关注
RSS订阅原创 sublime text4中如何添加.vue模板的详细教程
第一步首先利用package control下载如下两个插件：（不会使用package control的可以去百度一下，很简单的）新建文件模板插件 SublimeTmplvue语法高亮插件 Vue Syntax Highlight第二步打开：添加：{ "id": "vue", "caption": "Vue", "command": "sublime_tmpl", "args": { "type": "vue" }},第三步打开：添加：{ "caption
2021-12-09 16:32:48
2000
2
原创 在chrome中安装vue-devtools插件
我是看着这个教程安装的：安装vue-devtools插件 - 海绵宝宝y - 博客园 (cnblogs.com)因为插件更新的情况，上面那个博客中所说的：“修改shells、chrome目录下的mainifest.json 中的persistant为true”，这个mainifest.json现在是在vue-devtools-dev\packages\shell-chrome中的。在安装的过程中遇到了很多问题，包括但不限于：command c:\windows\system32\cmd.exe /
2021-12-09 10:43:36
770
原创 安装vue-cli出错：npm ERR path D:\nodeJs\node_global\node_modules\@vue\cli\node_modules\core-js-pure
如果没有强烈的意愿想不重装Nodejs，建议移步：(4条消息) node.js 安装详细步骤教程_老油条-CSDN博客_node.js安装步骤找各种博客寻找错误共同点什么cnpm install的我已经倦了，直接重装爽歪歪！
2021-12-08 10:47:04
2644
原创 Vue2之watch侦听器的简单使用
侦听器watch函数名就是要侦听的元素的名字传入的参数第一个是变化后的新值newval，第二个是变化前的旧值oldval格式⭐️方法格式的侦听器无法在刚进入页面时自动触发，只有在侦听到变化才会触发如果侦听的是对象，当对象的属性发生变化时，不会侦听到⭐️对象格式的侦听器通过immediate选项，可以让侦听器自动触发通过deep选项，使侦听器深度侦听到对象中属性的变化这是Vue实例中的data对象：设置侦听器：下面分别是方法格式的侦听器和对象格式的侦听器：⭐
2021-12-07 23:10:54
592
原创 axios库的简单实用
axios是一个专注于网络请求的库CDN调用方法：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>使用方法：//返回的result是一个promiseconst result=axios({ // 请求方式 method:'GET', // 请求地址 url:'http://www.liulongbin.top:3006/api/getbooks', //url中的查询参数 par
2021-12-07 23:01:49
362
原创 CSS之关于min-width、max-width、min-height和max-height的使用
????min-height设div父盒子A中有个div子盒子B，设B的min-height为H，则H为盒子B的最小高度值，意思是：当B中内容填充的高度小于H时，B的高度就是H；当B中内容填充的高度大于H时，B的高度就是其中内容填充到的高度。通俗一点来说，就是如果min-height的高度设小了还可以变大，但是设大了就只能这样。看下面的例子：当H为100px时：==>⭐️最小就为100px，若你填充的内容高度小于100，就以最小为准当H为5px时：==>⭐️最小为5px
2021-12-01 23:44:29
4029
原创 【JavaScript】之防抖节流的实现
防抖防抖，即为防止抖动，避免将一次事件误认为多次。意思是当你提出多次事件请求时，只会响应最近一次的请求。以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
2021-11-27 23:54:21
304
1
原创 【JavaScript】强制类型转换之不同类型使用==时的比较~
NumberNumber和Object比较，是Number与 Object调用ToPrimitive()之后的结果 比较与String、Boolean比较，对方转换为Number进行比较StringString和Number比较，String转换为Number；String和Boolean比较，Boolean先转为Number，然后String转为Number比较；String和Object比较，为String与 Object调用ToPrimitive()之后的结果 比较BooleanBoo
2021-11-27 23:34:32
250
原创 使用webpack进行最简单的项目构建
这些应该是对在官网初学习的一个小总结吧~，大家可以去官网看较为详细的解释：指南 | webpack 中文网 (webpackjs.com)那我们话不多说，直接开始：首先在nodeJs下创建一个webpack-demo文件夹，在其中调用命令行执行：npm init -ynpm install webpack webpack-cli --save-dev修改生成的package.json：删去package.json中的"main":"index.js"，添加"private":true，得
2021-11-26 21:45:42
916
原创 【javascript30】Day5------Fun with HTML5 canvas
效果图如下：最终的效果就是可以在页面上按照自己想要的线风格画图~那这个效果是怎么做出来的呢？首先，我们需要先了解一下canvas，可以参考下面这个博客：(6条消息) Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset…_DevOps海洋的渔夫@专栏-CSDN博客知道上面这些内容后，这个效果的实现就变得很简单了，因为canvas本身就可以供给我们作图，
2021-11-18 00:22:31
493
原创 【LeetCode】滑动窗口之乘积小于k的子数组
713. 乘积小于k的子数组给定一个正整数数组 nums和整数 k 。请找出该数组内乘积小于 k 的连续的子数组的个数。先敲个黑板下面一共有两种写法，第一种是按自己理解写的，是过了的，但是 感觉懂了但没完全懂。。。（意思是 我好像懂了滑动窗口 但是写的不规律不条理 好像没完全懂。。）；第二种是更条理的解法，有助于更好的理解~如果想直接看详细讲解(唠叨)的，可以直接跳过这段代码看下面的分析哦~~~第一种第一种就不讲解了哈，可以看完下面的分析来看这段代码，其实也挺好理解的~/** * @
2021-11-16 23:45:53
508
原创 【LeetCode】双指针之比较含退格的字符串
我刚开始的思路是正着遍历，碰到#就删除两个（即#和它后面的字符），然后最终比较处理后的字符串。但是这样问题是解决了，但是会超时，说明时间复杂度太高了，怎么回事呢？是因为这样其实会有很多没必要处理的字符串被处理，比如两个字符串刚开始的字符就不一样但长度却很长，这样就会导致时间复杂度上升。所以我们是不是可以通过一边遍历一边比较的方法呢？ 答案是可以的。 一边遍历怎么一边比较呢？？这时候我们可以想，如果是正着的话，当我们遍历到某个字符的时候，我们需要看这个字符后面是否有#、有多少个#，这样其实就不能算一边遍
2021-11-15 23:54:05
419
原创 【javascript】把这些代码认真敲一遍，搞明白prototype和__proto__
标题实践是最好的证明，一定要相信这句话在自己动手敲代码之前，对于原型对象、父类子类等的了解只是停留在概念上，对于prototype和__proto__也是自认为明白清楚，但在真正动手敲一遍代码实现之后，才发现原来真的是需要自己边敲边领悟的啊代码就放在下面了，很简单，但是需要不停地去琢磨答案为什么是这样，最终会明白，哦，原来是这样~class A {}class B extends A {}console.log(A)//class Aconsole.log(A.prototype)//{
2021-11-14 22:13:22
551
原创 【javascript】class的继承之super的使用
刚学了super，趁热打铁，写一篇博客我们大家都知道，在class的继承中，子类如果想要继承父类且能生成子类实例，就必须要在constructor中调用super()，那么super在此处到底代表什么呢？除了这个用法，super还有别的用法吗？接下来我们就来捋一捋super的用法吧~首先，super既可以当函数使用，也可以当对象使用这是很重要的，我们需要记住，当你需要引用super时，你要想清楚在此处super是函数还是对象，所以当你直接console.log(super)时会报错，因为你没有指定s
2021-11-13 21:57:49
8130
原创 如何判断一个整数是不是2的幂次方？
假设该整数为n方法一除去n是0的情况判断 n & (n-1) 的值是否为0，如果为0，说明该数只有一位是1，则n是2的幂次方，否则不是方法二判断 n & (-n) 的值是否为n，如果为n，说明该数是2的幂次方（水博客，逃...
2021-11-10 23:18:58
381
原创 【javascript30】Day3------CSS Variables
今天的效果图如下：在这个效果中，我们通过手动移动调节按钮来调整图片的边框宽度、模糊度以及边框颜色，话不多说，直接开始吧~首先，我们仍然将该效果分为CSS和JS两个部分，前者实现如下的静态页面，后者实现手动的动态调节。CSS部分我们首先来分析一下总体的布局：最上面的文字可以用h2来做中间的调节部分可以在一个div盒子放置三个input，前两个类型为range，第三个类型为color下面的图片放在一个div盒子中，设置其初始的边框等状态，然后调整其大小合适即可JS部分我们首先来分析我们
2021-11-09 23:14:33
396
原创 【javascript30】Day2------JS and CSS Clock
今天的效果图如下：这个效果是利用JS和CSS做了一个简单的时钟。 话不多说，我们直接开始吧~我们可以将实现的内容分为JS和CSS两部分，JS负责实现动态的指针转动的效果，CSS负责实现静态的时钟样式。CSS部分初始状态如下图：我们可以看到，我们需要画一个圆，并在其中嵌套指针盒子。其实很简单，首先将容器div盒子的border-radius设置为50%即可实现圆环的效果；然后在其中嵌套三个宽度为大盒子一半的指针小盒子，为其设置定位position：absolute以及top：50%，然后利用t
2021-11-08 23:40:31
475
原创 【javascript30】Day1------Drum kit
实现的效果如下：当按下键盘上对应字母时，产生不同的击鼓声音，相应盒子的样式发生改变。这个效果是JavaScript30天挑战的第一个小项目，具体项目可见如下官网：JavaScript30 挑战官网地址： javascript30.com/JavaScript30 挑战github源码地址： github.com/wesbos/Java…接下来，让我们了解一下这个效果是怎么做出来的吧~在我做的时候，我将它分成了css和js两个部分：css方面，我们需要一个大盒子装9个小盒子，
2021-11-01 23:51:33
489
原创 【javaScript案例】之实用的小技巧~
首先来看第一个效果图：这个效果主要实现了背景的移动和鼠标控制飞机的移动~背景的移动通过改变backgroundPostionY来实现；鼠标控制飞机的移动通过调用onmousemove函数，传入event事件参数，然后获取鼠标位置来实现改变飞机的位置。具体见下面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=.
2021-10-31 21:27:57
107
原创 【javaScript案例】之定时器的简单应用
这次的效果如下：这次我们实现的效果是定时器的简单应用那我们如何使盒子在向右和向左的切换之间不会产生磕绊呢？我们可以使用同一个定时器，当点击不同的按钮时，清除上一个设定的定时器，再根据按钮的不同修改其运动方向即可。 那具体要怎么实现呢？我们可以将该定时器tem封装在一个函数中，点击不同的按钮时，传入想要到达的位置和单位时间运动的距离；进入函数，首先判断定时器tem是否为空，若不为空，则调用clearInterval将其清空；然后将传入的想要到达的位置与盒子当前位置offsetLeft作比较，如果当
2021-10-31 20:52:42
173
原创 【javaScript】之WeakSet的使用
WeakSet的使用其实和Set比较类似，他们的区别主要有两个：WeakSet的成员只能是对象，而不是能是别的类型的值WeakSet的对象都是弱引用，不能遍历什么叫弱引用呢，就是如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。WeakSet有三个方法：add(value) 增加某个值delete(value) 删除某个值has(value) 判断某个值是否存在因为WeakSet不可遍历，WeakSet没有s
2021-10-31 20:30:50
457
原创 【javaScript】之Set的用法
今天我们来介绍一下数据结构Set简单介绍Set其实类似于数组，但是其中的成员值都是唯一的，没有重复的值。如何构造一个Set？Set本身也是一个构造函数，用来生成Set，其参数可以是空，可以是数组，可以是类似数组的对象（比如NodeList）如果不清楚NodeList可以看这篇文章：(4条消息) javascript 中的nodeList理解_我只是搬运工的博客-CSDN博客_js listnode构造Set时的不同参数类型如下代码举例：//参数为空let set=new Set();/
2021-10-31 16:37:33
876
原创 【javaScript案例】之类似购物车的效果实现
这次的效果如下图：实现的效果大概是在购物车界面选择想要选购的商品，提交后转到支付界面确认支付，最后支付成功后返回选购页面。我们这篇文章只讲解选购的页面，支付界面见下面这篇文章：(2条消息) 【javaScript案例】之支付10秒倒计时_qwerty053的博客-CSDN博客我们开始咯~我们首先来实现html和css的部分：如下图其实这个部分很考验基础功~，我们需要用到table标签，在td中写入对应的文字（具体可见下方的代码，可以根据自己的喜好添加样式）。重点其实在于js的部分：这个效
2021-10-28 23:35:22
351
原创 【javaScript案例】之放大镜效果的实现
这次实现的效果如下：这次的案例稍微有一点难度，在css和js上都需要多加思考，话不多说，让我们来开始吧~首先我们需要使用html和css规划好整体的布局，即两个相邻的盒子A和B，左边的盒子A中还有一个小盒子S。为了实现相邻，我采用的方法是为其均设置position:absolute，然后设置left和top的值来使其相邻。小盒子S我们同样可以为其设置position:absolute，调整一下背景颜色即可。然后我们需要使用js来设置动画效果，即：鼠标放在盒子A上时，小盒子S的位置会随着鼠标
2021-10-26 23:22:41
839
原创 【javaScript案例】之抽奖器效果的实现
这次实现的效果如下图：所实现的功能是：当每次点击中间的抽奖按钮时，会随机选择一个盒子作为抽奖的结果。那我们要如何实现抽奖的功能呢？其实很简单，首先用html和css做出整体的框架，然后用js在中间按钮的onclick函数中设置定时器+随机改变某一盒子的背景颜色就可以了。 下面我们来讨论一下细节的方面：设计整体框架时，我们需要为每个盒子设置边框，这时会发现边框会出现重叠问题，导致边框变厚，解决的方法是：设置margin-right和margin-bottom为负值（值等于边框值）。.在js
2021-10-25 23:21:06
1500
原创 【javaScript案例】之二级菜单的制作
这次实现的效果图如下：这个二级菜单实现的效果是：当点击某一个框时，会将已经打开的框的内容收回，再展开现在点击的框的内容。那要如何实现这个效果呢？我们可以step by step首先我们要将整个框架显示出来，即所有框展开的样子，因为其显示/不显示是拿overflow:hidden做的。但是要注意不要所有的框都拿一种类型的盒子做，因为那样不方便写js代码，毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框，所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其初始
2021-10-25 08:21:12
1562
原创 【javaScript案例】之鼠标拖拽效果
这次的效果图如下：我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果如何实现拖拽的效果呢？我们需要用到三个函数：onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算
2021-10-24 23:03:50
716
原创 【javaScript案例】之进度条
这次的效果图如下：这个案例做起来不难，在我练习的时候，新知识点是使用window.getComputedStyle()函数获取元素的宽度值总的思路是在一个div盒子初始放入一个宽度为0的div盒子，然后在按钮的onclick回调函数中使用定时器改变其宽度值代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X
2021-10-24 22:45:36
280
原创 【javaScript案例】之验证码的实现
今天的案例，效果如下：这个案例的实现其实没有很多难点，让我们一起来看看吧~html和css的实现，在这里就不做解释啦，可以比对下面的代码自己实现一下，注意一下细节就好了接着咱们来看看js的实现：我们需要做到的有两点：实现验证码的随机产生，使其在页面刷新和点击更换时能够生成实现输入字符串和验证码的比较第一点呢，我们需要用到for循环和Math.round(Math.random()*n)，使得在每一次循环中可以产生随机数字第二点呢，我们只需要通过input.value来获得用户输入的字符
2021-10-18 23:03:48
1138
原创 【javaScript案例】之支付10秒倒计时
效果图如下：这个案例其实很简单，只要掌握了js基础中的onclick函数以及定时器的使用，就能快速的做出这样的效果，让我们一起来看看怎么做吧~首先需要两个html文件，在两个文件中利用html和css分别写好初始页面效果，在这里就不多说啦，具体可以看下面的代码让我们来谈谈js需要做出的效果：在页面1中点击支付要跳转到另一个文件中刚进入页面2时要开始计时10秒，计时结束后返回页面1点击页面2的立即返回能够返回到页面1这就是我们需要做的效果那我们要如何实现在两个页面之间的跳转呢？=>
2021-10-17 23:42:35
1013
原创 CSS之calc函数
calc函数可以通过加减乘除计算来获得高度、宽度值等比如width:calc(180px+20px)可以得到宽度为200px的盒子但calc的使用完全不仅于此父元素的子元素可以通过设置width:calc(100%)达到和父盒子一样的宽度，也可以通过设置widthLcalc(100% - 20px)得到比父盒子少20px的盒子千万要注意！ 100%和减号以及减号和20之间一定要有空格，否则就无法得到想要的效果。...
2021-10-17 00:00:02
1245
原创 CSS之利用transition做一个图标转换的动画
效果如下：这个很简单，直接上代码，如果对字体图标不熟悉的同学可以看这篇文章：(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-CSDN博客<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
2021-10-16 23:53:38
596
原创 为什么要清除浮动及如何清除浮动
先来看例子：什么叫浮动呢？浮动其实是指元素从网页的正常流动中移除，即脱离文档流。选择将元素在其容器的左侧或右侧放置其实就是指元素在脱离文档流之后，元素一直向最左边或者右边靠拢，直至碰到父元素或者另一个浮动元素。我们为什么要清除浮动呢？大家请看图一，在父盒子未设置高度时，子盒子又设置了浮动，导致父盒子高度塌陷，因为父盒子在计算高度时并未将浮动的子盒子算入。所以我们要避免这种情况，也就是清除浮动，使得结果如同图二或者图三。那我们要如何清除浮动呢？额外标签法（不是很推荐）这种方法见如下代码
2021-10-15 15:39:23
162
原创 CSS基础之伪类选择器的总结~
在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ）属性选择器input[value] 意思是选择的input标签，必须具有value属性input[type=text] 意思是选择的input标签，必须是属性type值为text的元素div[class^=box] 意思是选择的div标签，属性class的值是以box开头的div[class$=box] 意思是选择的div标签，属性class的值是以box结尾的div[class*=box] 意思是选
2021-10-12 23:59:04
840
原创 javascript之关于函数参数的默认值的类型练习代码
一切尽在代码中console.log(typeof c)//undefined typeof的保护性//弄清楚fun和foo、bar的区别function fun({x=0,y=3}){ console.log(x,y)}fun({x:1,y:2})//1 2fun({x:1})//1 3//fun()//会报错 !!!!!!!!!!!//原因是fun需要一个参数{}，但是你没有给（连空对象都没有给）fun({})//0 3console.log("=========
2021-10-12 21:33:34
119
原创 成功解决pip Fatal error in launcher: Unable to create process using
简单粗暴有效！找到并删除 Python27\Lib\site-packages\pip-18.1.dist-info找到并删除Python27\Scripts\pip*.exe（表示所有的pip .exe）然后在cmd中输入python -m pip install --upgrade pip就解决了！再附上一个下载安装sklearn的教程：（简单好用）(40条消息) sklearn库的安装教程_每天起床第一句要给自己打个气-CSDN博客_sklearn库...
2021-10-11 21:10:33
961
4
原创 CSS布局之各种需要掌握的小技巧~
话不多说，直接开始~1. vertical-align属性vertical-align定义的是周围元素相对于当前元素的对齐方式属性有：topmiddlebaselinebottom下图为bottom对齐下图为baseline对齐：下图为middle对齐：vertical-align属性对于inline元素、inline-block元素和table-cell元素有效，对块元素无效。同时，对于div中的img来说，若为div添加边框的话，边框和img之间总会有白边，这是因为ve
2021-10-09 22:52:44
141
原创 CSS之如何从icomoon引入及使用字体图标
如何引入字体图标？从网上下载字体图标：点进去之后，在其中选择你想要的图标，如果觉得不够用的话，可以点击左下角选择生成更多的图标选择好图标后：下载好之后，需要注意了，注意如何操作来在html文件中引入字体图标：（假如你想引入图标的html文件叫k）把下载包中的fonts文件夹放入k所在的根目录中把下载包中的style.css文件中@font-face的内容复制到k的style标签中在下载包中的demo.html中找到对应图标后面的小方框（如下图），复制到k想要放的标签比如
2021-10-08 20:22:05
956
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人