![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 53
zsl龙少
这个作者很懒,什么都没留下…
展开
-
防抖与节流
防抖在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行,真是任性呐!function debounce (fn, time=300) { let timer // 缓存一个定时器对象 return function (...args) { // 当原创 2021-10-04 10:21:25 · 152 阅读 · 1 评论 -
事件捕获与事件冒泡
一、事件捕获1.什么是事件捕获?当事件发生在DOM元素上时,该事件不完全发生在那个元素上。在捕获阶段,事件从window开始,一直到触发事件的元素。window----> document----> html----> body ---->目标元素假设有如下的 HTML 结构:<div class="grandparent"> <div class="parent"> <div class="child">1</d原创 2021-09-26 15:43:36 · 1319 阅读 · 0 评论 -
css水平垂直居中
1.一个盒子垂直水平居中有哪些方法?已知高度和宽度的元素方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #s原创 2021-09-19 11:15:08 · 124 阅读 · 1 评论 -
JS+HTML+CSS3轮播图
1.重难点:布局图片与小圆点同步问题setInterval定时器的使用淡入淡出效果左右箭头点击时,图片与小圆点的效果同步2.思路:最底下容器使用相对定位,图片、小圆点、箭头均使用绝对定位悬浮在底部容器上。图片的top和left均设置为0,即全部重叠在一个位置。但是只显示一张图片,即只有一张图片的display为block,其它图片隐藏,即display:none;通过全局index索引记录点击的是第几个小圆点,默认为0,找到相对应的第index张图片,将这张.原创 2021-08-16 08:42:13 · 155 阅读 · 0 评论 -
小程序上下页面滚动
话不多说,先来看效果:1.html<view class="container container-fill"> <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-to原创 2021-08-08 16:43:23 · 247 阅读 · 0 评论 -
路由页面管理(vue-router)
1.什么是vue-router? vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:1/嵌套的路由/视图表2.模块化的、基于组件的路由配置3.路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果4.细粒度的导航控制5.带有自动激活的 CSS class 的链接6.HTML5 历史模式或 hash 模式,在 IE9 中自动降级7.自定义的滚动条行为 vue是单页面开发, 通过改变url跳原创 2021-08-02 08:49:01 · 484 阅读 · 0 评论 -
浅谈axios和ajax区别
一、二者区别1.理论区别:(1)axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封 装一样。(ajax技术实现了局部数据的刷新,axios实现了对ajax的封装。);(2)axios是ajax,ajax不止axios;axios有的ajax都有,ajax有的axios不一 定有。2.代码区别:1.axiosaxios({ url: '/getName', method: 'get', responseType:原创 2020-11-13 11:02:21 · 10518 阅读 · 1 评论 -
ejs入门
一、EJS 是什么? “E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。二、为什么要使用EJS? 与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模原创 2020-10-03 20:42:21 · 1263 阅读 · 0 评论 -
ES6后续补充
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ES6</title></head><body><script> //作用:生产一个独一无二的值 //无值 var str1= Symbol() var str2= Symbol() console.l原创 2020-09-24 22:21:23 · 73 阅读 · 1 评论 -
基础node
一、node.js是什么?node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。二、优点及缺点优点:Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,异步编程,使其轻量又高效。缺点:单进程,单线程,只支持单核cpu,不能充分的利用多核cpu服务器。一旦这个进程崩掉,那么整个web服务就崩掉了。三、基本使用require()引入模块,返回一个模块对象;module.exports()或者exports() 导出一个对象;module.exports原创 2020-09-20 09:17:32 · 137 阅读 · 0 评论 -
动态改变下拉菜单内容
方法一<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=javascript>//定义一个二维数组aArray,用于存放城市名称。var aCity=new Array();aCity[0]=new Array();aCity[1]=new Array();aCity[2]=new Array();aCity[3]=new Array()转载 2020-08-30 20:19:41 · 369 阅读 · 0 评论 -
Bootstrap4轮播图
#学习上:css3的动画学习很有趣,表示很喜欢;通过css3动画的学习,感觉自己更适合前端的深入学习。 过去的一个星期,制作考核要求的网页,其中反映出来许多问题。相对于其他同伴而言,我不是模仿的,而是自己尝试着自己制作一个,可能知识点的储备量还不够,也或许查阅,浏览的页面还不是足够多,所以制作出来的页面美观度不高,自己抽空查找了一些关于css3的较为炫酷的动画加入了进去,有点哗众取宠的感觉...原创 2019-12-16 08:36:24 · 786 阅读 · 0 评论 -
()? :实用的三元运算符
一个星期有很快过去了,项目进度似乎有些慢了。这星期我去小说组学习了一下,实现的功能比较多,比较完善。我也学习了一下三元运算符与thymeleafd的结合,实现交互。三元运算符是软件编程中的一个固定格式,语法是“条件表达式?表达式1:表达式2”。使用这个算法可以使调用数据时逐级筛选。表达式:“()? :”。()中进行二元运算?在运算,就形成三元。th:href="@{/main/category?lb=ysmx}"th:class="${lb=='ysmx'}?'active'" th:hre原创 2020-07-26 18:22:36 · 380 阅读 · 0 评论 -
es6总结(下)
10.json对象扩展1.JSON.stringify(obj/arr)js对象(数组)转换为json对象(数组)2.JSON.parse(obj/arr)json对象(数组)转换为js对象(数组)var obj = {username:'bar'};obj=JSON.stringify(obj);console.log(typeof obj);obj=JSON.parse(obj);console.log(typeof obj);11.Promise异步:操作之间没啥关系,提升进行原创 2020-08-11 20:21:45 · 124 阅读 · 0 评论 -
es6总结(中)
7.构造函数(array的拓展)将类数组或遍历对象转换为真正的数组let arrayLike={ '0':'a'; '1':'b'; '2':'c'; length:3;}let arr2=array.from(arrayLike);//['a','b','c']接受第二个参数,作为类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。let arrayLike={ '0':'1'; '1':'2'; length:原创 2020-08-10 20:54:43 · 87 阅读 · 0 评论 -
es6总结(上)
1. let声明变量只在所处的块级有效if(true){ let a=10;}console.log(a); //a未定义防止循环变量变成全局变量for(let i=0;i<2:i++){}console.log(i); //i is not defindfor(var i=0;i<2:i++){}console.log(i); //2不存在变量提升console.log(a); //a is not defindlet a=100;原创 2020-08-10 17:44:36 · 140 阅读 · 0 评论 -
懒加及thymeleaf
懒加载 懒加载即按需加载,当页面需要时再加载处理,以减少本地缓存的压力。 懒加载的原理:页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把真正的路径存在元素的“data-src”的自定义属性里,要用的时候就取出来,再设置。if语句原理图如下。当元素的offsetTop值小于可视区高度+滚动条滚动距离的和,表示元素进入到了可视区域。 &原创 2020-08-07 16:21:27 · 526 阅读 · 0 评论 -
浅谈瀑布流
瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局。(即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。)效果图:图解瀑布流算法当第一排排满足够多的等宽图片时(如下图情况),自然而然的考虑到之后放置的图片会往下面排放。我们通过瀑布流算法实验得到,后面紧跟的第六张图片的位置应该是这个位置。那接下来的第七张图片也是如此。HTML+css+js如下:<!-- //思路://转载 2020-08-02 19:42:38 · 1242 阅读 · 0 评论 -
2020 第三周
开学已经3周了,上了三周网课,感觉效果并不是很好,可能主要还是自己学习能力,自控能力有点差。算法训练也有些耽搁了。 这一周简单地看了一些jq,总的来说,跟js有很多相似之处。...原创 2020-03-08 10:44:34 · 104 阅读 · 0 评论 -
起步
**总结** 进入工作室已经两个多月了,学习了很多的新知识,认识了许多优秀的的学长学姐,结交了很多新朋友。 经过这两个月历练,先后接触了Java,HTML,CSS,JavaScript中较为基础的知识点,并进行运用,练习。...原创 2019-12-04 10:47:45 · 2302 阅读 · 2 评论