- 博客(61)
- 收藏
- 关注
原创 网络图片转base64
以上代码会将指定的网络图片转换为 Base64 编码,并通过 Promise 返回结果。你可以将要转换的图片 URL 替换为你自己的图片 URL,然后在 then 方法中获取到转换后的 Base64 数据进行后续处理。请确保你对获取的图片 URL 有权限访问。要在 JavaScript 中将网络图片转换为 Base64 编码,你可以使用 fetch API 来获取网络图片,并将其转换为 Blob 对象,然后使用 FileReader 来读取 Blob 对象并进行 Base64 编码转换。
2023-06-30 17:21:35 878
原创 JS点击复制文本
function copyfun(txt){ // 传复制的文本 var copyipt = document.createElement("input"); var text = txt; copyipt.setAttribute("value", text); document.body.appendChild(copyipt); copyipt.select(); document.execCommand("copy"); docume.
2022-05-19 11:28:14 263
原创 js获取路由参数
// 获取路由参数 getUrlOption(){ let str = location.search.substr(1).split("&"); let obj = {}; str.forEach(e => { let list = e.split("="); obj[list[0]] = list[1];
2022-04-27 10:00:55 4450
原创 判断是安卓还是IOS
//判断是安卓还是IOS function checkSystem() { var u = window.navigator.userAgent, app = window.navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)..
2022-04-06 10:42:02 350
原创 某个时间点的倒计时
// 剩余时间戳转换时分秒 // 秒杀时间 时 分 秒 datatime((new Date(new Date().toLocaleDateString()).getTime() + 14 * 60 * 60 * 1000).toString().slice(0, -3), Date.parse(new Date()).toString().slice(0, -3)) console.log((new Date(new Date().toLocaleDateStri..
2022-04-02 10:18:31 321
原创 手机浏览器页面如何调试,使用vconsole插件
手机浏览器页面如何调试,使用vconsole插件<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script> let vConsole = new VConsole();</script>
2022-03-14 10:42:06 791
原创 实现瀑布流
.waterfall { position: relative; } .waterfall .spread-item { width: 44%; padding: 0.2rem 0px; padding-left:4%; }function shop(){ $.ajax({ type: "POST", u...
2022-03-02 15:40:34 97
原创 实现滚动加载
滚动顶部+页面高度 >= 滚动高度$(window).scroll(function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; var clientHeight = document.docu
2022-03-02 15:05:35 300
原创 如何渲染几万条数据并不卡住页面
<!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>Doc
2022-02-24 15:27:27 158
原创 vuex 是什么?怎么使用?哪种功能场景使用它?
vuex 是什么?怎么使用?哪种功能场景使用它?是什么?只用来读取的状态集中放在store中;改变状态的方式是提交mutation,这是个同步的事物;异步逻辑应该封装在action中。怎么使用?在main.js引入store,注入。新建了一个目录store,然后…… export 。场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车state:vuex 使用单一状态树,即每个应用将仅仅包含一个store实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据
2022-02-23 14:12:25 426
原创 vue实现数据双向绑定的原理:Object.defineProperty()
vue实现数据双向绑定的原理:Object.defineProperty()vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通JavaScript对象传回给vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty() 将它们转为getter/setter。用户看不到 getter/s
2022-02-23 11:38:50 642
原创 并发模型与事件循环
JavaScript 有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。栈函数调用形成了一个由若干帧组成的栈。function foo(b) { let a = 10; return a + b + 11;}function bar(x) { let y = 3; return foo(x * y);}console.log(bar(7)); // 返回42当调用 bar 时,第一个帧被创建并压入栈中,帧中包含了bar 的参数和局本变量。
2022-02-21 15:41:59 122
原创 内存管理。
内存管理简介像C语言这样的底层语言一般都是有底层的内存管理接口,比如malloc() 和 free()。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。释放过程称为垃圾回收机制。这个“自动”是混乱的根源,并让JavaScript(和其他高级语言)开发者错误的感觉它们可以不关心内存管理内存生命周期不管什么程序语言,内存生命周期基本是一致的:1、分配你所需要的内存2、使用分配到内存(读、写)3、不需要时将其释放/归还所以语言第二部分都
2022-02-18 16:55:16 84
原创 使用Promise
使用PromisePromise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人不仅仅是使用创建的Promise实例对象,所以本教程将首先说明怎样使用Promise,再说明如何创建Promise。本质上Promise是一个函数返回的对象,我们可以在它上面绑定回调函数,这样我们就不需要在一开始把回调函数作为参数传入这个函数了。假设现在有一个名为createAudioFileAsync()的函数,它接收一些配置和两个回调函数,然后异步地生成音频文件。一个回调函数在文件成功创建时被调用,另
2022-02-17 12:17:41 362
原创 vue移动端适配解决方案
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中,通过不同屏幕的像素比来设置scale值,保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。当然,要达到完全适配,我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的r
2022-02-15 10:59:05 1734
原创 input输入框输入金额校验;判断字符串是否是金钱
<!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>Doc
2021-12-30 18:55:57 1428
原创 JS中Safari浏览器中的Date
在js中处理Date时,发现Safair和其他浏览器的支持方式不一致1、例如:2021-12-08 11:00:00在其他浏览器中,使用这个格式的字符串进行new Date操作没问题,但是在Safari中会提示Invalid Date;Safari中不支持‘-’格式的日期字符串,将其替换成‘/’变成2021/12/08 11:00:00即可正常使用2、例如:2021-12-08T11:00:00此格式的日期字符串在Safari中也是不得到支持的,需要将字符串中的‘T’替换成空格// 时间格式转时
2021-12-08 11:12:00 697
原创 多个并行秒杀倒计时
<!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>多个
2021-11-08 09:57:34 66
原创 操作存储、cookie
1、操作存储// 1、存储loalStorageconst loalStorageSet = (key,value) => { if(!key) return; if(typeof value !== 'string'){ value = JSON.stringify(value); } window.localStorage.setItem(key,value);}// 2、获取localStorageconst loalStorageGe
2021-11-08 09:56:26 562
原创 弹框组件库
<!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>Doc
2021-11-04 17:41:35 176
原创 jQuery插件开发
jQuery插件开发查看jQuery源码可以发现jQuery.fn = jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn 对象上定义的,然后jQuery对象就可以通过原型继承这些方法基础版jQuery插件$.fn.changeStyle = function(colorStr){ this.css("color",colorStr);}$("p").changeStyle("red");满足链式调用的
2021-11-03 11:45:37 461
原创 input框只允许输入正整数
input框只允许输入正整数<input type="text" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}"/>
2021-10-26 18:28:56 479 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人