
前端技术
技术介绍
小也同学
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
var、let、const的解析使用
var、let、const的解析使用原创 2023-03-05 23:21:55 · 285 阅读 · 1 评论 -
原生上传文件附件写法和即视查看上传进度过程
文件上传原创 2022-11-07 17:15:36 · 636 阅读 · 0 评论 -
介绍document部分自带的方法及属性,场景使用例如倒计时等
倒计时原创 2022-10-28 11:32:53 · 1043 阅读 · 0 评论 -
el-input组件结合change使用原生js实现只能输入整数
el-input组件结合change使用原生js实现只能输入整数原创 2022-08-03 17:17:18 · 619 阅读 · 0 评论 -
前端原生js实现简单滑动解锁的两个方法
前端原创 2022-07-01 16:14:41 · 894 阅读 · 0 评论 -
货币数字转换千分位,使用过滤器属性filters实现
Vuefilters过滤器使用原创 2022-06-28 15:02:34 · 311 阅读 · 0 评论 -
使用cookie实现记住密码并且有过期时间功能和localStorage实现记住密码
记住密码和账号的功能和后台无关,是由前端进行操作的。一般像这种操作会用到本地绘画存储技术(localStorage,sessionStorage,cookie,它们在存储的时间,存储大小…都有各自的区别,不太了解的话可以百度查询一下相关文档)。常理而言记住密码一般都需要过期时间,所以根据这一特性可以利用cookie进行实现是个功能,(cookie可以设置过期时间)<div class="count"> <div class="user">原创 2022-02-14 10:38:56 · 1061 阅读 · 0 评论 -
js获取当月月初和月末和当天的日期和0点时间戳
获取当天日期和0点时间戳new Date().toLocaleDateString() 获取当前日期的常规格式xxxx/yy/zznew Date(new Date().toLocaleDateString()).getTime()获取当月月初日期和0点时间戳 var date = new Date(); date.setDate(1); var month = parseInt(date.getMonth() + 1); var day = dat原创 2022-01-10 18:14:24 · 4389 阅读 · 1 评论 -
引入js-base64进行字符串加密传输
main.js文件引入Vue.prototype.Base64 = require(‘js-base64’).Base64;vue文件使用this.Base64.encode(字符串)原创 2021-12-28 15:48:29 · 929 阅读 · 0 评论 -
Math.Round的使用
round() 方法可把一个数字舍入为最接近的整数。正数按照常规的四舍五入得出整数负数5为界限,包括5以下整数字值越大,5以上得出整数值越小例子如下var e=Math.round(-2.50)-2var e=Math.round(-2.60)-3var a=Math.round(2.60);var b=Math.round(2.50);var c=Math.round(2.49);var d=Math.round(-2.60);var e=Math.round(-2.50);v原创 2021-12-22 10:29:34 · 1966 阅读 · 0 评论 -
自定义指令:防止按钮短时间内重复提交
main.js文件里添加// 自定义指令:防止按钮重复提交Vue.directive(‘preventReClick’, {inserted (el, binding) {el.addEventListener(‘click’, () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 1000)}})}})使用...原创 2021-12-17 14:44:53 · 178 阅读 · 0 评论 -
js写法使字符串换行,“\n“ 换行符号
“\n” 换行符号生效需搭配css的"white-space: pre"<view style="white-space: pre"> {{strs }}</view>let strs = "阶梯数量 含税价 不含税价\n";原创 2021-11-19 11:10:10 · 8062 阅读 · 0 评论 -
解析浏览器被转义或者加码的路径,解码unescape,加码escape
var str="Need tips? # Visit RUNOOB!";var str_esc=escape(str);document.write(str_esc + "<br>")document.write(unescape(str_esc))原创 2021-11-18 12:58:16 · 452 阅读 · 0 评论 -
前端常出现报错信息1
代写原创 2021-10-20 10:34:01 · 413 阅读 · 0 评论 -
for...in和forEach等的循环return后的区别
const list = [{item:1},{item:2}]forEach循环return返回false之后还是会继续执行循环和往下执行 list.forEach((item) => { console.log('212 :>> ', 212); return false; }); console.log('111 :>> ', 111);forEach循环return返回false之后还是会继续执行循环和往下执行 for (const原创 2021-07-16 13:23:23 · 493 阅读 · 0 评论 -
indexOf和lastIndexOf的区别
indexOf语法:arr.indexOf(searchElement[, fromIndex = 0]),默认从0索引开始indexOf() 返回数组中第一个满足条件的索引(从0开始), 不满足返回-1var num = [10, 20, 30, 40, 50, 60, 70, 80, 90];var newNum3 = num.indexOf(40);var newNum4 = num.indexOf(40, 10);//从索引10的位置开始向后查找console.log("newNum3原创 2021-05-13 10:58:22 · 165 阅读 · 0 评论 -
DEV、SIT、UAT、PET、SIM、PRD、PROD缩写介绍
按开发、测试、上线的时间线排序:DEV Development 研发环境SIT System Integrate Test 系统集成测试环境(内测)UAT User Acceptance Test 用户验收测试环境PET Performance Evaluation Test 性能评估测试环境(压测)SIM Simulation 高仿真环境PRD/PROD Production 正式/生产环境...原创 2020-12-23 18:27:55 · 13444 阅读 · 0 评论 -
前端导出、下载、浏览打印excel、rar、word等文件的简单理解使用
window.location.href = (this.downloadExcelUrl + ‘?queryParams=’ + encodeURIComponent(JSON.stringify(params)))原创 2020-11-30 11:52:33 · 472 阅读 · 0 评论 -
前端跨域解决方案
JSONP跨域jsonp的原理就是利用script标签没有跨域限制,通过script标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。前端原生JS实现:<script> var script = document.createElement('script'); script.type = 'text/javascript'; /原创 2020-11-26 13:03:02 · 201 阅读 · 0 评论 -
package.json和package-lock.json的详细介绍和版本号介绍
package.json在 Node.js 中,模块是一个库或框架,也是一个 Node.js 项目。Node.js 项目遵循模块化的架构,当我们创建了一个 Node.js 项目,意味着创建了一个模块,这个模块的描述文件,被称为 package.json。package.json 属性说明:name - 包名;version - 包的版本号;description - 包的描述;homepage - 包的官网URL;author - 包的作者,它的值是你在 https://npmjs.org原创 2020-11-25 17:41:55 · 2233 阅读 · 0 评论 -
js中new到底做了什么?如何仿写new所做的事情?
https://blog.youkuaiyun.com/lyt_angularjs/article/details/86623988原创 2020-11-11 00:01:20 · 127 阅读 · 0 评论 -
函数内arguments的使用及解构赋值
arguments是一个对应于传递给函数的参数的类数组对象。function func1(a, b, c) { console.log(arguments) // Object { 0: 1, 1: 2, 2: 3 } console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); /原创 2020-11-10 00:24:47 · 853 阅读 · 0 评论 -
前端工具方法
获取随机字符串值randomString(len) { len = len || 32; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxLen = $chars.length; var str = ''; for (var i = 0; i < len; i++) {原创 2020-09-01 19:32:51 · 123 阅读 · 0 评论 -
findIndex和find的使用
findIndexarray.findIndex(function(currentValue, index, arr), thisValue)参数:一个函数和对象thiscurrentValue 必需。当前元素index 可选。当前元素的索引arr 可选。当前元素所属的数组对象案例使用获取数组中年龄大于等于 18 的第一个元素索引位置var ages = [3, 10, 18, 20];第一种方式 const index=ages.findIndex((item)=>{ re原创 2020-08-19 14:18:53 · 1040 阅读 · 0 评论 -
substr()和substring()的简单使用
substr()substr()方法可在字符串中抽取从start下标开始的指定数目的字符注意:返回值一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。语法:stringObject.substr(start,length)使用:var str = "abdcdsnfe";var str1 = str.sub原创 2020-06-18 11:18:40 · 857 阅读 · 0 评论 -
闭包函数的特征和柯里化描述
闭包函数的特征是外函数套着里函数2. 外函数创建局部变量3. 里函数能使用外函数的局部变量4. 里函数最后能被调用到// 什么是柯里化 柯里化===>函数的多参,变成单参 // fn(2,3,4)===>fn(2)(3)(4) function fn(a,b,c){ return a*b*c } // 也是典型的闭包函数 function fn(a) { console.log(a); return fu原创 2020-06-16 16:38:53 · 125 阅读 · 0 评论 -
函数防抖和函数节流的简单介绍
函数防抖主要使用场景是输入框输入后才发送请求// 未封装写法 var t = null; window.onscroll = function () { clearTimeout(t); t = setTimeout(function () { console.log("调用一次"); }, 500); };// 封装写法好处,既可以定义时间,也可以避免t变量的全局污染 function debounce(callba原创 2020-06-16 12:36:05 · 226 阅读 · 0 评论 -
数组对象去重(过滤)和获取数组(过滤)重复值多种方法
// 数组去重let arr = [1, 1, 1, 2, 3, 4, 5, 5, 6];let crr = [];const res = arr.reduce((brr, va) => { if (!brr.includes(va)) { brr.push(va); } else { crr.push(va); } return brr;}, []);console.log(res);console.log(crr);原创 2020-06-01 16:57:53 · 1201 阅读 · 0 评论 -
使数组进行排序的方法sort(),reverse()和冒泡排序
sort()sort() 方法用于对数组的元素进行排序。arrayObject.sort(sortby)sortby可选。规定排序顺序。必须是函数。var arr = new Array(6);arr[0] = "10";arr[1] = "5";arr[2] = "40";arr[3] = "25";arr[4] = "1000";arr[5] = "1";console.log(arr);console.log(arr.sort((a, b) => a - b));[ '原创 2020-05-31 17:00:35 · 454 阅读 · 0 评论 -
常见的错误类型介绍和可以自己制造异常修改异常的信息提示,并抛出异常
制造异常的代码,抛出异常后,排在异常后面的队列任务不会被执行了,只有捕捉到错误并处理了,后面的才会执行throw new Error("当前不符合条件,无法执行任务")抛出异常显示Uncaught Error: 当前不符合条件,无法执行任务例子<script> console.log(Date.now()); //获取时间戳 // 抛出错误:throw error function something() { if (Date.no原创 2020-05-27 10:50:03 · 377 阅读 · 0 评论 -
原生JS获取DOM元素的方法(很多种方法)
通过ID获取(getElementById)通过name属性(getElementsByName)通过标签名(getElementsByTagName)通过类名(getElementsByClassName)通过选择器获取一个元素(querySelector)通过选择器获取一组元素(querySelectorAll)获取html的方法(document.documentElement)document.documentElement是专门获取html这个标签的获取body的方法(docume原创 2020-05-26 09:41:28 · 4070 阅读 · 0 评论 -
冒泡排序算法(也就是升序或降序排序)
var array = [5, 4, 6, 7, 2, 1];var temp = 0;for (var i = 0; i < array.length; i++) { for (var j = 0; j < array.length - i; j++) { if (array[j] > array[j + 1]) { temp = array[j + 1]; array[j + 1] = array[j]; array[j] = tem原创 2020-05-25 16:07:13 · 703 阅读 · 0 评论 -
slice() splice()和call() apply() bind()的使用
slice()可提取数组中选定的元素,并以新的数组返回被提取的元素,不会改变原数组可提取字符串的某个部分,并以新的字符串返回被提取的部分。array.slice(start, end)或string.slice(start, end)注意:start是从0位置开始算起,提取的数组或字符串是包括start位置的元素但不包括end元素;end表达的是位置不是长度;start, end都没有填值,返回一个未提取的数组,只填start,就是提取start位置到最后。注意:如果start是负数,那么它从数组原创 2020-05-22 17:29:58 · 687 阅读 · 0 评论 -
常用方法pop() push() unshift() shift()和 splice() split() join() concat()
split()把一个字符串分割成字符串数组string.split(separator,limit)separator(可选)字符串或正则表达式,表示以该条件为分割线开始切割;limit(可选)表示切割后数组的最大长度。var str = "你好32好你好22好你好";console.log(str.split("你"));[ '', '好32好', '好22好', '好' ]console.log(str.split("你", 3));[ '', '好32好', '好22好' ]jo原创 2020-05-22 15:58:11 · 568 阅读 · 0 评论 -
js遍历的函数方法map(),filter(),some(), every(),reduce(),reduceRight(),forEach()和for-in、for-of和Object.keys
map()该方法返回一个新数组,传入两个参数一个callback(v,i,obj),一个thisValue(对象)注意: map() 不会对空数组进行检测。注意: map() 不会改变原始数组。 var numbers = [4, 9, 16, 25]; var username = { name: "小米", age: "18" } var arr = numbers.map(function (v, i, obj) { //v,数组中的每一项值原创 2020-05-19 15:39:02 · 257 阅读 · 0 评论 -
jq中的.on和.off和.one区别
.on激活事件.off阻止事件.one只执行一次事件原创 2020-05-11 17:53:03 · 533 阅读 · 0 评论 -
将伪数组转换为数组(原生和es6语法)
伪数组urldata方法一 :es6语法var newarr = Array.from(urldata) 方法二:原生语法使用数组的slice()方法 它返回的是数组,使用call或者apply指向伪数组 var newarr = Array.prototype.slice.call(urldata); 模拟一下它的内部实现 Array.prototype.slice=func...原创 2020-04-21 11:58:55 · 376 阅读 · 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</tit...原创 2020-06-16 14:34:15 · 195 阅读 · 0 评论 -
js获取文件的大小
input元素获取到的文件大小单位是byte(字节)1TB=1024GB1GB=1024兆(MB)1兆(MB)=1024KB1KB=1024字节(byte)1字节(byte)=8位(bit)原创 2020-05-23 19:41:57 · 4089 阅读 · 0 评论 -
为jQ添加原型方法
// 为$添加原型方法 $.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { ...原创 2020-03-23 15:34:13 · 422 阅读 · 0 评论