JavaScript
记录学习过程中遇到的问题和基础知识小案例的总结
初辰ge
这个作者很懒,什么都没留下…
展开
-
【fitview】一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果
fitview 是一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果。原创 2024-08-10 16:29:32 · 408 阅读 · 0 评论 -
【p-export-excel】一个轻松实现Excel文件导出的JavaScript插件
p-export-excel 是一个导出 Excel 的 js 插件,支持丰富的自定义配置选项,能够轻松生成 xlsx 和 csv 格式的数据报表。原创 2024-07-30 14:09:19 · 542 阅读 · 0 评论 -
封装js方法实现无缝循环滚动效果
因为网上的插件多少都有点奇怪的bug,比如循环一轮之后就卡一下,不是无缝衔接,找了好多也没找到解决办法,于是只能自己写轮子原创 2024-05-07 11:42:48 · 336 阅读 · 0 评论 -
callback回调、promise和async、await区别以及用法
callback回调、promise和async、await区别以及用法转载 2024-04-28 18:21:54 · 222 阅读 · 0 评论 -
原生js实现无缝循环滚动效果
原生js实现如下图无缝循环滚动效果。原创 2024-03-28 22:39:07 · 927 阅读 · 0 评论 -
axios相应拦截器
【代码】axios相应拦截器。原创 2023-03-07 11:15:33 · 122 阅读 · 0 评论 -
纯js导出Excel文件(无需引入插件)
【代码】纯js导出Excel文件(无需引入插件)原创 2022-11-30 16:47:53 · 536 阅读 · 0 评论 -
js多文件下载和多文件分文件夹打包下载并重命名
【代码】js多文件下载和多文件分文件夹打包下载并重命名。原创 2022-11-14 13:15:03 · 1226 阅读 · 0 评论 -
js设置定时器和清除定时器
//setTimeout 1000ms后执行1次var time1 = setTimeout(function(){},1000); //setInterval 每隔1000ms执行1次var time2 = setInterval(function(){},1000) //清除Timeout的定时器clearTimeout(time1); //清除Interval的定时器clearInterval(time2);...原创 2022-04-28 14:23:35 · 1273 阅读 · 0 评论 -
编写一个程序将数组去除其中重复部分数据,最终得到一个升序且不重复的数组
已知如下数组:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组去除其中重复部分数据,最终得到一个升序且不重复的数组var arr2 = []var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];this.fn(arr, arr2)arr2 = arr2.原创 2021-12-27 14:28:47 · 450 阅读 · 0 评论 -
原生js实现图片列表懒加载和截流
为什么图片列表要用懒加载?1 增强用户体验2 优化代码3 减少http的请求4 减少服务器端压力5 服务器的按需加载6 提升页面第一次加载的速度代码// 懒加载实现function lazyload(imgs) { var h = window.innerHeight; var s = document.documentElement.scrollTop for (var i = 0; i < imgs.length; i++) { if ((h + s) &原创 2021-06-24 08:50:22 · 539 阅读 · 0 评论 -
案例:正则表达式表单验证 js小案例
案例:正则表达式表单验证 js小案例功能需求:1. 如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色2. 如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色 页面展示:案例分析:1. 用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为6~16位. 2. 首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/3. 当表单失去焦点就开始验证.4. 如果符合正则规范, 则让后面的span标签原创 2020-12-24 20:10:06 · 1032 阅读 · 1 评论 -
JS中的正则表达式
正则表达式什么是正则表达式?正则表达式的特点是什么?正则表达式如何创建?如何测试正则表达式?什么是正则表达式中的边界符?无边界符单边界符双边界符什么是正则表达式?正则表达式是用于匹配字符串中字符组合的模式。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。正则表达式的特点是什么?灵活性、逻辑性和功能性非常的强。可以迅速地用极简单的方式达到字符串的复杂控制。正则表达式如何创建?方式原创 2020-12-24 19:43:56 · 862 阅读 · 0 评论 -
案例:仿淘宝固定右侧侧边栏 天猫左侧导航栏 js小案例
案例:商城固定左侧侧边栏动图代码html部分<div class="leftnav"> <ul> <li>导航</li> <li>超市</li> <li>酷玩</li> <li>家居</li> <li>户外</li> <li>生活</原创 2020-12-10 16:18:06 · 1543 阅读 · 1 评论 -
案例:仿京东放大镜 html js 小案例
案例:仿京东放大镜具体效果如图下,左边半透明小遮罩是放大镜,右边显示效果案例分析:整个案例可以分为三个功能模块鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能移动黄色遮挡层,大图片跟随移动功能代码展示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2020-12-10 14:18:37 · 1284 阅读 · 0 评论 -
案例:获取URL参数 接收上个页面表单提交的url值
案例:获取URL参数接收上个页面表单提交的url值动图展示:代码展示://页面一<form action="获取URL参数.html" method="get"> <input type="text" name="name"> <input type="submit"></form>//页面二<p>案例:获取URL参数</p><div></div><script&原创 2020-12-09 17:15:27 · 1628 阅读 · 1 评论 -
案例:5分钟自动跳转页面 监听单击事件 倒计时跳转
案例:5分钟自动跳转页面点击跳转页面和自动跳转页面动图展示:代码展示:<p>案例:5分钟自动跳转页面</p><button>直接跳转</button><div></div><script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEvent原创 2020-12-09 17:10:28 · 962 阅读 · 0 评论 -
案例:发送短信倒计时 js 手机60秒验证码
案例:发送短信倒计时点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信。动图展示:代码展示:<p>案例:发送短信倒计时</p>手机号码: <input type="number"> <button>获取验证码</button><script> var btn = document.querySelector('button'); // 全局变量,定义剩下的秒数 var time = 59原创 2020-12-09 17:00:39 · 3713 阅读 · 4 评论 -
案例:倒计时 js小案例
案例:倒计时倒计时展示案例动图展示:代码展示:<p>案例:倒计时</p><div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span></div><script> // 1. 获取元素(时分秒盒子)原创 2020-12-09 16:46:01 · 1531 阅读 · 1 评论 -
案例:5秒后关闭广告 定时器
案例:5秒后关闭广告五秒之后,div盒子隐藏动图展示:代码展示:<p>案例:5秒后关闭广告</p><div class="ad">广告</div><script> // 获取要操作的元素 var ad = document.querySelector('.ad'); // 开启定时器 setTimeout(function () { ad.style.display = 'none'原创 2020-12-09 16:41:45 · 2153 阅读 · 0 评论 -
案例:模拟京东快递单号查询 字体放大显示
案例:模拟京东快递单号查询在文本框中输入内容时,文本框上面自动显示大字号的内容。动图展示:代码展示:<p>案例:模拟京东快递单号查询</p><div class="search"> <div class="con"></div> <input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>原创 2020-12-09 16:17:32 · 1445 阅读 · 2 评论 -
案例:模拟京东按键输入内容 键盘事件
项目场景:提示:这里简述项目相关背景:例如:项目场景:示例:通过蓝牙芯片(HC-05)与手机 APP 通信,每隔 5s 传输一批传感器数据(不是很大)问题描述:提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta原创 2020-12-09 16:11:54 · 1087 阅读 · 0 评论 -
JS基础知识(作用域、对象)
JavaScript基础知识作用域全局作用域局部作用域变量的作用域全局变量局部变量作用域总结预解析变量预解析(变量提升)函数预解析(函数提升)函数表达式声明函数问题对象创建对象利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象对象的使用遍历对象作用域全局作用域作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件内局部作用域作用于函数内的代码环境,就是局部作用域,因为跟函数有关系,所以也称为函数作用域。变量的作用域全局变量在全局作用域下声明的变量叫原创 2020-09-29 09:38:34 · 1512 阅读 · 0 评论 -
JS基础知识(数组计算求值)
JavaScript基础知识数组求和求数组平均数求数组最大值求数组最小值去除最大值和最小值后求数组平均数数组求和var chuchen=[10,20,30,40,50,60,70,80,90]; //定义一个数组var sum=0; //定义一个变量sum来代表我们后期要计算的和,初识值为0for(var i=0;i<chuchen.length;i++){ sum+=arr[i]; //每一个数字累加固定用法简写}console.log(sum);求数组平均数var原创 2020-09-22 22:58:45 · 2045 阅读 · 1 评论 -
JS基础知识(数组、函数)
JavaScript基础知识数组创建数组利用 new 创建数组利用数组字面量创建数组获取数组中的元素遍历数组数组遍历数组的长度数组中新增元素函数函数的使用声明函数调用函数函数的封装函数的参数函数参数语法函数形参和实参数量不匹配时函数的返回值return 语句break ,continue ,return 的区别函数的两种声明方式自定义函数方式(命名函数)函数表达式方式(匿名函数)数组概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式数组是指一组数据的集合,其中的每个数据被称作元素,原创 2020-09-22 09:30:03 · 1978 阅读 · 2 评论 -
JS基础知识(运算符、流程控制、循环)
JavaScript基础知识运算符运算符的分类算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符流程控制顺序流程控制分支流程控制if 语句if else语句(双分支语句)if else if 语句(多分支语句)循环for循环双重for循环while循环do-while循环运算符运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号算数运算符概念:算术运算使用的符号,用于执行两个变量或值的算术运算表达式:是由数字、运算符、变量等以能求得数值的有意原创 2020-09-20 22:47:15 · 921 阅读 · 2 评论 -
JS基础知识(变量、数据类型)
JavaScript基础知识初始JavaScriptJavascript是什么JavaScript的作用HTML/CSS/JS 的关系浏览器执行JS两部分JS组成JS初体验行内式内嵌式外部JS文件JavaScript注释单行注释多行注释JavaScript输入输出语句初始JavaScriptJavascript是什么JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行,现在也可以基于 Nod原创 2020-09-20 13:58:52 · 2722 阅读 · 2 评论