自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

welcome

This is my study notes

  • 博客(34)
  • 问答 (1)
  • 收藏
  • 关注

原创 Docker笔记

Docker 是一种容器化技术,它允许你在一个独立的环境中打包和运行应用程序及其依赖项。每个容器都是独立的,轻量级,且具备可移植性,这使得开发、测试和部署变得更加简单和一致。Docker 是一种强大的容器化技术,它简化了应用程序的开发、测试和部署过程。通过理解 Docker 的核心概念和基本用法,你可以更好地利用它来提高你的开发和部署效率。Docker 核心概念镜像(Image): 镜像是一个只读的文件,它包含了运行应用程序所需的一切,包括代码、运行时、系统工具和系统库。容器(Container)

2023-10-11 15:57:11 785

原创 JavaScript 函数的种类 (6大类型)

在JavaScript中,函数(Function)是个重要的内容,它在开发中会经常被用到。函数一般是使用了在执行函数体,而立即使用函数体 (IIFE) 是在创建后立即定义并执行的函数表达式。关键字定义,后面跟着函数名、小括号(里面写参数)、大括号(里面是函数体,写函数执行的代码)。匿名函数,顾名思义就是没有名字的函数,它通常用在函数表达式中,或者作为参数传递给其他函数。中引入,是一种编写函数表达式的简洁方式。将一个或多个函数作为参数或返回一个函数的函数称为高阶函数。中,一个组件就是一个函数,

2023-09-23 18:55:15 530

原创 如何将Express项目部署到Vercel

Vercel是一个云平台,用于托管和部署静态网站、前端应用程序以及服务器less函数。它提供了一套工具和服务,使开发人员能够轻松地将他们的网站和应用程序部署到全球分布的内容交付网络(CDN)上,以提供快速的加载速度和高可用性。我们都知道,像React、Vue这种单页面应用,打包之后不用直接打开进行访问。通过上面的介绍,简单来说Vercel。

2023-09-04 16:12:23 928

原创 前端面试官:你能实现js数组原型上的方法吗?

大概意思:给一个索引,返回当前索引的值。

2022-09-18 17:58:54 1055

原创 前端实现分页效果

前端分页?后端做得了的事,我前端也要做。后端做不了的事,我前端更要做。

2022-09-09 23:06:04 16577 8

原创 使用Vue3+TS 封装当前时间的hook

没什么话想说的,show code!(其实很烂)代码冗余也懒得改了…

2022-08-12 16:25:29 555 2

原创 Vue3 Pinia ts Todo-List案例

Vue3出了蛮久的了,但是最近好像很特别。因为刚出的好像没有太多人用,现在就不一样了,Vue官网也宣布Vue3已经成为默认版本。随着Vue的火热、Vue3的生态圈也越来越nice了。一推东西也层出不穷,如vite、pinia等等。...

2022-07-24 21:45:21 499

原创 端午节,我用Python爬取屈原的诗

端午节到了,为了纪念屈原,我用Python爬取屈原所有的诗,方便日后的背诵。

2022-06-02 17:26:17 307

原创 Vue3生命周期钩子

常用的生命钩子名称执行时间setup组件初始化onBeforeMount组件被挂载之前onMounted组件挂载完成后onBeforeUpdate响应式状态改变而要更新 DOM 树之前onUpdated响应性状态改变而更新了 DOM 树后onBeforeUnmount组件卸载前onUnmounted组件卸载后<KeepAlive>生命钩子当使用<KeepAlive>缓存组件时,被缓存的组件不会被频繁的销毁

2022-05-03 21:33:46 754

原创 聊一聊Vue3.2中setup语法糖+volar

前言现在,Vue3已经成为默认版本了。Vue3与Vue2相比较,变化还是比较大的。由原来的的组合式API变为选项式API。所以代码风格变化也是比较大的。为什么会有选项式API?我个人觉得very good!。要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台。而Vue3.2之后官方就退出setup语法糖,使我们在写代码的时候更爽!!!安装volar如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar。因为,vuter插件是针对Vue2的,

2022-04-10 14:34:06 3170

原创 一文搞懂组件 Vue component (上篇)

前言  vue作为前端目前三大主流框架之一,在前端中也是占有重要的地位。特别是在国内,现在想要找一份前端的工作,那么学会vue,将你的不二之选。  vue目前为什么这么重要呢?因为vue的作者是中国人。那当然不是啦~ 最最最最重要的原因是它有很多优点:双向数据绑定组件化单页面应用用户体验好简单易学……  好了,现在知到vue.js的优点就是简单易学,那接下来我们就一起来学习学习它的组件化开发 --> component什么是组件  我们来看看官网的介绍,他说是可复用的 Vue

2021-12-26 14:47:54 1646

原创 Vue实现购物车

开发需求   使用vue实现购物商场中的购物车内容,添加、减少会自动机计算总金额,并显示当前总金额。删除商品则将改商品移除购物车列表,并且自动计算购物车列表的总金额。实现原理   这里没有api数据接口,我们这里创建一个数组,数组中的每一项是一个对象,每一个对象包含着每一本的信息(名称、价格等)。表头写死,表中的每一个行用v-for遍历数组数据,v-for遍历数组中有多少个对象(多少本书)将自动创建多少个标签(行)。然后将数据绑定到对应的列中就完成大致的布局了。   在图书价格列中,因为我们在原来的

2021-10-26 14:24:03 2724

原创 Git操作

GitGit介绍Git是目前世界上最先进的分布式版本控制系统,在处理各种项目时都十分高效。而且非常高大上。SVN介绍SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而且干活的时候,用的都是自己的电脑,所以首先要从中央服务器那里得到最新的版本,然后干活,干完后,需要把自己做完的活推送到中央服务器上。而且集中式版本控制系统是必须要联网才能工作。Git是分布式版本控制系统,它没有中央服务器,每个人的电脑就是一个完整的版本库。这样,工作的时候就不需要联网了Git基本操作works

2021-10-10 18:28:28 130

原创 js实现小说自动阅读功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动阅

2021-07-11 15:33:28 947

原创 js中数组的高逼格操作(filter、sort、map、reduce)

说在前面的话ES6全称ECMAScript 6.0, 成为JavaScript的下一个版本标准。它提供了一些很牛逼的东西,使我们写的代码更加简洁、方便。比如模板字符串、箭头函数、promise、class等等。ES6的出现就是为了弥补ES5的不足,正因为有了这些完善我们才有了后面的一些骚操作。正片 带着问题学习才有效果 有一个数组:let score = [24,83,79,64,97,88,50] 上需求需求一、选出成绩优秀的学生(成绩不低于80分的同学)需求二、对成绩优秀的学生

2021-06-17 22:03:08 399 2

原创 网页版创意简历

介绍又到了毕业季了,突然想起了那一年的高考作文题《你们再看看书,我再看看你们》。每次毕业都要对面新的选择,每次都是很迷茫,不知道自己该何去何从。希望我们不负青春,展望未来。愿每个人都能学有所成、业有所获。这个简历,是由两个页面构成,他们是横着排的,鼠标滚动的时候页面会横向滚动。这里用到阿里的iconfont图标,我用link连接css样式,所以复制代码的话,图标不会显示在页面中,有需要的话可以私信我哦!!先看效果图吧~~完整代码<!DOCTYPE html><html

2021-06-15 15:45:04 371

原创 使用localStorage实现注册和登录验证功能

**今天来用HTML5的localStorage本地存储实现一个注册和登录功能,注册的用户可以保存到网站中,没有注册的用户则无法登录。注册时如果有重名时则不能注册,必须使用一个新的用户名,密码可以重复。**还是先看看效果图吧完整代码代码里注释写得也很清楚了,这里我就不分析了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http

2021-06-15 15:18:45 3483

原创 js实现标题文字向上轮播

效果图代码

2021-05-24 14:19:19 380

原创 CSS3闪动广告牌

今天来实现一个闪动广告牌,实现这案例只需要用到css3的动画:@keyframes,非常简单。老样子,先看看效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=.

2021-05-16 13:06:52 376

原创 jQuery二级伸缩菜单

先看看效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t

2021-05-13 22:24:43 171

原创 10行js代码实现二级菜单

效果代码内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

2021-05-10 20:22:57 253

原创 HTML+CSS 仿NASA首页(期末考试项目)

前言这是我在大一期末考试的一个项目,一共有一张主页和两张子页。当时老师让我们自己做一个个人网页或者模仿一个网站其中的两到三个页面来作为期末考试内容。这个小项目非常适合像我一样的初学者来试手。来吧,展示首页(index.html)代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>NASA</title> <link rel="s

2021-04-28 15:02:36 1410

原创 javascript进度条(js实例)

利用javascript模拟下载进度条,可以防止重复点击。思路:用两个div嵌套,开始时,初始时里面的div宽度为0,当点击下载时,让里面的div宽度一直+1,当加到100时停止。完成下载!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

2021-04-26 21:16:06 1705

原创 JavaScript字符串学习(案例)

JavaScript 字符串是由文本组成的值,可以包含字母、数字、符号、标点符号甚至表情符号。作用:JavaScript 字符串用于存储和操作文本。javascript字符串声明字符串只需要加双引号或者单引号var str = "vans"; console.log(str);//vans访问字符串中的某个数,也可以用和数组一样的方法:var str1 = "hello"console.log(str1[0]);//h//可以访问,但是不能修改str1[0] = "a";conso

2021-04-23 17:50:36 302

原创 js实现58同城搜索框(鼠标聚焦/移除)

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl

2021-04-21 14:26:04 280

原创 JavaScript数组学习+小案例

官方解释:数组是类似于容器的值,可以容纳其他值。数组内的值称为元素。数组的对象作用:使用单独的变量名来存储一系列的值。1.创建数组创建空数组//方法一:var arr1 = [];//方法二:var arr2 = new Array();创建数组并赋值//方法一:var arr3 = ["奔驰","宝马","奥迪"];//方法二:var arr4 = new Array("西游记","红楼梦","三国演义","水浒传");也可以先创建在赋值,数组赋值 arr[index],in

2021-04-20 21:40:56 332

原创 JavaScript实现随机验证码并验证

前言在许多登录页面里,我们都可以看到验证码的身影,每次登录都需要重新输入验证码。这个功能非常重要,它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。效果展示HTML创建一个div拿来展示随机生成的验证码,一个span可以重新随机生成新的验证码,一个文本框可以输入我们的验证码,还有一个提交按钮。 <div id="banar"></div> <span id="chang">看不清换一张</span><br&

2021-04-19 14:00:43 1546

原创 jQuery实现轮播图

我之前用css3实现轮播图过,不过那是一个简单的轮播图,只能来回切换图片。因为那时候我还没有学过javascript,没学过javascript的同学也可以去我主页看看。当然,我的是自学的js。本来我是想用原生js来做轮播图的,不过出了许多问题,一直写不出,也看了一些别人的文章,还是看不懂,最终以失败告终。不过以后我还会继续用原生js写的,直到写出来为止。学完javascript基础的我,就学了jQuery。在用原生js写这个轮播图的时候,我发现遇到的问题都是可以用jQuery解决,因为jQuery可以

2021-03-30 23:12:50 122

原创 js制作简单计算器

在学校学习过程中,老师总是让我们做各种各样小案例(demo)。但是我们在做的过程,总会遇到一些问题,会使我们绞尽脑汁。那让我们一起来看看这个案例吧!先看看效果实现原理其实制作这个简单的计算器思路很简单,就是给这些数字按钮(1234567890),和加减乘除按钮(+ - * /)都绑定onclick事件,这些按钮点击的目的就是要把自己value值放到上面显示器上(txt),其他的按钮就是处理显示器(txt)上的value值:AC键可以把之前输入的数据全部清除。“=”键就是计算我们输入的数据,“<

2021-03-21 22:09:54 2031

原创 利用JavaScript实现BMI指数计算

身体质量指数,是BMI指数,简称体质指数,是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。当然在做这个demo之前,我们要知道BMI的计算公式:体重(kg)/身高(m)²实现原理运用onchange事件配合方法获取input里身高和体重的值,再用公式计算BMI的值,用if判断BMI值所在的区间。就可以求出我们这个区间所对应的状况。首先,写好页面内容:HTML <div class="top"> <p>身体质量指数,是BMI指数,简称体质指数,是国际上常

2021-03-17 15:16:33 10088

原创 怎么在网页标题加入图标?

我们在浏览网站的时候,大部分网站页面的标题都是有图标的,那么如何在网页标题添加图标?首先,我们需要准备一张自己需要的图片。然后在百度搜索ico,找到在线生成 ioc图标。点开以后,点击选择文件,选择好我们以准备好的图片,就可以点生成按钮。生成以后他就会自动帮我们下载已经生成好的图片。制作好ico图标以后,只需要在< head >标签里加入< link >标签,记住一定要把< link >标签里rel属性的值改为icon,href属性值放我们制作好的ico图标的地

2021-03-11 19:47:00 828

原创 js编写点击按钮数字加一

每次单击按钮可以使数字加一 在页面中加入三个input标签,类型分别是text、submit、submit,text里面的value是普通数字,其余两个是加一和清除两个按钮。加一按钮实现text里value的数字加一,清除按钮实现text里value数字归零。 话不多说,直接上代码:<body> <input type="text" value="0"><br><br> <input type="submit" value

2021-03-11 18:42:37 11783 5

原创 js预编译的步骤

我们知道JavaScript是一种解释性语言,那它运行的三大部分为:一、语法分析(系统会把整篇代码扫描一下,看看有没有低级语法错误)二、预编译三、解释执行我也是刚刚学的js,我想分享一下学到的东西,一起交流进步。那么预编译的过程是怎么样的呢?让我们一起来看下面的例子: function f(a){ console.log(a); //function a(){} console.log(b); //undefined var a = 10; console.log(

2020-07-24 17:11:36 198

原创 使用css3实现简单的轮播图

利用css3做简单的轮播图轮播图广泛出现在购物等网站上,下面我们利用css3做简单的轮播图。看效果HTML代码 <div class="container"> <div class="images"> <img src="gtr.jpg"> <img src="evo.jpg"> <img src="sti.jpg"> </div> </div>css代码.container{

2020-07-21 20:57:20 931

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除