JavaScript
关注
分享
扫一扫
newbie (⊙o⊙)
这个作者很懒，什么都没留下…
展开
-
JavaScript对数据按时间排序
数据按时间排序原创 2022-07-07 13:43:54 · 543 阅读 · 1 评论 -
前端JavaScript使用jwt加密
今天接到了一个需要使用jwt加密数据的需求原创 2022-07-06 15:10:40 · 2179 阅读 · 0 评论 -
JavaScript将时间戳转为日期
JavaScript 时间戳转换为日期原创 2022-07-05 18:06:07 · 721 阅读 · 0 评论 -
关于开发中遇到的一些问题记录
display:none与visibility：hidden 的区别1.dispaly:none;会让元素完全从渲染树消失，渲染的时候不占据任何空间;visibility：hidden 不会让元素从渲染树消失，渲染的元素继续占据空间，只是内容不可见2.display:none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示visibility：hidden；是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible；可以让子孙原创 2022-03-07 11:38:03 · 382 阅读 · 0 评论 -
JavaScript HTML5 dom，图片拖拽上传功能
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ display: flex; width: 100%; justify-content: center; margin-top: 300px; align-items: center原创 2022-05-26 18:24:20 · 334 阅读 · 0 评论 -
JavaScript日常学习
javascript 的new 原理// Func 为构造函数，args表示传参function myNew(Func,...args){ // 在内存中创建一个新对象 const obj = {} if(Func.prototype){ // 把新对象的原型指向Func构造函数的原型 Object.setPrototypeOf(obj,Func.prototype) } // 改变this指向，并执行构造函数 const result = Func.apply(obj,args)原创 2022-05-26 09:33:37 · 220 阅读 · 0 评论 -
JavaScript将内容复制到剪切板
copyU() { let input = document.createElement('input') // 创建input对象 input.value = 'xxxxxxx' // 设置复制内容,可以动态赋值 document.body.appendChild(input) // 添加临时实例 input.select() // 选择实例内容 document.execCommand('copy') // 执行复制 docu...原创 2022-04-27 10:22:08 · 1613 阅读 · 1 评论 -
后端传递base64对象数据解析,解决中文乱码问题
// 解析base64 getStr(){ let encode = decodeURIComponent(atob(this.code).split('').map(function (c){ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')) //遍历每一个字符，（解决中文乱码问题） .split('').map(function (c){...原创 2022-04-26 17:36:02 · 586 阅读 · 0 评论 -
swiper 插件小圆点选中时样式穿透
/swiper 小圆点选中时样式穿透/.swiper-pagination >>> .swiper-pagination-bullet-active{background-color:#F86B7C}原创 2022-04-21 17:39:09 · 308 阅读 · 0 评论 -
script标记
标题script加标记当浏览器解析至script标签时，浏览器的主线程就会等待script，或者运行script，然后继续开始构建，在以前，如果你把script标签放到了文档的最上面，那么在等待下载和运行的这段时间内页面就会处于白屏和无法操作的状态，并且不是并行的下载，浏览器会逐个下载并运行，这是一个相当糟糕的体验。所以都会选择将script放在文档底部，尽可能推后脚本的执行时机，不过并不完全可控。时至今日，我们可以给script标签增加标记，使其异步(延迟)运行，把可控权交给开发者。标题async标原创 2022-04-06 16:21:53 · 512 阅读 · 2 评论 -
vue3 Teleport基础用法
Teleportmodal.vue<template> <div class="hello"> <button @click="modal=true">弹出窗口</button> <teleport to="body"> //传送的就是modal 这个div块 <div v-if="modal" class="modal"> <div> 这里是模态框原创 2021-05-04 17:38:58 · 438 阅读 · 0 评论 -
常用正则表达式
// （1）匹配日期，如 yyyy-mm-dd 格式var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;// （2）匹配 qq 号var regex = /^[1-9][0-9]{4,10}$/g;// （3）手机号码正则var regex = /^1[34578]\d{9}$/g;// （4）用户名正则var regex = /^[a-zA-Z$][a-zA-Z0-9_$]{4,16}$/;...原创 2022-02-22 16:11:39 · 222 阅读 · 0 评论 -
JavaScript的数据类型
> JavaScript一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，> 还有在 ES6 中新增的 Symbol 类型，代表创建后独一无二且不可变的数据类型，> 它的出现我????认为主要是为了解决可能出现的全局变量冲突的问题引用数据类型（对象、数组和函数）两种类型的区别是：存储位置不同。原始(基本)数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。引原创 2022-02-22 15:45:34 · 89 阅读 · 0 评论 -
Android和ios时间兼容性写法(js)
function timerCal(time){ let oTime = time let postTime = new Date(time.replace(/-/g,'/')) let curTime = new Date() let timeDiff = curTime.getTime() - postTime.getTime() let min = 60 * 1000; let hour = min * 60; let day = hour *原创 2021-12-21 16:02:21 · 1322 阅读 · 0 评论 -
AES 加密解密
// var CryptoJS = require("crypto-js");import CryptoJS from 'crypto-js' // npm安装//解密方法// function Decrypt(word) {// let key = CryptoJS.enc.Utf8.parse("3W4D2aZ6YyEf0Cx5FR<1A{lSLP8oBMvu");// let decrypt = CryptoJS.AES.decrypt(word, key, {//原创 2021-12-21 16:00:12 · 341 阅读 · 0 评论 -
JavaScript闭包
作用域链就是一层一层往上找，直到找到全局作用域还没有，就宣布放弃，这一层一层的关系就叫作用域链。 闭包会导致作用域链问题,“函数套函数，内层函数对外层函数变量的引用”。 let name = 'ao' let obj = { name:'bo', method:function(){ // let _this = this 将this指向当前对象 return function(){ return this.name } } .原创 2021-10-26 17:41:16 · 117 阅读 · 0 评论 -
JavaScript的函数重载
function sum(a,b) { return a + b}function sum(a,b,c){ return a + b + c}// js是弱类型语言，下面的sum函数会覆盖上面的sum函数// 使用累加器来实现这个加法函数的函数重载，不管传入几个参数都可以行function sum(){ let arr = Array.prototype.slice.call(arguments) return arr.reduce(function(a,b){原创 2021-10-26 14:09:05 · 267 阅读 · 0 评论 -
判断一个真实存在的对象是否为空对象
let obj = {}function isEmpty(obj ) {// 遍历自身，看自身是否存在属性，不包括继承的 for(let key in obj ) { if(obj.hasOwnProperty(key)){ // 如果存在属性说明不是空对象 return false } } // 如果遍历完都没有存在于自身的属性，说明是个空对象 return true}...原创 2021-10-22 11:01:36 · 132 阅读 · 0 评论 -
数组join法
原创 2021-10-11 17:37:35 · 133 阅读 · 0 评论 -
大量数据，无缝渲染
// 渲染大数据，合理使用createDocumentFragment和requestAnimationFrame将操作分为一小段一小段执行 setTimeout(()=>{ // 比如插入10万条数据 const total = 100000 // 一次插入多少条的数据 const once = 20 // 插入数据需要的次数 const loopCount = Math.ceil(total / once) // 记录已渲染的次数原创 2021-09-18 14:41:29 · 94 阅读 · 0 评论 -
图标懒加载
// 图片懒加载 function lazyLoad() { const imgs = document.getElementsByTagName('img') const len = imgs.length // 可视窗口高度 // console.log(imgs,'imgs[i].dataset') const viewHieght = document.documentElement.clientHeight // 滚动条高度 const原创 2021-09-18 13:54:17 · 166 阅读 · 0 评论 -
vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法
一：通过ref直接调用子组件的方法；子组件child.vue：<template> <div>我是子组件</div></template><script>export default { methods: { childFun() { console.log('我是子组件的方法'); }, },};</script>父组件：<template> <di原创 2021-06-02 18:51:06 · 6628 阅读 · 0 评论 -
JavaScript封装优先级队列
// 优先级队列 function PriortyQueue(){ // element 数据项 // priorty 优先级别 function QueueElement(element,priorty){ // 保存数据，及保存优先级 this.element = element this.priorty = priorty } // 封装属性 this.items = [] PriortyQueue.prototype.enqueu原创 2021-09-08 16:14:33 · 128 阅读 · 0 评论 -
遇到的一些问题的记录
数据过滤空值时常会使用array.filter,但其默认会把0、false这样具体的值过滤掉原创 2021-09-06 18:20:10 · 98 阅读 · 0 评论 -
vue3.0中vue-router路由的创建及使用
下载vue-router,一定要注意版本！npm install vue-router@/next --savesrc目录下创建router文件夹，router文件夹下创建index.jsvue3.0下需要引入createRouter, createWebHistory 模块去创建路由createWebHistory 使用history模式import { createRouter, createWebHistory } from 'vue-router'import Home fr..原创 2021-09-02 09:59:50 · 5401 阅读 · 0 评论 -
JavaScript数组方法整理
// 数组操作 // 创建数组 let fruits = new Array() fruits[0] = 'Apple' let fruits2 = ['Apple', 'Banana'] let fruits3 = new Array('Apple', 'Banana') //concat() 连接两个或多个数组,此方法不会更改原有数组，会返回一个连接后的新数组 //参数 数组或值 let fruit1 = ['Apple']原创 2021-08-31 16:23:50 · 184 阅读 · 0 评论 -
JavaScript使用url字符串拼接传递参数，截取参数
// url 为 ：https://nact.sxyj.net/moo_gameJumpShare?score=118&name=%E6%89%A7%E8%BF%B7%E4%B8%8D%E6%82%9F&SN=7&photo=&Desc=%E8%B7%B3%E8%B7%83%E9%AB%98%E6%89%8B getData(){ // location中的search 就是传递过来的参数，首先先把最前的问号去掉 // 再以参数传递的分割符分割字符串就得到了 ‘k原创 2021-08-31 16:21:41 · 1423 阅读 · 0 评论 -
JavaScript字符串常用操作
// 字符串操作 // 数字转字符串 let a = 123 a = String(a) //得到 a = '123' let b = 456 b.toString() // 得到b = '456' // chartAt(x)从字符串中获取单个字符，参数为number类型及，返回字符串中x位置的字符 let c = 'over' let d = c.charAt(1) //得到d = 'v'，chartAt()默认截取下标为0原创 2021-08-27 11:36:51 · 124 阅读 · 0 评论 -
js截取url参数
// 截取url参数 getRequest(parName){ var str=parName.toLowerCase()+"="; var gvalue=""; var HREF=location.href; var upperHREF=location.href.toLowerCase(); if(upperHREF.indexOf(str)>0) { gvalue=HREF.substring(u.原创 2021-08-23 09:21:48 · 1495 阅读 · 0 评论 -
手写promise 草稿
const pending = 'PENDING' const resolved = 'RESOLVED' const rejected = 'REJECTED' const resolvePromise = (promis2,x,resolve,reject)=>{ // 判断x的值是不是和promise 是不是同一个,如果是同一个就是自己等待自己,自己不会成功也不会失败 if(promis2 === x) { return reject(n...原创 2021-08-19 16:47:46 · 96 阅读 · 0 评论 -
避免 v-for 和 v-if 同时使用
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li></ul>`` 可以看到，这里是先遍历（v-for），再判断（v-if），这里有个问题就是：如果你有一万条数据，其中只 有 100 条是isActive状态的，你只希望显示这 100 条，但是实际在渲染时，每一次渲染，这一万条数据 都会被遍历一遍。比如你原创 2021-07-06 10:09:32 · 235 阅读 · 0 评论 -
获得浏览器视口尺寸
function getViewOffset(){ if(window.innerWidth){ return { w:window.innerwidth, h:window.innerHeight } } else { // ie8 以下 if(document.compatMode === "BackCompat"){ //怪异模式 return { w: document.body.clientWidth, h: document.body.原创 2021-07-05 09:54:38 · 123 阅读 · 0 评论 -
获取滚动条的滚动距离
function getSCrollOffset() { if(window.pageXOffset){ return { x: window.pageXOffset, y:window.pageYOffset } } else { rentun { x:document.body.scrollLeft + document.documentElement.scrollLeft, y:document.bod.scrollTop + document.document原创 2021-07-05 09:46:55 · 1560 阅读 · 0 评论 -
JavaScript中map()方法和forEach()方法的区别
JS中Map和ForEach的区别forEach:针对每一个元素，并为每一个元素提供执行的函数。map()方法：创建一个新数组，其中每一个元素由调用数组中的每一个元素 执行map提供的函数得来。区别： forEach() 方法不会返回执行结果。也就是说 forEach()方法会修改原来的数组，但是没有返回值。 而map()方法得到一个新的数组，这个新数组是map 方法修改数组后返回回来的新的数组。//注意，forEach是不会返回有意义的值的。//我们在回调函数中直接修改arr的值。let原创 2021-05-27 17:04:19 · 4069 阅读 · 1 评论 -
websocket了解
标题websocket使用场景：聊天 在线咨询 即时通讯等领域喜欢使用实现原理有两种： 1： ajax轮询：使用定时器每隔一定时间发送ajax发送到后台，实时获取数据。（性能不好）2.websocket（常用）有一个好用的封装的***socket.io***一般在公司都是买一个，只需引入它的js即可new websocketonopen 建立连接onmessage 监听消息什么是websocketwebsocket是应用层上的一个应用协议，websocket的最大特点就是，服务器可以主原创 2021-04-21 15:29:00 · 442 阅读 · 0 评论 -
vue的那些事儿
computed与watch的区别计算属性computed和监听器watch都可以观察属性的变化从而做出响应不同的是：计算属性computed更多是作为缓存功能的观察者，它可以将一个或者多个data的属性进行复杂的计算生成一个新的值，提供给渲染函数使用，当依赖的属性变化时，computed不会立即重新计算生成新的值，而是先标记为脏数据，当下次computed被获取时候，才会进行重新计算并返回。而监听器watch并不具备缓存性，监听器watch提供一个监听函数，当监听的属性发生变化时，会立即执行该函数。原创 2021-04-19 11:18:45 · 158 阅读 · 0 评论 -
vue hash与history的区别
原创 2021-04-16 17:09:45 · 215 阅读 · 0 评论 -
JavaScript（learn）
@click=“confirm”@confirm=“confirm()”的区别@confirm=“confirm” 会有默认传参，没有event事件@confirm=“confirm()” 加了() 就会导致默认的参数传递不过去，在某些组件例如uView ，和ant desgin of vue 的那个组件库有默认的参数使用@click=“confirm()”会有默认的event事件函数声明与函数表达式 解析器会率先读取函数声明，并使其在执行任何代码前可用（可以访问);至于函数 表达式则必须等到解原创 2021-04-16 16:25:16 · 913 阅读 · 0 评论 -
HTTP缓存机制：强缓存、协商缓存（learn）
HTTP缓存机制HTTP的缓存机制分为两种，一种是强缓存一种是协商缓存。主要作用是加快资源的获取速度，提升用户体验，减少网络传输，缓解服务器端的压力。强缓存：不需要发送请求到服务器端，直接读取浏览器本地资源。在Chrome的network中显示的HTTP状态码是200，在Chrome中，强缓存又分为Disk Cache（存放在硬盘中）和Memory Cache （存放在内存中），存放的位置是浏览器控制的。是否强缓存由Expriess 、Cache-Control和pragma 3个header属性原创 2021-04-08 09:51:57 · 503 阅读 · 0 评论 -
CORS同源策略解决办法（node-learn）
<!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"> <title>Do原创 2021-04-01 14:44:09 · 232 阅读 · 0 评论