<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[HJay_Chou的博客]]></title><description><![CDATA[前端]]></description><link>https://blog.youkuaiyun.com/HJay_Chou</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; HJay_Chou]]></copyright><item><title><![CDATA[【PDF.js】PDF文件预览]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/137598911</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/137598911</guid><author>HJay_Chou</author><pubDate>Wed, 10 Apr 2024 16:24:47 +0800</pubDate><description><![CDATA[使用PDFJS实现pdf文件的预览，支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。]]></description><category></category></item><item><title><![CDATA[vue自定义懒加载指令]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/120084037</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/120084037</guid><author>HJay_Chou</author><pubDate>Fri, 03 Sep 2021 16:42:33 +0800</pubDate><description><![CDATA[vue自定义懒加载指令一、介绍二、自定义指令三、使用方法四、实现效果
一、介绍
懒加载(Load On Demand)——也称为延迟加载,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。其关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
二、自定义指令
vue3.0写法
1、安装插件
yarn add @vueuse/core -S
2、创建lazy-image.]]></description><category></category></item><item><title><![CDATA[vue实现瀑布流效果]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/120082976</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/120082976</guid><author>HJay_Chou</author><pubDate>Fri, 03 Sep 2021 15:56:45 +0800</pubDate><description><![CDATA[vue实现瀑布流效果一、介绍二、布局原理三、具体实现四、实现效果
一、介绍
瀑布流，又称为瀑布流布局。是比较流行的一种网页展示形式，在视觉上表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
二、布局原理
等宽不等高的图片排列，从第二行开始，图片插入的位置根据上一行插入图片得最低处依次插入，最终形成参差不齐的布局效果。
三、具体实现
这里是]]></description><category></category></item><item><title><![CDATA[实现预览图片上下滑动关闭效果]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/119953989</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/119953989</guid><author>HJay_Chou</author><pubDate>Fri, 27 Aug 2021 16:06:19 +0800</pubDate><description><![CDATA[实现预览图片上下滑动关闭效果一、页面结构二、触摸事件概述三、功能实现实现效果
今天的项目任务中实现一个瀑布流，点击图片可以实现图片预览、左右切换效果。说干就干，下班时，提交完代码准备溜时，提出一个新需求，在预览图片时添加一个上下滑动取消预览的效果，唉，加吧，我爱加班。
这里主要记录一下实现该功能的关键步骤，如下：
一、页面结构
以下是页面结构内容，css样式及组件内容不在此赘述
&lt;template&gt;
  &lt;div&gt;
    &lt;halo-dialog class="preview]]></description><category></category></item><item><title><![CDATA[图像裁剪器 Cropperjs]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/119761015</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/119761015</guid><author>HJay_Chou</author><pubDate>Tue, 17 Aug 2021 18:13:37 +0800</pubDate><description><![CDATA[图像裁剪器  Cropperjs1、插件安装2、引入3、代码实现4、效果图5、常用参数options5、常用方法6 、结尾
近日前端项目中，需要实现上传图片、支持自定义裁剪，生成海报的功能。该项目采用Taro(react语法)实现。具体实现步骤如下：
1、插件安装
yarn add cropperjs -S 

2、引入
在项目中引入cropperjs，一定不要忘记引入样式
import Cropper from "cropperjs"
import "cropperjs/dist/cropper.css"]]></description><category></category></item><item><title><![CDATA[node抓取豆瓣数据]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/116922538</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/116922538</guid><author>HJay_Chou</author><pubDate>Mon, 17 May 2021 11:46:09 +0800</pubDate><description><![CDATA[node抓取豆瓣数据1、准备工作2、安装依赖3、实现代码4、结果实现
1、准备工作
1）安装node：node下载链接.
2）创建项目：使用Express创建项目.
2、安装依赖
使用npm install（cnpm install、yarn等）安装依赖
3、实现代码
创建一个movie.js文件，输入以下代码：
const fs = require('fs')
const axios = require('axios')
const cheerio = require('cheerio') // 抓取页面]]></description><category></category></item><item><title><![CDATA[git 常用命令]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/116794336</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/116794336</guid><author>HJay_Chou</author><pubDate>Fri, 14 May 2021 17:35:47 +0800</pubDate><description><![CDATA[git 常用命令1、删除远程库2、分支管理查看分支创建分支切换分支创建并切换分支查看提交历史bug分支将指定的提交应用到其他分支查看工作区的状态3、版本回退4、撤销修改5、删除文件6、多人协作的工作模式7、区别理解
1、删除远程库
使用命令git remote rm name (解除了本地与远程的绑定关系，并不是物理上删除了远程库)
使用前建议使用 git remote -v 查看远程库信息
2、分支管理
查看分支
使用命令git branch 可以查看所有分支，当前分支前面会有(*)，操作如下：
$ gi]]></description><category></category></item><item><title><![CDATA[跨域之JSONP]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/101164821</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/101164821</guid><author>HJay_Chou</author><pubDate>Sun, 22 Sep 2019 19:39:32 +0800</pubDate><description><![CDATA[跨域解决方案之JSONP什么是jsonp什么是同源策略jsonp的原理jsonp的实现方式jsonp为什么不支持POST？
什么是jsonp
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从其它网站获取数据需要通过jsonp技术来获取呢？那是因为同源策略。
什么是同源策略
同源策略，它是由 Ne...]]></description><category></category></item><item><title><![CDATA[PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（下）——实现分页效果]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/101102540</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/101102540</guid><author>HJay_Chou</author><pubDate>Sat, 21 Sep 2019 12:19:36 +0800</pubDate><description><![CDATA[jQuery实现分页效果思路动态创建页码切换功能分页效果的核心实现效果
思路
通过总数据的条数/每一页显示的条数，并向上取整，就可以得到页码数，并动态添加到ul中。
动态创建页码
//每一页显示的信息数
     this.num=2;
      //当前页面的索引
      this.index=0;
      //找到容器ul
      this.oul=document.queryS...]]></description><category></category></item><item><title><![CDATA[PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（中）]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/101101632</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/101101632</guid><author>HJay_Chou</author><pubDate>Sat, 21 Sep 2019 11:53:12 +0800</pubDate><description><![CDATA[前后端交互项目修改功能思路修改功能的js代码修改功能的PHP代码实现效果删除功能思路实现删除功能的js代码实现删除功能的PHP代码实现效果
在上个文章中介绍了如何使用bootstrap进行布局，使用PHP操作数据库，通过ajax实现数据的查询和添加功能，在这篇文章中，继续实现ajax交互项目的修改和删除操作。
修改功能
思路
通过点击页面上的修改按钮，将会弹出模态框，并将这一行的信息对应显示在模态...]]></description><category></category></item><item><title><![CDATA[PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（上）]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100784337</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100784337</guid><author>HJay_Chou</author><pubDate>Sat, 21 Sep 2019 11:27:47 +0800</pubDate><description><![CDATA[前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录
简介
本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。
实现
布局
布局采用前端框架Bootstrap实现响应式布局，快速、高效。
注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需...]]></description><category></category></item><item><title><![CDATA[轮播图]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100810015</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100810015</guid><author>HJay_Chou</author><pubDate>Fri, 13 Sep 2019 21:22:38 +0800</pubDate><description><![CDATA[轮播图布局实现入口函数小圆点切换实现上一张按钮下一张按钮创建定时器
布局
利用jQuery实现小米轮播图效果。实现该效果由三部分组成：图片、切换上一张和下一张按钮以及图片下方小圆点。在实现过程中，添加了定时器，开始时，图片自动的从右到左切换，底下的小圆点也在相对于的切换，点击上一张或者下一张按钮的时候，图片和小圆点也在对于的切换。
布局与样式代码如下：
HTML
&lt;body&gt;
    ...]]></description><category></category></item><item><title><![CDATA[js中数组与字符的方法]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100601846</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100601846</guid><author>HJay_Chou</author><pubDate>Sat, 07 Sep 2019 18:00:58 +0800</pubDate><description><![CDATA[js中数组与字符的方法Array对象数组属性Array对象方法(常用的)ES5新增的数组方法字符方法常见的字符方法
Array对象
Array对象用于在变量中存储多个值：
var arr=[“abc”,“name”,“user”];
数组元素的索引从0开始，到数组的长度-1结束。
数组属性




属性
描述




constructor
返回创建数组对象的原型函数


length
设置或返回...]]></description><category></category></item><item><title><![CDATA[JS笔记]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100134133</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100134133</guid><author>HJay_Chou</author><pubDate>Fri, 30 Aug 2019 19:07:22 +0800</pubDate><description><![CDATA[JS笔记js的组成BOMwindow身上的方法window下的子对象DOM选择器
js的组成
js由ECMAScript(语法标准)、DOM(网页)、BOM(浏览器)三部分组成
BOM
BOM是js中的顶层对象，所有的全局都属于window。
BOM和DOM和ECMAScript的关系:

BOM是运行平台，BOM规则建立在ECMAScript的规则之上；
DOM是运行在平台上的页面；
ECMAS...]]></description><category></category></item><item><title><![CDATA[this指向]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100142125</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100142125</guid><author>HJay_Chou</author><pubDate>Thu, 29 Aug 2019 19:16:07 +0800</pubDate><description><![CDATA[this指向this执行的位置bind()、call()和apply()的关系
this：执行上下文，this一般存在于函数中，表示当前函数的执行上下文，如果函数没有执行，那么this没有内容，只有函数在执行后this才有绑定。
this执行的位置

默认执行：this指向window,严格模式指向undefined
非严格模式下

 function fn(){
        console....]]></description><category></category></item><item><title><![CDATA[vue.js简介]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100023472</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100023472</guid><author>HJay_Chou</author><pubDate>Thu, 22 Aug 2019 21:19:30 +0800</pubDate><description><![CDATA[vue.js简介什么是vue.jsvue.js的模板语法vue.js的一些语句介绍条件语句循环语句vue.js的计算属性注
什么是vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue.js的模板语法
vue.js...]]></description><category></category></item><item><title><![CDATA[正则表达式的介绍及常用方法]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100020592</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100020592</guid><author>HJay_Chou</author><pubDate>Thu, 22 Aug 2019 18:01:48 +0800</pubDate><description><![CDATA[文章目录正则表达式介绍正则表达式语法正则表达式的知识点正则表达式的量词正则表达式中的转义正则表达式中的一些表示使用正则表达式去除字符串中的空格正则表达式的方法
正则表达式
正则表达式介绍
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
构造正则表达式的方法和...]]></description><category></category></item><item><title><![CDATA[原生JS实现省市县三级联动]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/100011686</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/100011686</guid><author>HJay_Chou</author><pubDate>Thu, 22 Aug 2019 16:16:03 +0800</pubDate><description><![CDATA[文章目录介绍思路实现页面初始化效果编写JS文件area.jsmain.js注意
介绍
做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，例如在网上买东西的时候，就会选择收货地址，以及在填写家庭信息的时候，都会用到常见的省，市，区三级联动。
思路
页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。
当点击省份列表中的某一项，此时触发省份下拉框的on...]]></description><category></category></item><item><title><![CDATA[jQuery实现tab选项卡切换]]></title><link>https://blog.youkuaiyun.com/HJay_Chou/article/details/92421911</link><guid>https://blog.youkuaiyun.com/HJay_Chou/article/details/92421911</guid><author>HJay_Chou</author><pubDate>Sun, 16 Jun 2019 19:41:27 +0800</pubDate><description><![CDATA[文章目录项目效果
项目
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;07-tab选项卡&lt;/title&gt;
    &lt;style&gt;
        *{
            margin: 0;
    ...]]></description><category></category></item></channel></rss>