- 博客(117)
- 收藏
- 关注
RSS订阅原创 JavaScript 实现标题滚动效果
JavaScript 实现标题滚动效果实现步骤完整代码实现步骤定义需要滚动的标题字符串 let title = 'Nothing is impossible for a willing mind'定义实现标题滚动的函数 function titleChange () { const keywords = title.split('') // 将标题转为字符串数组 const firstChar = keywords.shift() // 取出标题中第一
2021-10-04 12:53:33
628
原创 JavaScript 实现Bind方法
实现Bind 方法关键步骤完整代码示例关键步骤获取调用bind方法的函数 const f = this获取bind方法的this参数和其他参数 const args = [...arguments] const thisValue = args.shift()返回函数 return function () { return f.apply(thisValue, args) }完整代码 Functio
2021-10-03 17:45:55
209
原创 圣杯布局与双飞翼布局
圣杯布局与双飞翼布局圣杯布局效果图实现方法双飞翼布局效果图实现方法圣杯布局效果图实现方法DOM结构 <div class="header">Header</div> <div class="content"> <div class="main column">Main</div> <div class="left column">Left</div> <div class=
2021-10-03 14:15:45
203
原创 设计模式：策略模式
策略模式特点示例：购物车结算特点一个问题匹配多个解决方案可以添加解决方案可以删除解决方案示例：购物车结算const calcPrice = (function () { // 优惠类型 const sale = { '100_10': price => price -= 10, '200_30': price => price -= 30, '500_60': price => price -= 60
2021-10-02 22:19:15
100
原创 设计模式：发布订阅模式
发布订阅模式调度中心相关方法订阅取消订阅触发示例调度中心class Center { constructor () { this.message = {} } //订阅 on (type, fn) { if (this.message[type] === undefined) { this.message[type] = [] } this.message[type].p
2021-10-02 16:00:27
82
原创 设计模式：观察者模式
观察者模式观察者被观察者示例观察者观察者可以对被观察者的变化作出响应class Observer { constructor (name, action = () => {}) { this.name = name this.action = action } }被观察者observers 数组用来保存所有观察者当state 变化时，观察者将作出响应class Subject { constructor (state) {
2021-10-02 14:21:55
61
原创 单例模式：自定义弹框
自定义弹框功能完整代码效果图功能自定义弹框标题自定义弹框内容自定义弹框确认和关闭时的回调函数完整代码const Dialog = (function () { class Dialog { constructor () { this.ele = document.createElement('div') this.ele.className = 'dialog' document.body.appendChild(this.ele) this.
2021-10-02 11:39:08
169
原创 JavaScript 对象扁平化
JavaScript对象扁平化我们平时肯定遇到过多层嵌套的对象，name如何将它扁平化呢？一起来看看吧！函数封装如下：function flatten (obj) { const ans = {} inner(obj, null) function inner (o, prev) { for (let key in o) { if (o[key] instanceof Object) { if (prev
2021-09-26 19:20:19
2224
原创 数组去重的 6 种方法
数组去重常见方法利用Set const arr = [1, 2, 1, '3', '3', true, true, {}, {}] Array.from(new Set(arr)) //[1, 2, '3', true, {}, {}]利用splice( )方法 const arr = [1, 2, 1, '3', '3', true, true, {}, {}] const removeDuplicates = arr => { let n
2021-09-12 14:27:02
67
原创 数组扁平化的常见方法
数组扁平化常见方法数组扁平化是指将一个多维数组转化为一个一维数组，常见方法如下：flat( )方法 const arr = [1, [2, [3, [4, [5, [6]]]]]] arr.flat(Infinity) //[1, 2, 3, 4, 5, 6]利用正则表达式 const arr = [1, [2, [3, [4, [5, [6]]]]]] JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g
2021-09-12 13:53:11
134
原创 Nodejs 实现服务端与客户端简单通信
通过Nodejs，我们可以快速地搭建一个简单的Web服务器，实现服务端与客户端的简单通信。服务端实现过程引入http、fs、url三个模块使用createServer方法创建一个服务服务监听3000端口号当客户端向服务端发起请求时，服务端先进行路径解析，然后使用readFile方法读取客户端请求的文件，最后将数据返回至客户端。服务端代码：const http = require('http')const fs = require('fs')const url = requ
2021-08-03 00:06:10
1341
原创 MySql数据库基本操作
查看数据库语法格式：show databases;示例：创建数据库直接创建数据库语法格式：create database 数据库名;示例：创建一个名为singer的数据库此时，查看数据库，可以看到singer库已经创建好了。通过判断创建数据库语法格式：create database if not exists 数据库名;示例：先判断singer库是否存在，不存在的情况下创建singer库。由于之前并不存在singer库，所以singer库被成功创建.
2021-08-01 23:08:14
85
原创 Nodejs 检测指定目录下所有文件
在Nodejs中，文件系统提供了许多的文件操作方法，借助stat方法和readdir方法，我们可以检测某个指定目录及其下的所有文件或目录。检测test目录：完整代码： const fs = require('fs') let startRoute = './' let startName = 'test' let check = (route, name) => { let src = route + name
2021-07-26 17:00:34
870
原创 Nodejs 模块作用域
在Nodejs中，存在着模块作用域的概念，即默认情况下，一个模块所拥有的变量和函数不能在其他模块中使用。示例：模块1代码：console.log(a);console.log(add(10, 20));模块2代码：let a = 1;function add(num1, num2) { return num1 + num2;}运行模块1，结果如下：可见，默认情况下，模块彼此间不能使用对方的变量或方法。我们可以使用require方法来解决这一问题，require方法默认
2021-07-21 23:04:16
690
1
原创 Vue 解决插值表达式闪烁问题
在Vue中使用插值表达式时，遇到网速慢的情况，就会出现闪烁的问题，我们可以使用v-cloak指令来解决这个问题。默认情况下： <div id="app">{{ msg }}</div> let app = new Vue({ el: "#app", data: { msg: "Hello World!" } })如果遇到网速
2021-07-17 23:57:38
1282
2
原创 Vue 实现简易记事本
预览图：功能如下：（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）（2）点击删除，可删除对应任务（3）点击清空，所有任务都会被删除（4）左下角同步显示任务总数完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" ..
2021-07-13 13:57:20
208
原创 JavaScript this关键字
在JavaScript中，this的指向会随着环境的改变而改变。（1）全局环境：全局环境下，this指向window对象。 console.log(this);（2）全局函数（非严格模式下）：全局函数（非严格模式下）中，this指向window对象。全局函数是全局对象window的方法。 function fun() { console.log(this); } fun(); //等价.
2021-07-11 22:04:52
94
2
原创 JavaScript for in 遍历
在JavaScript中，我们可以使用for in 来遍历数组或对象。（1）遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> var arr = [5, 4, 3, 2, .
2021-06-17 14:17:04
524
原创 JavaScript 常见鼠标事件
在JavaScript 中，常见的鼠标事件有：（1）鼠标按下事件（2）鼠标抬起事件（3）鼠标单击事件（4）鼠标双击事件、
2021-06-16 23:56:36
1746
5
原创 JavaScript void 关键字
void 是JavaScript 中的一个重要的关键字，其作用是计算一个表达式，但不返回值。语法格式：void(表达式)
2021-06-15 23:57:20
489
3
原创 JavaScript 阻止超链接跳转
在JavaScript中，通过阻止事件的默认行为，我们可以实现禁止超链接跳转。方法一：<!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, init
2021-06-14 23:54:04
6544
10
原创 JavaScript 禁止选中文字
在JavaScript中，通过阻止selectstart事件的默认行为，我们可以实现禁用右键菜单。代码如下：<!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-
2021-06-14 23:33:53
2626
1
原创 JavaScript 禁用右键菜单
在JavaScript中，通过阻止contextmenu事件的默认行为，我们可以实现禁用右键菜单。具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
2021-06-14 23:28:44
4179
原创 jQuery 遍历数据
通过jQuery的 $.each( )方法，我们可以遍历数据，比如数组或对象。语法格式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="../jQuery/jQuery.js"></script></head><body>
2021-06-13 23:56:27
465
2
原创 jQuery each( ) 方法
通过jQuery的each( )方法，我们可以为匹配到的每一个元素都执行相同的函数。语法格式：$(selector).each(function(index,element))
2021-06-13 23:39:08
636
原创 jQuery scrollLeft( ) 方法
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的水平滚动条位置。（1）返回水平滚动条位置语法格式：$(selector).scrollLeft()
2021-06-13 23:20:35
507
1
原创 jQuery scrollTop( ) 方法
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的垂直滚动条位置。注意：（1）返回被选元素的垂直滚动条位置时，（2）
2021-06-13 23:06:29
941
1
原创 jQuery offset( ) 方法
通过jQuery 的offset( )方法，我们可以设置或者获取被选元素相对于文档的位置。当我们获取被选元素的位置时，只会返回匹配到的第一个元素的（1）语法格式：
2021-06-13 22:33:42
2934
1
原创 JavaScript 贪吃蛇游戏
完整代码如下：<!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"> &l...
2021-06-13 21:35:11
289
2
原创 jQuery position( ) 方法
position( ) 方法返回第一个匹配元素的位置（相对于它的父元素）。语法格式：$(selector).position()注意：
2021-06-13 00:25:20
515
1
原创 jQuery insertBefore( ) 方法
通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 HTML 元素。语法格式：$(content).insertBefore(selector)
2021-06-12 23:44:30
1152
原创 jQuery insertAfter( ) 方法
通过jQuery的 insertAfter( ) 方法，我们可以在被选元素的后面插入 HTML 元素。语法格式：
2021-06-12 23:35:43
213
原创 jQuery offsetParent( ) 方法
通过jQuery的 offsetParent( ) 方法，我们可以获取到被选元素的第一个定位的祖先元素。语法格式：$(selector).offsetParent()示例：
2021-06-12 23:11:21
152
原创 jQuery prepend( ) 方法
使用jQuery的 append( ) 方法，我们可以在被选元素的结尾处插入指定的内容。语法格式：$(selector).prepend(content,function(index,currentHTML))参数：
2021-06-12 22:54:08
457
1
原创 jQuery append( ) 方法
使用jQuery的 append( ) 方法，我们可以在被选元素的结尾处插入指定的内容。语法格式：$(selector).append(content,function(index,html))
2021-06-12 22:38:41
1980
原创 jQuery after( ) 方法
通过jQuery的 after( ) 方法，我们可以在被选元素之后插入指定的内容。语法格式：$(selector).after(content,function(index))参数：
2021-06-12 21:52:46
2018
原创 jQuery before( ) 方法
通过jQuery的 before( ) 方法，我们可以在被选元素之前插入指定的内容。语法格式：$(selector).before(content,function(index))
2021-06-12 21:40:37
1404
原创 jQuery prependTo( ) 方法
appendTo( ) 方法可用于在被选元素的开头插入 HTML 元素。语法格式：$(content).prependTo(selector)
2021-06-11 23:47:19
390
2
原创 jQuery appendTo ( ) 方法
appendTo() 方法在被选元素的结尾插入 HTML 元素。语法格式：$(content).appendTo(selector)示例：
2021-06-11 23:29:48
1806
原创 jQuery 创建元素的方法
通过jQuery，我们可以创建新的元素，并将它添加到页面上去。示例：（1）添加新段落<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../jQuery/jQuery.js"></script> <script> $(document).ready(function(){
2021-06-11 22:52:22
3399
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人