- 博客(44)
- 收藏
- 关注
RSS订阅
原创 JS 瀑布流
JS 瀑布流布局今天我们来介绍一个流行的图片布局方式，常见于个人博客，以及一些图片素材网站上。瀑布流是一种形象的称呼，大小不一的盒子就像拼图一样，一个个拼接而成，形成一个“瀑布”。效果图原理html 部分我们将盒子设置为定位。子绝父相布局。JS 部分我们可以将图片分成 3 列，当图片铺完第一行之后，我们设置left：0，从左边开始，利用判断语句查询最小高度的那一列，然后将图片放置到那一列。如此往复，就像拼图一样，瀑布流就产生了。代码<div class="all" id="all"&
2020-12-29 20:54:34
233
1
原创 仅需一个CSS样式轻松搞定视差滚动
视差滚动所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个 CSS 就满足了。原理通过样式属性background-attachment: fixed固定背景图片位置。将背景图固定在浏览器显示的窗口的固定位置，页面上下滚动时，背景图会一直固定在窗口设置的位置。简单来说，就是将图片钉在窗口某一位置。这样一来，我们滚动右侧滚动条的时候，这时背景图片看起
2020-12-14 20:52:51
429
2
原创 快速了解JavaScript作用域
JavaScript作用域局部作用域和全局作用域JavaScript 变量的有效期预编译练习解析W3 school这样解释的：在 JavaScript 中，对象和函数也是变量。作用域决定了从代码不同部分对变量、对象和函数的可访问性。局部作用域和全局作用域JavaScript中，有两种作用域类型——局部作用域和全局作用域。变量的可访问性由作用域决定，如果变量a在函数体中声明，那么它会成为该函数的局部变量，外部是不可访问的。 var global = 321; function
2020-08-15 12:01:54
252
原创 JSON数据存入MySQL
前言????????：当我们有这么一串json数据需要我们去存放到数据库时，我们该怎么办？[{ "标题": "JavaScript高级程序设计（第4版）", "图片": "https://www.ituring.com.cn/img/img-load.020f1e39.png", "作者": "[美]马特·弗里斯比（Matt Frisbie）（作者）", "translators": "李松峰（译者）"}, { "标题": "Python编程：从入门到实践
2021-05-31 00:06:33
3037
原创 MySQL 常用语句
单表查询查询所有mysql> select * from student;查询选中字段记录mysql> select s_name from student;条件查询 wheremysql> select s_name from student where s_id<5;查询后为字段重命名 asmysql> select s_name as 名字 from student;模糊查询 like匹配多个字符**%**mysql> select s
2021-05-30 22:39:28
325
1
原创 DOM获取节点的API
文档对象模型 DOM????♂️：老师，今天要讲的这个DOM是啥呀？????????：DOM的意思是文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让JS操作HTML元素而制定的一个规范。????♂️：懂了，既然是规范，肯定提供了一些API(方法)让我们操作DOM元素吧????????：是的，接下来我们着重讲讲如何获取DOM节点。DOM节点的获取通过id名获取方式一：<div id="box"></div&g
2021-05-23 22:54:38
487
原创 nodeJS 与 浏览器中的Javascript 的区别
nodeJS 与 浏览器中的Javascript 的区别全局对象——window 与 globalJavascript 是运行在浏览器上的脚本语言，在浏览器中，有一个顶级对象叫做window，它就是我们常说的全局对象。可是在 nodeJS 中，由于 nodeJS 并非在浏览器中运行，而是在我们的服务器上跑，所以它有自己的全局对象，叫做global。????♂️：老师，我不信！证明给我看！????????：别眨眼，看好咯a = 1;console.log(window.a);浏览器中
2021-05-23 15:41:58
858
16
原创 深入分析IE事件模型
IE事件模型绑定事件target.attachEvent('onclick',fn);事件解绑target.attachEvent('onclick',fn);target：表示目标元素attachEvent中第一个参数接收事件名称，需要on前缀第二个参数回调函数，事件触发时执行解绑时需要传入绑定时绑定的函数才能正确解绑IE事件模型与标准事件模型的区别事件模型绑定方式不同IE使用attachEvent()，标准模型使用addEventListener()，且除IE浏览器外的主
2021-05-15 19:04:03
420
原创 DOM的事件模型
DOM事件模型点击、滚动、触摸、拖拽……这些用户与 web 页面交互的手段都可以称之为「事件」，了解 JavaScript的事件机制，无论是对优化一些用户交互亦或是处理线上 BUG 都会有很大的帮助。DOM 0级DOM事件分为两种1.行内事件:在标签中写事件2.普通事件:元素.on事件名=函数1.行内<input type="button" id="btn" value="按钮" onclick="alert('阿巴阿巴')">2.普通事件document.querySel
2021-05-13 08:51:46
250
原创 理解数组方法reduce
Array.prototype.reduce（）reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。注意: reduce() 对于空数组是不会执行回调函数的。以上来自于菜鸟教程用法：arr.reduce(callback,initialValue)callback （执行数组中每个值的函数，包含四个参数）: 1、previousValue :上一次调用回调返回的值，或者是提供的初始值 （ini
2021-04-26 01:01:19
418
1
原创 link与@import自己的一些愚见
CSS 的几中引入方式我们首先来回顾一下 CSS 的引入方式。1.行内样式<div style="color: red">行内样式</div>2.内嵌式<style> * { margin: 0; padding: 0; }</style>3.外联式<link rel="stylesheet" href="index.css" />这就完了吗？千万别忘了还有@import 方式！<style
2021-04-25 23:45:37
133
原创 充电动画
小编有话说什么是充电动画？如果你想知道什么是充电动画的话那么就让我带你研究~小编带你研究<div class="box"> <div class="num"><span class="ele">0</span><span>%</span></div> <div class="box2"></div> <div class="box3"><
2021-04-19 00:03:04
411
2
原创 网页电子时钟
小编有话说想必大家都听说过电子时钟吧？大概长下边这个样子。那么什么是网页电子时钟？什么？是网页电子时钟？如果你想知道 什么是网页电子时钟的话那么 就让我带你研究~小编带你研究<div class="ClockBorder"> <div class="ClockScreen"> <div class="hour"> <div class="num1"> <span cl
2021-04-18 23:46:02
773
1
原创 JQ实现拖拽效果
行间拖拽效果拖拽思路想实现拖拽我们首先想到需要 3 个事件：mousedown 鼠标按下事件mousemove 鼠标移动事件mouseup 鼠标抬起事件function drag() { $(this).on('mousedown', function () { $(document).on('mousemove', function () { // 实现元素跟随鼠标移动.. }); $(document).on('mouseup', functio
2021-04-11 12:11:04
1198
1
原创 有手就行系列——复选框的联动
页面布局功能分析勾选框的联动是实现全选框与下面的勾选框联动，联动情况有很多种：全选按钮勾选时，若取消勾选下面任意一个商店的checkbox，全选按钮则取消全选按钮勾选时，若取消勾选下面任意一个商店中商品的checkbox，全选按钮则取消商店的全选按钮处于未选中状态时，当该商店下商品全部勾选时，该商店全选按钮改为选中状态该商店的全选按钮选中状态改变时，该商店下的所有按钮也应改变对应的选中状态该商店的全选按钮处于选中状态时，若该商店下有任意一个商品取消勾选状态，则该商店的
2021-04-07 18:40:16
971
原创 写一个播放器，会这些就够了！
Video标签<video></video>是HTML5中新添加的标签，可以用来播放视频文件，支持Ogg、MPEG4、WebM这三种格式的文件。格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+不支持MPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+不支持video默认的宽高为300px*150px，行内块标签行内属性src标
2021-04-03 15:42:49
448
原创 JS 浅拷贝与深拷贝实现
引言在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中浅拷贝浅拷贝是指对于基本数据类型而言，复制它的值；对引用类型的数据仅能复制到它的地址，并不能对地址内存放的值进行复制。 function shallowClone(parmas) { if (typeof parmas == 'object') { var obj = {};
2021-04-03 15:05:24
90
原创 H5 canvas画布
canvas简介Canvas 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 Canva
2021-03-31 21:09:27
217
原创 浏览器是如何工作的？
引言作为前端工程师，浏览器对于我们就像是赛车，我们了解自己的赛车的性能以及工作原理，才能更好的驾驭它。浏览器进程在浏览器诞生之初，浏览器是单进程结构。一个进程要掌管页面线程：负责页面渲染和展示JS线程：负责执行JS代码以及其他各种线程…这种早期的单进程结构造成了很多问题：不稳定：其中某个线程卡死会影响整个进程的卡死不安全：浏览器之间是可以共享数据的，导致JS可以随意访问浏览器数据不流畅：由于一个进程要负责太多事情，会出现卡顿。所以为了解决这些问题，我们现在使用的浏览器都是多进
2021-03-20 14:46:20
137
2
原创 你应该掌握的四种继承方式
你应该掌握的四种继承方式什么是继承？继承方式原型链继承借用构造函数继承组合继承圣杯模式什么是继承？继承是类与类之间的关系，其作用是使得子类具有父类别的各种属性和方法。继承方式原型链继承将父类的实例作为子类的原型function Person() { this.name = 'XD';}Person.prototype.getName = function () { console.log(this.name);};function Child() {}Child.prototy
2021-03-17 20:06:50
259
原创 柯里化函数
柯里化函数引言柯里化函数思想柯里化函数实现引言现在我们需要写一个用来拼接网址的函数，要求3个参数：protocol，hostname，pathname。通常写法是这样的：function url(protocol, hostname, pathname) { return `${protocol}${hostname}${pathname}`;}var baidu = url('https://', 'www.baidu.com', '/index.html');var blibili =
2021-03-13 18:15:53
117
原创 ES6 箭头函数
箭头函数前言箭头函数是ES6引入的一个函数的新写法，但又在一些特殊情况下与普通函数存在区别。创建一个箭头函数let arrow = ()=>{ console.log('我是箭头函数');}像上面这样，() => {} 就是一个箭头函数。但箭头函数由于没有名字，所以我们只能以函数表达式的形式给他取名字。与传统的函数定义相比起来，看起来更简洁了。function normal(){ console.log('我是普通函数');}箭头函数的传参当有参数只有一个时，无需括号
2021-03-10 20:30:32
167
原创 ES6 Promise
Promise首先说说它的中文意思，翻译过来就是_承诺_，_许诺_的意思。在我们生活中，我们向别人承诺了一件事情以后，肯定是要兑现的。那有人疑惑了，写代码，给代码有啥好承诺的呀？那我们接着来往下看。什么是Promise？Promise是ES6引入的异步编程的新的解决方案。Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。这里引出了异步这个名词。在JS中，不光有异步编程，还有同步编程。讲到这，肯定又有人懵了。那我们学Promise前还是得先简单聊一下，什么是异步,什么是同步。
2021-03-07 22:12:53
229
原创 ES6 的解构赋值
数组的解构赋值var [a, b, c] = [1, 2, 3];console.log(a); //1console.log(b); //2console.log(c); //3ES6 中允许变量赋值按照一定模式，从数组中提取值对变量进行赋值。且需要一一对应var [a, b, c] = [1, 2];console.log(a); //1console.log(b); //2console.log(c); //undefined当等号右边数组只有 2 个值时，a 和 b 会被正确
2021-03-01 20:59:33
131
原创 ES6 const
const1.const 声明必赋值const a;a = 3;报错：Uncaught SyntaxError: Missing initializer in const declaration正确写法：const a = 3;2.const 声明的变量赋值后，无法再修改const a = 3;a++;报错：Uncaught TypeError: Assignment to constant variable.3.暂时性死区与 let 相同，不再赘述，请查阅之前博客4.c
2021-02-26 15:09:34
63
原创 ES6 入门：let
let1.不允许重复声明变量名let a = 222;var a = 2;console.log(a);运行导致报错：Uncaught SyntaxError: Identifier 'a' has already been declareda 已经被声明过2.let 拥有块级作用域{ let a = 9;}报错：Uncaught ReferenceError: a is not defineda 未被定义{ var a = 0;}console.log(a);
2021-02-07 15:10:01
605
原创 数组排序方法
数组排序利用算法排序冒泡排序var a = [23, 4, 1, 234, 43, 2];for (var i = 0; i < a.length; i++) { for (var k = 0; k < a.length; k++) { if (a[k] > a[k + 1]) { [a[k], a[k + 1]] = [a[k + 1], a[k]]; } }}console.log(a);利用数组 API数组的 sort()方法v
2021-01-26 09:22:43
78
原创 JS脚本的加载
JavaScript 有三种引入方式：1、行内引入:<开始标签 on+事件类型=“js 代码”></结束标签>行内引入方式必须结合事件来使用，但是内部 js 和外部 js 可以不结合事件<body> <input type="button" οnclick="alert('行内引入')" value="button" name="button" /> <button οnclick="alert(123
2021-01-23 16:51:31
245
原创 parseInt鲜为人知的用法
用法一：将小数转换成整数 var float_num = 3.14; float_num = parseInt(float_num); console.log(float_num);输出结果：用法二 以数字开头的字符变量转换成整数 var str_num = '3.14string'; str_num = parseInt(str_num); console.log(str_num);输出结果：注意：parseInt转换字符串为数字的时候，如果字符串数字不是连
2021-01-19 14:21:26
926
原创 两个流程图让你一看就明白break和continue的区别
跳出循环的两个方式1.breakbreak语句用来终止循环语句，即循环条件没有False条件或者序列还没被完全递归完，也会停止执行循环语句。break流程图2.continuecontinue只是终止本次循环，接着还执行后面的循环，break则完全终止循环continue流程图代码示例：for (var i = 0; i < 10; i++) { if (i == 3) { break; } console.log(i);}当循环了4次之
2021-01-16 16:15:26
3009
原创 JS日历
效果图原理利用Date()方法获取系统时间，制作万年历。getFullYear()获取年getMonth()获取月getDate()获取日getDay()获取星期实现<div class="rili" style="user-select: none"> <div id="top"> <span onclick="pre()" id="pre" style="cursor: pointer"><</span
2021-01-11 19:43:53
199
原创 手风琴特效这么简单还不赶紧来学？
手风琴特效效果展示实现原理鼠标移入到某张图片上时，使图片宽度变大，其余图片宽度减小。鼠标移入效果我们可以利用伪类:hover实现。实现方法有两种：第一种：最传统的布局方法，使用float。但需要计算图片缩小的尺寸，比较繁琐。第二种：使用 CSS3 加入的新样式——弹性盒子display:flex，其中的弹性元素会自动分配剩余空间，无需手动计算缩小后每张图片所占像素。方法一我们先来展示 float 的写法：html 结构：<ul> <li><img sr
2020-12-26 13:21:37
326
1
原创 想学波纹效果？我教你呀
波纹效果展示看上去是不是很高大上，其实明白了原理很简单。原理利用border-radius画出 2 个不规则的圆，调整到合适位置，让圆超出父级一部分，然后父级设置overflow:hidden就可以了。然后将圆添加 CSS3 动画效果，实现旋转动画。如果还有点懵的话，那我就直接点，上代码。开始制作首先我们先写个 div，设置好宽高和颜色。<div class="cole"></div>.cole { position: relative; width: 4
2020-12-21 19:37:01
2857
5
原创 CSS3 小动画练习——行驶的汽车
CSS3 小动画练习——行驶的汽车今天来使用 CSS3 中的 animotion 动画绘制一个在公路上行走的汽车。首先我们在网上随便找到一张免扣的汽车素材。[外链图片转存失败,源站可能有防盗链机首先我们绘制公路<div class="road"> <img src="car.png" alt="" class="car" /> <ul> <li></li> //马路的白色虚线 <li><
2020-12-17 20:46:50
1447
1
原创 浮动与inline-block的区别
display:inline-block 行内块inline-block 可以将 html 元素设置为行内块元素行内块元素都拥有以下属性或特点： 1.可设置宽度， 2.可设置高度 3.不自动换行<div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></div>* { margin:
2020-12-10 19:36:58
784
原创 HTML的标准模式与怪异模式
HTML的标准模式与怪异模式HTML 的结构在HTML4中 DOCTYPE有三种模式标准模式与怪异模式HTML 的结构<html> <head> <meta charset="utf-8" /> <title></title> </head> <body></body></html> 上面就是一个完整的html结构，但我们会发现，用vscode自动生成HTML结
2020-12-07 20:46:35
797
1
原创 快速认识原型
前 言在JavaScript中，我们可以通过操作原型来模拟继承。学习继承之前，我们需要先要了解以下JavaScript中的原型对象。1. __prto__ 和 prototype 的区别对 象具有 _proto_ 属性，可称为 “隐式原型” 。一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。方 法这个特殊的对象，除了拥有上述的 _proto_ 属性，prototype 属性为方法独有。当我们创建实例化对象时，对象中的 _proto_ 属
2020-08-23 11:32:16
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人