JavaScript实现简单版的留言发布与删除
首先用户在输入框中输入内容，按下发布按钮，内容到下面的li中，并且清空输入框中的内容
下面这个li元素就是后面创建的
<!DOCTYPE html>
<html lang="en">
<head>
<meta cha...[2022/3/8]
JavaScript仿京东实现秒杀倒计时案例详解
功能介绍：
1、这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
2、三个黑色的盒子，分别存放时、分秒
3、三个盒子利用innerHTML存入倒计时
<!DOCTYPE html>
<html lang="en">
...[2022/3/8]
利用JavaScript实现仿京东放大镜效果
功能实现
1、鼠标经过小图片盒子，黄色的遮挡层和大图片显示，离开时就隐藏2个盒子功能
2、黄色遮挡层跟着鼠标走
把鼠标的坐标给盒子，不断地进行赋值操作
把鼠标地坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
首先是获得鼠标在盒子内地坐标
然后把数值给遮挡层地left和top...[2022/3/8]
JavaScript的事件监听你了解吗
目录1. 什么是事件监听？2. DOM0级事件监听2.1)常见的页面事件监听2.2)常见的鼠标事件监听2.3)常见的键盘事件监听2.4)常见的表单事件监听3. DOM2级事件监听总结 1. 什么是事件监听 ？
事件监听就是计算机对事件进行监听，知道什么时候...[2022/3/7]
JavaScript压缩并加密图片的方法你了解吗JavaScript压缩并加密图片的方法你了解吗
目录一、压缩图片二、加密图片总结 一、压缩图片
压缩原理：
将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。
完整代码：
<body>
&...[2022/3/7]
关于JavaScript中JSON的5个小技巧分享
目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据 1. 格式化
默认的字符串化器还会缩小 JSON，看起来很难看
const user = {
name: ''John'',
age: 30,
...[2022/3/7]
JS实现表单全选以及取消全选实例
本文实例为大家分享了JS实现表单全选以及取消全选的具体代码，供大家参考，具体内容如下
实现效果：
全选按钮：点击全选按钮所有的小按钮都会被选中；点掉全选按钮，所有按钮取消选中；
小按钮：只有全部被选中，全选按钮才会被选中
思路分析：
1、全选和取消全选做法：让下面所有复选框的 ch...[2022/3/7]
JavaScript仿京东搜索框实例
马上就到双十一了，我们在京东淘宝购物，疯狂剁手的同时，有没有注意到京东的搜索框呢，除了能进行搜索内容以外，它的样式又是如何实现的呢？
下面就分析一下如何实现仿京东的搜索框。
核心分析：
JavaScript部分：
1、当文本框获取焦点的时候，div中的字体颜色变为rgb(200,20...[2022/3/7]
JS实现拖动滑块验证
使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。
实现思路：
1、获取silde滑块（获取元素）
2、为元素注册事件———鼠标点击事件（onmousedown）鼠标点击之后获得当前鼠标的X坐标。
3、如何获取到鼠标的x坐标&mdas...[2022/3/7]
使用原生JS获取select元素选中的value和text值
示例代码如下(js直接写在了html里面，没有写在一个单独的外部文件中)：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width...[2022/3/2]
js异步之async和await实现同步写法
首先我们假设有一方法 readFile 可以读取文件内容, 但是它是异步的。
var gen = function* (){
? ? var a = yield readFile(''./a.txt'');
? ? console.log(a.toString());
? ?...[2022/3/2]
基于JavaScript打造一款桌面级便签系统
先看下效果：
载体就是一个网页，用html，c 和JavaScript实现一个简单的便签系统。
动画效果用的是animation.c 库，缓存用的localStorage。
除非手动清空便签，否则便签会一直保留，非常方便。
鼠标右键可以点开菜单。
代码：...[2022/2/28]
Javascript动手实现call,bind,apply的代码详解
1.检查当前调用的是否为函数
2.如果当前没有传入指向的this，则赋值为window
3.将fn指向当前调用的函数
4.获取传入的参数
5.将参数传入fn进行调用
6.将对象上的fn删除
7.返回结果
普通call的实现
function hello(){...[2022/2/22]
学习Vite的原理
目录1. 概述2. 实现静态测试服务器3. 处理第三方模块4. 单文件组件处理 1. 概述
Vite是一个更轻、更快的web应用开发工具，面向现代浏览器。底层基于ECMAScript标准原生模块系统ES Module实现。他的出现是为了解决webpack冷启动时间过长以及Webpack HMR热...[2022/2/14]
js事件流、事件委托与事件阶段实例详解
目录前言1、事件流2、事件处理程序3、事件对象4、跨浏览器事件处理5、事件委托总结 前言
JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。本文总结一下 JS 中的事件相关知识点。
...[2022/2/14]
基于JavaScript写一款EJS模板引擎基于JavaScript写一款EJS模板引擎
目录1. 起因2. 基本语法实现3. Function函数4 with5. ejs语句6. 标签转义 1. 起因
部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，突然发现之前似乎从来都没有考虑过这个问题，一直都是直接拿过来用的。那就动手实现一下吧。本文主要介绍ejs的简单使用，并非全部...[2022/2/14]
一起来看看js对象和事件的学习笔记
目录1.内置对象2.对象2.1 对象的创建2.1.1字面量形式创建2.1.2new object 创建2.1.3object对象的create方法3.对象的序列化和反序列化4.this4.1 在函数中使用this4.2在对象中使用this5.事件5.1事件5.2作用5.3事件中的几个名词5...[2022/2/14]
千篇一律的JS运算符讲解,一起来看看千篇一律的JS运算符讲解,一起来看看
目录算术运算符字符串运算符赋值运算符比较运算符逻辑运算符三元运算符位运算符运算符优先级总结 算术运算符
对数值类型的变量及常量进行算数运算。也是最简单和最常用的运算符号。
四则混合运算，遵循 “先乘除后加减”的原则。取模运算结果的正负取决于被模数（%左边的数）的符号...[2022/2/14]
JavaScript实现计算器的四则运算功能
目录一、需求 + 最终实现1. 需求2. 说明：利用了字符串（split、replace）和数组（splice）的方法。3. 代码实现二、实现步骤1. 版本一：实现基础加减乘除2. 版本二：实现高位数的运算3. 支持多次的运算三、思考后端思维前端思维结束 一、需求 + 最终实现
注：只是前端实现...[2022/2/9]
JS判断对象属性是否存在的五种方案分享
目录背景检查属性是否存在inReflect.has()hasOwnProperty构造函数法对象字面量缺点
覆盖报错Object.prototype.hasOwnProperty()ES13（ES2022）Object.hasOwn()总结 背景
在这篇Acce ible Object.prot...[2022/1/24]
客户端JavaScript的线程池设计详解
目录1.介绍：2.准备工作：3.测试spark-md5是否正常工作：4.线程池设计5.spark-md5对文件进行md5编码6.大量文件进行MD5加密并使用线程池优化总结 1.介绍：
本打算在客户端JavaScript进行机器学习算法计算时应用线程池来优化，就像()演示的神经网络。但是由于各种原...[2022/1/24]
七个基于JavaScript实现的情人节表白特效
目录七夕情人节送花动画告白特效玫瑰花盛开动画告白特效3d旋转相册点击爱心散开动画告白特效雷电打出告白文字特效粒子组合告白文字特效小熊拉手CSS3情人节动画表白特效 七夕情人节送花动画告白特效
效果展示
代码展示:
<div id=''content''>
&l...[2022/1/24]
javascript的防抖和节流你了解吗
一：为什么需要防抖与节流
防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题，比如在
1.用户体验上，触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死，卡顿的现象
2.服务器上：加重服务器压力
二：防抖
防抖是当事件或函数被触发后，延迟n秒后在...[2022/1/24]
JavaScript页面回流与重绘
目录1.DOMAPI1.1获取元素相关结点API1.2增加节点API2.回流与重绘2.1CSS的书写顺序影响2.2节点渲染优化 1.DOMAPI
1.1获取元素相关结点API
<body>
?? ?<div cla ="item">
?? ??? ?<h3 ...[2022/1/19]
JavaScript实例 ODO List分析
目录一、实例代码HTMLCSSJavaScript二、实例演示三、实例剖析 一、实例代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? &...[2022/1/19]
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）
效果：默认一直隐藏导航栏，当滚动条滚到超过300px按钮出现，点击回到顶部按钮回到顶部，并隐藏按钮，鼠标移动到顶部导航栏出现，鼠标移出导航栏后3秒后再次隐藏（导航栏...[2022/1/18]
JavaScript DOM 基础操作
JavaScript DOM 基础操作
一、获取元素的六方式
document.getElementById(''id名称'') 根据id名称获取
document.getElementsBycla Name(''元素类名'') 根据元素类名获取 返回值：伪...[2022/1/18]
JavaScript ES6的函数拓展
目录ES6函数拓展函数的默认参数reset参数name属性箭头函数 ES6函数拓展
函数的默认参数
之前的写法:
function count(x, y) {
?? ?return x + y;
}
count(3); 因为只传递了参数x,y的默认值为undefined
und...[2022/1/18]
JavaScript创建和获取时间的方法
一、获取时间常用方法
1、创建时间对象
var time=new Date() 创建当前的时间信息对象
var time1=new Date(2022,1,1,10,25,30) 创建2022-1-1 10:25:30 的时间对象
2、获取年份信息
var year=ti...[2022/1/18]
Javascript中数组的定义和常见使用方法
一、定义数组
1、定义数组
var arry=[1,2,''小名'',false] var 数组名=[值1,值2,...]
2、设置数组长度
arry.length=10 数组长度设置为10
二、数组常见方法
（1）在尾部增加值（push（））
格式：数组名.push(...[2022/1/17]
一篇文章让你轻松记住js的隐式转化
目录前言一、包装类Boolean()扩展Number()引用类型转换Number原始类型转Number还有这些混淆点是需要注意的:扩展String()Object.prototype.toStringArray.prototype.toString二、隐式转化触发规则布尔的隐式转化number的隐式...[2022/1/17]
async await的理解
初识
async 函数表示这个函数内部有异步请求,如果这个 async 函数没有返回值,那么这个 async 仅仅只是一个标识而已.
await 需要结合 async 函数一起使用,它通常用于等待一个 Promise 函数或 async 函数的执行(你当然可以写个await 123,但这不会有...[2022/1/17]
基于JS实现弹性漂浮广告的示例代码
目录效果图1.功能（鼠标移入移出事件、点击事件、定时器控制移动）2.div初始样式设置3.获取div可以移动的页面大小4.定时器控制移动，鼠标移入事件停止移动，鼠标移出继续移动。5.点击事件点击让div消失6.完整代码 效果图
1.功能（鼠标移入移出事件、点击事件、定时器控制移动）
d...[2022/1/17]
JavaScript实现五种不同烟花特效
目录 一、简单大气的烟花二、在农村看到的烟花三、可点击的烟花四、3D旋转烟花五、可拖动视角的自定义烟花 一、简单大气的烟花
演示地址：http: haiyong.site/fireworks1
HTML代码：
这里的HTML代码很简短
<div>...[2022/1/17]
诡异的 javascript 变量
诡异例子：
function DelayExe() {
var a = 10;
setTimeout( function Print() { console.log(a); }, 1000 );
}
&n...[2022/1/17]
对象及defineProperty 方法对象及defineProperty 方法
数据属性
configurable
属性是否可以通过 delete 删除并重新定义
是否可以修改他的特性（属性是否可以被配置）
是否可以把它改为访问器属性
默认 true
enumerable 属性是否可以通过 for-in 循环返回 默认true
writable 属性值是否可以被修改 ...[2022/1/17]
我的简易2048小游戏记录整理我的简易2048小游戏记录整理
前言
注：该篇记录暂未实现过渡动画以及移动端的上下左右操作
我的2048后续最新效果展示2048GAME (226yzy.com)
还有后续代码我放在了我的Github上了226YZY/my2048game: 我的简易2048小游戏 (github.com)
(本篇效果烦请自行根据代码复现...[2022/1/17]
Three.js 实现虎年春节3D创意页面
背景
虎年 ?? 春节将至，本文使用 React + Three.js 技术栈，实现趣味 3D 创意页面。本文包含的知识点主要包括：ShadowMaterial、 MeshPhongMaterial 两种基本材质的使用、使用 LoadingManager 展示模型加载进度、OrbitCont...[2022/1/17]
jsPDF 添加 中文字体 分页打印 移除空白页
jsPDF2.5版本 默认不支持utf-8的字体 具体看官方的说明，默认是不支持中文的。要使用中文需要自己添加字体。
1 将字体转换为base64编码 然后引入。也可以直接引入二进制文件，但没试过这个。
建议直接使用jsPFD源码里的 /fontconverter/fontconverter...[2022/1/17]
JavaScript：数据类型详解
ECMAScript中数据类型目前有两种：基本数据类型和引用数据类型。
基本数据类型
基本数据类型也称作简单数据类型，为Undefined，Null，Boolean，Number，String，Symbol。
基本数据类型的特点是：在内存中有固定大小空间，保存在栈中。
1、Undef...[2022/1/17]
call、apply、bind
call() 和apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数。
都是在特定作用域中调用函数，等于设置在函数体内的this的值。
call()和apply()的第一实参是要调用函数的母对象。
注：在严格模式中，call()和apply()第一个实参...[2022/1/17]
JavaScript?Canvas绘制六边形网格
本文实例为大家分享了JavaScript Canvas绘制六边形网格的具体代码，供大家参考，具体内容如下
使用Canvas绘制六边形网格。
主要思路是先画给定中心点的六边形，然后二重循环遍历所有中心点，画所有的六边形。
<!DOCTYPE HTML>
<html&g...[2022/1/17]
JavaScript的Set数据结构详解JavaScript的Set数据结构详解
目录1. 什么是 Set2. Set 构造函数2.1) 数组2.2) 字符串2.3) arguments2.4) NodeList2.5) Set3. Set 的实例属性和方法4. Set 的成员访问5.&e...[2022/1/3]
一篇文章带你搞懂JavaScript的变量与数据类型
目录前言：温馨提示：变量1.声明2.赋值3.二个语法小细节变量的命名规范为什么需要数据类型？简单数据类型(基本数据类型）数字型字符串型 String什么是数据类型的转换1.转换为字符串2.转换为数字型(重点)转化为布尔型总结 前言：
我不是搞前端，而是搞后端的。本命编程语言是java。学习js的...[2022/1/3]
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好，我叫小秃僧
这篇文章是讲解云开发如何上传、下载、预览、删除图片，并且以九宫格展示图片的功能
@目录1、 实现效果2、JavaScript代码3、wxml代码4、wx 代码
1、 实现效果
废话少说，先看效果为敬：
说明：
中间停顿一下是我在选择照片上传。点击右上角的...[2022/1/1]
Reflection 基础知识(二)
Proxy 定义
Proxy用于修改对象的某些行为，获取值，设置值等
let p = new Proxy(target, handler);
target 用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
一个对象，其属性是当执行一个操作时定义代理的行...[2021/12/31]
详解JavaScript的计时器和按钮效果设置详解JavaScript的计时器和按钮效果设置
计时器效果：
<div>
<font id=''timeCount'' style=''display:inline-block; font-size:72px;width:100px;text-align:right;''>0</fo...[2021/12/31]
javascript的var与let,const之间的区别详解
目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量（常量与变量声明）总结 说到JavaScript中声明变量的几种方法也就是var、let、const了，let和const是es6中新增的命令。那么它们之间有什么区别呢？
我们先整体说一下三者的区别，在详细介绍，var、let、...[2021/12/31]
Reflection 基础知识(一)Reflection 基础知识(一)
反射机制的定义
反射通常指在程序在运行时能够获取自身的信息。
静态语言反射
在java中使用反射的一个例子
Cla <?> clazz = Cla .forName("com.netease.main.Person"):
Method[] methods = clazz.getM...[2021/12/31]
JSON.parse 和 JSON.stringify 详解
JSON格式，(简写JavaScript Object Notation)，是一种用于数据交换的文本格式，书写简单。
基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。
在ES5中，增加了一个JSON对象，专门用来处理JSON格式的数据。
JSON是...[2021/12/31]
经验首页