![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 67
JavaScript
weixin_44953227
这个作者很懒,什么都没留下…
展开
-
给你分享一个AI编码助手——百度Comate!扫码参与抽红包活动,520宠粉!送京东卡!
给你分享一个AI编码助手——百度Comate!扫码参与抽红包活动,520宠粉!送京东卡!https://comate.baidu.com/zh/shopping?inviteCode=h02p9avr这个插件就相当于百度的文兴一言一样,可以进行代码提示和问题回答。原创 2024-05-20 16:49:44 · 550 阅读 · 0 评论 -
JavaScript点击进入全屏和退出全屏
目录效果图核心代码完整案例效果图核心代码// 检测当前是否全屏function isFullScreen() { var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement); return isFull;};// 退出全屏 function exitFullscreen(原创 2021-07-16 10:22:42 · 239 阅读 · 0 评论 -
网站动态背景粒子线条跟随鼠标移动,吸附鼠标效果代码2
说明作者:weixin_44149978原文链接:https://blog.csdn.net/weixin_44149978/article/details/98076605效果图完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>粒子线条canvas效果</title> <style> .原创 2021-07-10 17:25:01 · 781 阅读 · 0 评论 -
网站动态背景粒子线条跟随鼠标移动,吸附鼠标效果代码
说明作者:姜成SEO原文链接:https://blog.csdn.net/qq_40223005/article/details/80810695效果图完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n原创 2021-07-10 17:12:57 · 1226 阅读 · 2 评论 -
JavaScript生成随机颜色
生成随机颜色代码// rgb颜色随机function rgb() { var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var rgb = '('+r+','+g+','+b+')'; console.log("当前颜色:" + rgb); return `rgb${rgb}`;}//原创 2021-07-10 16:46:26 · 501 阅读 · 0 评论 -
yarn包管理器安装JavaScript包管理工具
文档官方文档:https://www.yarnpkg.cn/getting-started/install# 安装命令npm install -g yarn原创 2021-06-29 17:19:36 · 116 阅读 · 0 评论 -
原生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"> <titl原创 2021-06-24 14:39:06 · 2366 阅读 · 0 评论 -
原生JavaScript实现拍照生成图片
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>摄像头拍照</t原创 2021-06-24 09:23:43 · 292 阅读 · 0 评论 -
给原生html中添加水印遮罩层
效果图代码<!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"> <titl原创 2021-03-02 16:16:57 · 24086 阅读 · 0 评论 -
JavaScript 利用监听实现右键检查就 Debugger
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传</title></head><body> <form action="原创 2021-01-13 17:17:07 · 20814 阅读 · 1 评论 -
JavaScript 使用canvas绘制圆角矩形边框
目录分析完整代码如下前言在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处,然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w转载 2020-12-22 18:04:06 · 16190 阅读 · 0 评论 -
JavaScript 原生js实现鼠标拖拽移动盒子图片
主要用到函数鼠标按下:onmousedown鼠标移动:onmousemove鼠标抬起:onmouseup代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu原创 2020-12-18 10:00:35 · 5720 阅读 · 0 评论 -
JavaScript 使用Object.defineProperty方法实现简单的双向绑定
前言主要用到了 Object.defineProperty 这个方法, 改变对象属性时触发 set 方法上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>definePro原创 2020-12-08 16:40:37 · 45231 阅读 · 0 评论 -
React react-cli 简单配置根目录和build打包访问路径
配置之前需要把配置文件暴露出来使用 eject 暴露配置文件, 注意这个操作不可逆npm run eject配置根目录访问配置文件暴露出来之后, 找到 config/webpack.config.js 文件找到 alias 配置添加 '@': path.resolve('src'), 或者 '@': path.join(__dirname,'../src'), 都可以alias: { '@': path.resolve('src'), // 配置根目录访问 // Sup原创 2020-12-02 16:45:21 · 7974 阅读 · 1 评论 -
JavaScript 原生js实现动画弹窗消息
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画消息弹窗</title></head><style> .messa原创 2020-11-19 15:22:18 · 6081 阅读 · 4 评论 -
JavaScript 原生js实现自定义消息提示框
效果图上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .p原创 2020-11-18 18:17:38 · 6450 阅读 · 1 评论 -
JavaScript 原生js实现点击按钮复制内容到剪切板
效果图上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .di原创 2020-11-18 18:11:15 · 5436 阅读 · 2 评论 -
判断多个数组中是否有不同
我这里统一都是用的这个数据结构数据结构如下 数据源const ObjArr = [["A", "B", "C"],["A", "B", "D"]]多维数组中不同// 数据源const ObjArr = [["A", "B", "C"],["A", "B", "D"]]// 代码如下 ObjArr.map(item => { for(let i=0; i<ite...原创 2019-09-19 14:42:25 · 4327 阅读 · 1 评论 -
base64编码和解码的js工具函数
上代码// 使用const base64 = new Base64Code()const str = '你好'const en = base64.enCode(str)const de = base64.deCode(en)console.log(en, 'base64编码') // 5L2g5aW9console.log(de, 'base64解码') // 你好|| 中文也可以进行编码, 里面已经对数据UTF-8转码再base64编码// base64函数function Base原创 2020-06-23 17:13:25 · 6263 阅读 · 0 评论 -
使用canvas在图片上画矩形及文字
效果图上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2020-05-20 17:47:41 · 11268 阅读 · 0 评论 -
js 递归遍历树结构(tree)返回父子数值
数据最下面上代码function getParent(data2, id) { let arrRes = []; // 如果非数组直接返回 if (data2.length === 0) { if (id) { arrRes.unshift(data2) } return arrRes; ...原创 2020-04-28 16:47:52 · 12663 阅读 · 1 评论 -
JS下载文件
JS下载文件 const url = `${host}/videoData/?query=${JSON.stringify(params)}` fetch(url, { method: 'GET', headers: getHeaders() // 可以添加请求头信息 }) .then(response => { //...原创 2020-03-24 10:55:14 · 5987 阅读 · 0 评论 -
JS递归遍历树结构
JS递归遍历树结构上代码上代码// 树结构const options = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: [ ...原创 2020-03-19 16:26:00 · 7819 阅读 · 4 评论 -
JS Base64加密解密
目录1. 核心代码2. 完整代码演示核心代码function Base64() { // private property const keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; // utf-8加密 const utf8Encode = f...原创 2020-01-13 16:29:11 · 6361 阅读 · 0 评论 -
JS获取cookie
function getCookie(name) { if (document.cookie.length > 0) { const end = `${name}=` const cal = document.cookie.split(';') for (let i = 0; i < cal.length; i += 1) { const st...原创 2020-01-10 16:06:28 · 5926 阅读 · 0 评论 -
JS检测浏览内核 弹出遮罩提示
<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-...原创 2020-01-10 10:59:09 · 6111 阅读 · 0 评论 -
JavaScript开启全屏和禁用右键、选择、复制、键盘等事件
JS禁用鼠标右键在框架中使用直接看最后面// 禁用右键默认行为document.oncontextmenu = function (evt) { evt.preventDefault();};// 属性返回falsedocument.oncontextmenu = function(evt) { evt.returnValue = false;}// 或者直接...原创 2019-12-30 22:26:42 · 6644 阅读 · 0 评论 -
JS 粘贴展示图片并读取图片
主要是通过给div绑定粘贴事件div.addEventListener('paste', function(){})粘贴事件 核心代码(最下面有完整代码)const div = document.getElementById("div")const img = document.getElementById("img")div.addEventListener('paste', ...原创 2019-12-16 21:00:04 · 6516 阅读 · 1 评论 -
JS 正则提取字符串中数字
方法一 string.replace(/[^0-9]/ig, ‘’)这种方法是直接得到字符串数字var string = 'func56t9i10on'var number = string.replace(/[^0-9]/ig, '')number 结果 "56910"方法二 string.match(reg)这种得到字符串数组, 不过数字有没有分开都是字符串数组va...原创 2019-10-24 17:31:03 · 13653 阅读 · 0 评论 -
数组去重、获取数组中相同的元素和索引
第一种var arr = ['1', '2', '3', '4', '5', '6', '6', '7', '8', '1', '8', '1'];for(let i = 0 ; i < m.length; i++) { for(let j = 1; j < m.length; j++) { if(m[i] === m[j] &&...原创 2019-09-02 18:35:31 · 2188 阅读 · 0 评论 -
循环一遍把一个二维数组中所有属性名为attr的值变成1
数组是这样的let arr=[ {attr:'demo0', attrs:[ {attr:'demo00',attrs:[]}, {attr:'demo01', attrs:[]} ]}, {attr:'demo1', attrs:[ ...原创 2019-07-01 13:50:22 · 148 阅读 · 0 评论