![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
小曲曲
这个作者很懒,什么都没留下…
展开
-
智能面试——录音及播放下载js-audio-recorder — post请求,formdata传参
bug:本地调试调取不起来麦克风。原创 2024-04-09 10:14:21 · 425 阅读 · 0 评论 -
vue2+element-ui 实现OSS分片上传+取消上传
遇到问题:项目中需要上传500MB以上的视频。一开始使用上传组件el-upload,调用后台接口,但是出现了onprogress显示百分百后接口一直pending,过了很多秒后接口才通,如果遇到大文件的话,接口就会报超时。解决办法:使用阿里云OSS的分片上传。调用OSS时报No’Access-Control-Allow-Origin’的错误一定要设置跨域规则!!!否则会报No’Access-Control-Allow-Origin’的错误。原创 2024-04-03 17:37:46 · 481 阅读 · 0 评论 -
防考试作弊切屏
【代码】防考试作弊切屏。原创 2024-02-29 16:00:13 · 1013 阅读 · 0 评论 -
JavaScript前端面试
JS中的六大数据类型js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object)。typeof 操作符由于js中的变量是松散类型的,所以它提供了一种检测当前变量的数据类型的方法,也就是typeof关键字.typeof 123 //Numbertypeof 'abc' //S...原创 2019-09-09 18:30:58 · 1034 阅读 · 0 评论 -
微信小程序上传图片去重——MD5
点击上传图片,根据url生成图片唯一标识hexHash在上传接口给后台接口成功返回给前端存储提交图片时判断hexHash是否重复引入js文件var sMD5 = require('../../utils/spark-md5.js')上传<van-uploader use-before-read max-count="2" bind:before-read="beforeRead" preview-full-image="true" file-list="{{ fileList }原创 2023-05-06 17:10:58 · 897 阅读 · 0 评论 -
前端埋点分析
已经有很多成型的服务商了如友盟,百度统计等🌯,都提供了比较成型的方案🎨,并可以在后台管理系统中查看比较详细的数据分析页面浏览时长监控——路由拦截获取页面原创 2022-12-08 11:12:07 · 360 阅读 · 0 评论 -
官网滚动到元素位置,显示加载动画
https://img2020.cnblogs.com/blog/685541/202006/685541-20200619100701576-1786649008.gif原创 2022-12-08 11:01:35 · 917 阅读 · 0 评论 -
屏幕通用适配方案flexible.js
简介是一个终端设备适配的解决方案。根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的样式。下载使用修改flexible.js文件中原创 2022-05-24 13:47:18 · 397 阅读 · 0 评论 -
身份证解析年龄、性别、出生日期
/** * 传入身份证号码,获取出生日期、性别和年龄 * @param IdCard 身份证号码 */function IdCard (IdCard) { //获取出生日期 let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14) //获取性别 let sex = parseInt(IdCard.substr(16, 1)原创 2022-05-18 17:55:17 · 224 阅读 · 0 评论 -
顶部滚动固定及鼠标移入替换图片
顶部滚动固定监听页面滚动距离,控制js变量== 注意this的指向 ==使用js变量控制导航栏的显示隐藏(此处两个导航栏样式不一样)导航栏使用fixed固定定位会脱离文档流,使用sticky粘性布局不会脱离文档流如果导航栏需要占位就用粘性布局.sticky { position: sticky; /* 设置 position 为 sticky */ top: 0px; /* 设置 top、right、bottom、left 属性中的至少一个 */ z-index: 999;}原创 2022-04-01 11:18:05 · 193 阅读 · 0 评论 -
深拷贝与浅拷贝
基本概念数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。基本数据类型的特点:直接存储在栈(stack)中的数据引用数据类型的特点:真实的数据存放在堆内存里,在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同原创 2022-03-30 17:45:48 · 1056 阅读 · 0 评论 -
两个左右布局不确定高度的盒子如何保持高度一致 —— table布局
父盒子 table布局且左右间距20px display:table;border-spacing: 20px 0;子盒子 display: table-cell原创 2022-03-24 14:39:48 · 854 阅读 · 0 评论 -
切换主题——控制类名的显示隐藏
使用Switch标签切换主题 <el-switch v-model="theme" /> watch: { theme() { toggleClass(document.body, 'custom-theme') } }公共方法/** * 判断某标签上如果有某个类名,就去掉;如果没有就添加 * @param {HTMLElement} element 标签 * @param {string} className 类名 */export fun原创 2022-01-28 10:04:49 · 1102 阅读 · 0 评论 -
数组循环方法以及数组去重总结
ES6新增的循环方法,没有索引,它可以正确响应break、continue和return语句,for-in循环虽然可以循环数组,但是会有好多坑,它主要用于循环对象。没有返回值,对原数组没有影响,不支持IE,break无法跳出循环,retrun只能跳出当前循环,无法终止循环。只要有一项符合条件,就跳出循环,返回第一个符合条件的元素,否则返回undefined。只要有一项符合条件,就跳出循环,返回true,否则返回false。返回新数组,不会改变原数组,新数组由符合条件的数组组成。...原创 2022-01-27 14:53:12 · 2294 阅读 · 0 评论 -
reduce详解
基本语法([]代表可有可没有)reduce(callback(accumulator, currentValue[, index, array])[,initialValue])reduce 接受两个参数,回调函数和初识值,初始值是可选的。回调函数接受4个参数:积累值、当前值、当前下标、当前数组。如果有初始值,那么积累值一开始是初始值;如果没有初始值,那么积累值一开始是数组中第一个元素。然后在每一次迭代时,返回的值作为下一次迭代的 accumulator 积累值。使用案例求和和乘法原创 2021-11-25 15:37:06 · 2169 阅读 · 0 评论 -
单点登录三种实现方式
前言在 B/S 系统中,登录功能通常都是基于 Cookie 来实现的。当用户登录成功后,一般会将登录状态记录到 Session 中,或者是给用户签发一个 Token,无论哪一种方式,都需要在客户端保存一些信息(Session ID 或 Token ),并要求客户端在之后的每次请求中携带它们。在这样的场景下,使用 Cookie 无疑是最方便的,因此我们一般都会将 Session 的 ID 或 Token 保存到 Cookie 中,当服务端收到请求后,通过验证 Cookie 中的信息来判断用户是否登录 。原创 2021-11-19 18:18:34 · 4309 阅读 · 0 评论 -
js页面滚动到底部
window.scrollTo(0, document.documentElement.clientHeight)原创 2021-11-18 09:13:44 · 3256 阅读 · 0 评论 -
js复制粘贴
html <span> 支付宝账号: <textarea id="code">15879521147</textarea> </span> <span @click="copy">复制</span>js copy() { var code = document.getEl...原创 2019-04-23 19:02:30 · 192 阅读 · 0 评论 -
vue中Excel的下载和上传
html<div class="mt-40"> <div class="mtb-20">第一步:下载模板,批量填写订单信息</div> <a-button type="primary" ghost icon="vertical-align-bottom" size="large"> <a href="/订单导入模板(企业).xlsx" download="订单导入模板.xl..原创 2021-11-04 17:18:13 · 450 阅读 · 0 评论 -
Object的方法Object.freeze()和Object.assign()
Object.assign( this , {data中同名变量}) 给data变量赋值原理:this是一个对象,包含data中变量和方法等一切可以this.调用的属性对象合并时,相同的键名后面对象会覆盖前对象Object.freeze() 冻结一个对象跟const常量一样,只不过,const声明简单类型的值不能修改,对象却是可以修改的,所以,如果你想禁止一个对象的修改就可以用Object.freeze()浅冻结:对象的属性若是对象,是可以修改属性的属性的深冻结function deep原创 2021-05-17 09:56:48 · 196 阅读 · 0 评论 -
小程序中以及vue中mock使用——mockjs
微信开发工具mock的使用当接口调不通或者没数据时候,可以造假数据,页面就可以正常写逻辑vuenpm install mockjs// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }]}原创 2021-04-11 20:57:10 · 1280 阅读 · 1 评论 -
express实现mock数据
启动服务端根目录下新建mock文件夹login.json{ "code": 0, "message": "登录成功", "data": { "name": "张三", "token": "ququ" }}index.jsnpm i express --saveconst express = require('express')const app = express()//接口数据const login = req原创 2021-04-11 20:55:10 · 348 阅读 · 0 评论 -
短路原理JavaScript中“&&”和“||”操作符
||1、只要“||”前面为false,结果取决于后边,返回“||”后面的值。2、只要“||”前面为true,结果就是true,返回“||”前面的值。&&1、只要“&&”前面是false,结果是false,返回“&&”前面的值;2、只要“&&”前面是true,结果取决于后边,返回“&&”后面的值;!!!!的作用是把一个其他类型的变量转成的bool类型...原创 2021-04-09 18:12:24 · 100 阅读 · 0 评论 -
收藏小技巧
替换富文本中图片宽度100%.replace(/\<img/gi, '< img style="width:100%;height:auto"');vue 动态样式:style=" 'background-image: url('+(item.close - item.open < 0 ?kimg1[i]:kimg[i]) +');' " //computedkimg(){return [require("../../assets/img/1.png"),require(原创 2021-02-23 13:59:15 · 194 阅读 · 0 评论 -
全国城市数据
{"name": "阿坝藏族羌族自治州",},{"name": "阿克苏市",},{"name": "阿拉尔市",},{"name": "阿拉善盟",},{"name": "阿勒泰市",},{"name": "阿里地区",},{"name": "阿图什市",},{"name": "安康市",},{"name": "安庆市",},{"name": "安顺市",},{"name": "安阳市",},{"name": "鞍山市",},{"name": "巴彦淖尔市",},{"name"原创 2020-12-07 14:45:56 · 304 阅读 · 0 评论 -
倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .原创 2020-11-23 14:06:01 · 111 阅读 · 0 评论 -
uniapp原生canvas绘制商品分享海报
<template> <view class="login"> <u-navbar title="canvas" :is-back="false" title-color="#333"></u-navbar> <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas.原创 2020-10-27 16:14:41 · 761 阅读 · 0 评论 -
uniapp定位和选择城市
//页面<template> <u-index-list :scrollTop="scrollTop" :index-list="indexList"> <view v-for="(item, index) in list" :key="index"> <u-index-anchor :index="item.letter" /> <view class="list-cell u-border-bottom" v-for="(ite.原创 2020-10-12 10:34:46 · 9160 阅读 · 7 评论 -
uniapp和vue连接socket
app.vue全局获取数据并存储在vuex<script> // 解压数据 import pako from './hybrid/html/pako.js'; export default { onLaunch: function() { uni.removeStorageSync('showUp') uni.removeStorageSync('rate') uni.removeStorageSync('coin') uni.removeStorageSyn原创 2020-10-08 14:14:03 · 2616 阅读 · 0 评论 -
vue兄弟组件间传值
问题解决方法:兄弟组件传值,重新改变tab值新建bus.js文件import Vue from "vue";export default new Vue();foot组件,点击事件import Bus from '../../common/js/bus.js'goagreement(i) { if (this.$route.path.includes("agreement")) { Bus.$emit("type", i); //当前页面,为兄弟组件原创 2020-10-07 18:38:13 · 619 阅读 · 2 评论 -
H5微信支付
微信授权获取code,给后台获取支付参数 mounted() { if (location.href.includes("code")) { var url = location.href; console.log( 3333333, url .split("?")[1] .split("&")[0] .split("=")[1] ); this.wx原创 2020-09-29 14:25:07 · 367 阅读 · 0 评论 -
jQuery实现tab切换
<body> <div id="wrap"> <div id="tit"> <span class="select">标题1</span> <span>标题2</span>原创 2019-03-01 10:50:21 · 131 阅读 · 0 评论 -
取消接口请求abort()
使用场景bug: tab切换,当点击tab2时,由于接口反应比较慢,在数据返回之前切换tab,会造成tab2的数据会拼接在切换后的tab列表下面解决方法:在tab切换时,取消未完成的接口请求 getList() { this.status == 'loading' // 用一个变量接受请求 this.req = uni.request({ url: baseUrl + '/api/userOrder', data: { page: thi原创 2020-09-11 15:32:11 · 2022 阅读 · 0 评论 -
原生js实现上拉加载
地址列表组件没有无法使用上拉加载,所以原生js实现给列表部分注册touchmove事件,监听用户滑动屏幕判断滚动条的位置距离底部高度为100时,page+1,并且拉去接口当接口调取过程中或者已经没有新的收据的时候,阻止page+和掉接口方案:loading和finished初始值为false,当开始掉接口时loading为true,接口成功为false;接口返回数据为空finish为true==》当loading或finish为true时,return网页正文全文高:document.b.原创 2020-07-24 16:09:52 · 1171 阅读 · 0 评论 -
首页弹屏
已知活动结束时间和每天次数// 首页弹屏 show_actpop() { let { activity_paly: { activity_paly_num, end_time }, } = this.data let now = new Date().getTime() / 1000 let maxTime = wx.getStorageSync('indexpop').maxTime || '' // 24小时周期结束时间原创 2020-07-21 12:00:40 · 143 阅读 · 0 评论 -
小程序活动倒计时及时间格式化
距离开始大于1天,显示开始时间,未开始(一天内)和 进行中展示倒计时 <view class="state-time"> //state 0 距离开始大于1天 1 未开始(一天内) 2 进行中 3 已结束 <block wx:if="{{state==1||state==2}}"> <image class="state" src="/images/new-state{{state}}.png"/> <!--.原创 2020-06-04 15:54:06 · 749 阅读 · 0 评论 -
代理邀请海报:图片url转base64格式
//common.js/** * @description: 图片转base64 * @param {String} url 需要转换的图片原链接(http://....jpg) * @param {String} outputFormat 转换出来的图片的类型(canvas支持jpg/png格式) * @return: 返回图片对应的base64编码 */export const getBas64 = (url, outputFormat = "image/jpg") => { r原创 2020-05-15 18:01:54 · 232 阅读 · 0 评论 -
ES6语法ECMA总结
定义变量let 相当于varconst 定义常量区别块级作用域 {}内 if(){} for(){}没有预解析,不存在变量提升,必须先定义再使用,否则报错在同一个作用域中,变量不能重复定义,但是可以重新赋值const定义变量不能修改,所以必须定义就赋值解构赋值数组左右结构一致 let [a,b,c]=[2,4,6] let [a, [b, c]]...原创 2019-04-03 22:49:40 · 126 阅读 · 0 评论 -
生成随机数——UUID
获取两个数之间的随机数Math.random() *(max - min)+ min从既定数组中随机选取 const area = [ '北京', '上海', '天津', '重庆', '河北', '山西', '吉林', '辽宁', '黑龙江', '陕西', '...原创 2020-04-29 17:23:38 · 1557 阅读 · 0 评论 -
原生js小结
切换类名let vconDom = document.getElementById("__vconsole");vconDom.classList.toggle("show");原创 2019-12-09 12:05:49 · 99 阅读 · 0 评论