js
qingzhen568
这个作者很懒,什么都没留下…
展开
-
js实现数组随机排序(shuffle)
js实现数组随机排序(shuffle)原创 2023-03-23 11:51:42 · 459 阅读 · 0 评论 -
vue3 + swiper 实现卡片效果切换
vue3 + swiper@9.0.5 实现卡片效果切换。原创 2023-02-21 15:56:02 · 2299 阅读 · 0 评论 -
Howler.js音频播放终极解决方案(可自动播放)
可以设置成自动声音播放。原创 2022-12-18 15:02:28 · 1895 阅读 · 1 评论 -
根据图片链接,获取图片宽高
根据图片链接获取图片宽高原创 2022-11-28 18:51:14 · 268 阅读 · 0 评论 -
JS复制文本内容到剪切板,防止IOS抖动
JS复制文本内容到剪切板,防止IOS抖动和无法复制全部内容原创 2022-04-20 11:24:57 · 555 阅读 · 0 评论 -
Vue3.0 循环列表超出2行显示... 点击展开按钮查看全部(展开收起)
效果图:要点是:将需要文本内容溢出显示省略号的模块组件话,然后在页面渲染后进行计算父组件:<template> <div class="list"> ... // 文本处理组件化 <ellipsis-Text :group_item="item" /> </div></template>子组件:<template> <div class="bottom"> <div原创 2022-03-26 15:36:13 · 3572 阅读 · 4 评论 -
实现html移动端自适应
1.在头部修改viewport,如下:<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">2.在header中新增以下代码,实现html的自适应<script> (function(doc, win) { var doc原创 2022-03-03 09:06:05 · 3495 阅读 · 0 评论 -
js判断数组中多个时间段是否有重叠(时分)
使用let dateArr = [ {start_time: '20:00', end_time: '21:00'}, {start_time: '20:00', end_time: '22:30'}, {start_time: '13:30', end_time: '14:30'}, {start_time: '20:00', end_time: '21:00'} ] // judgeTimeList(time_list) 返回true,表示没有重叠;false表示有重叠原创 2022-02-23 15:02:57 · 2987 阅读 · 4 评论 -
移动端项目中使用vConsole进行调试
1.安装npm i -s vconsole2.在主入口文件main.js中添加以下代码if (process.env.NODE_ENV !== "production" || /vConsole/.test(location.href)) { const VConsole = require('vconsole'); const vConsole = new VConsole(); localStorage.setItem('vConsole_switch_x', 80) local原创 2022-01-25 15:01:32 · 1088 阅读 · 0 评论 -
H5在header添加以下代码实现自适应
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;...原创 2021-12-25 20:20:52 · 506 阅读 · 0 评论 -
require.context动态引入文件
/** * 目录结构 * store * |--modules * |--app.js * |--user.js * |--getters.js * |--index.js*/index.js文件:import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// 规则:https://webpack.js.org/guides/原创 2021-12-14 11:32:35 · 1032 阅读 · 0 评论 -
防抖(debounce)、节流(throttle)及使用场景
防抖:在事件被触发的n秒后再执行回调,如果在这n秒内又被触发,则重新计时,核心在于清零,最后一次有效。使用场景: 窗口resize事件,搜索框输入联想节流:在单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数, 只有第一次有效,核心在于开关锁。使用场景:多次点击按钮,页面滚动事件。节流 throttleexport const throttle = (fn, delay) => { var timer = null return function () {原创 2021-11-16 16:26:10 · 832 阅读 · 0 评论 -
实战:从后台返回的数据中下载文件
/** * 从后台返回的数据中下载Excel表格 * @param {*} blob // 后台返回的文件流 * @param {*} fileName// 下载的文件名 */export const downloadFn = (blob, fileName) => { const url = URL.createObjectURL( new Blob([blob], { type: 'application/vnd.ms-excel' // 下载文件的MIME类型原创 2021-11-10 11:31:02 · 176 阅读 · 0 评论 -
实战:JS下载图片
/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回已编码的 base64数据 */const getImageBase64 = image => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const ctx = canvas.getC原创 2021-10-27 10:21:29 · 9823 阅读 · 0 评论 -
实战:JS批量打包下载图片--(zip压缩)
1.下载两个插件npm i -s jszip file-saver2.封装函数如下:// 在JS文件中引入这两个插件import JSZip from 'jszip'import FileSaver from 'file-saver'/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回base64编码 */const getImageBase64 = image => { const canvas原创 2021-10-27 10:16:25 · 4305 阅读 · 2 评论 -
常见的js技巧
校验图片链接是否有效;url序列化与反序列化;数组随机排序原创 2021-10-11 10:59:25 · 121 阅读 · 0 评论 -
怎样将网络图片转换为本地图片(URL.createObjectURL)
1.封装方法 // 将网络图片转换为本地图片,解决因跨域导致画布无法转换为图片问题 getImageInfo (path) { return new Promise((resolve, reject) => { axios .get(path, { responseType: 'blob' }) .then(res => { const blob = res.data c原创 2021-10-11 10:03:45 · 1887 阅读 · 0 评论