JS Code block 代码块–Storage (localStorage, sessionStorage)
星期二, 2023-04-18 | Author: Lee | computer, 前端 | 没有评论 961 views
Storage (localStorage, sessionStorage)
设置localStorage
获取localStorage
移除localStorage
移除所有localStorage
设置sessionStorage
获取sessionStorage
移除sessionStorage
移除所有sessionStorage
› 继续阅读
JS Code block 代码块–cookie
星期二, 2023-04-18 | Author: Lee | computer, 前端 | 没有评论 1,024 views
cookie
获取cookie 里的值
设置cookie
删除cookie
/** * 获取cookie 里的值 * @param {String} key */ export const getCookie = (key) => { const arr = document.cookie.match(new RegExp(`(^| )${key}=([^;]*)(;|$)`)); if (arr != null) return unescape(arr[2]); return null; } /** * 设置cookie * @param name * @param value * @param day expires的时间 */ function setCookie (name, value, day) { let setting = arguments[0]; if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){ for (let i in setting) { let oDate = new Date(); oDate.setDate(oDate.getDate() + day); document.cookie = i + '=' + setting[i] + ';expires=' + oDate; } }else{ let oDate = new Date(); oDate.setDate(oDate.getDate() + day); document.cookie = name + '=' + value + ';expires=' + oDate; } } /** * 删除cookie */ function removeCookie (name) { setCookie(name, 1, -1); } |
JS Code block 代码块–动态数字插件 scrollNum
星期二, 2023-04-18 | Author: Lee | computer, 前端 | 没有评论 1,039 views
动态数字插件 scrollNum
插件介绍
动态数字插件可以实现在一个dom容器内播放数字动画,数字动画分为两种,一种是区间变化,动画效果类似于数值从一个起始数值不断更新显示至终止值;还用一种是区间滚动,动画效果类似于老虎机。
区间滚动
区间变化
插件js地址
//lib.eqh5.com/@eqxiu/eqxH5DyNum/1.0.0/EqxH5DyNum.js
//lib.eqh5.com/@eqxiu/eqxH5DyNum/1.0.0/EqxH5DyNum.min.js
建议将js文件放入项目本地使用
插件使用方法
引入动态数字插件的js文件后,new EqxH5DyNum后创建一个实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | const dy = new EqxH5DyNum({ startNum: 0, endNum: 100, animDuration: 2, isShowThousandSeparator: false, endOrder: 'left', isEndRandom: false, $ele: $('.container') }); // 播放区间变化动画 dy.numChange().then(() => { // 区间变化动画播放完执行 }) // 播放区间滚动动画 dy.numScroll().then(() => { // 区间滚动动画播放完执行 }) // 更新部分或全部实例参数,并播放区间变化动画 dy.update({ startNum: 100, endNum: 0, animDuration: 5, }).numChange() |
JS Code block 代码块–颜色
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 1,229 views
颜色
匹配rgba的正则
匹配透明度为0的rgba正则
hex转换为RGBA
rgb转Hex
获得随机的颜色值
是否为有效的16进制颜色
› 继续阅读
JS Code block 代码块–Math
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 1,273 views
Math
计算两点的距离
组合C
求最大公约数
是否可以整除
最小公倍数
斐波那契数组生成器
› 继续阅读
JS Code block 代码块–Function 函数
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 856 views
Function 函数
提供一些常用的函数功能
防抖
节流
等待
格式化银行卡
对css属性针对不同浏览器加私有前缀
› 继续阅读
JS Code block 代码块–css 代码块
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 533 views
css 代码块
提供一些前端常用的css代码块
垂直居中对齐
全屏显示
不同a标签链接使用不同样式
图像灰度
背景渐变动画
长文本自动换行
模糊文本
用CSS动画实现省略号动画
样式重置
清除浮动
css元素透明
CSS引用样式
个性圆角
通用媒体查询
自定义文本选择
图片边框偏光
锚链接伪类
全屏背景图
内容垂直居中
强制出现垂直滚动条
CSS3渐变模板
@font-face引用
连接CSS3元素
CSS斑马线
css&符号
内盒阴影
外盒阴影
三角形列表项目符号
固定宽度的居中布局
CSS3列文本
CSS固定页脚
设置浏览器最小高度
CSS3输入效果
强制换行
在可点击的项目上强制手型
网页顶部盒阴影
CSS3对话气泡
持久的列表排序
CSS悬浮提示文本
深灰色的圆形按钮
显示a链接得URLs
禁用移动Webkit的选择高亮
CSS3 圆点图案
CSS3 方格图案
CSS font属性缩写
论文页面的卷曲效果
鲜艳的锚链接
带CSS3特色的横幅显示
限制单行文本超出显示省略号
限制多行文本超出省略号
css三角形绘制
自适应文本框自动换行,限宽不限高
~选择器:查找某一个元素后面的所有兄弟元素
+选择器:查找某一个元素后面紧邻的兄弟元素
用 font-size :0 来清除边距
利用padding实现等比例缩放的盒子
利用pointer-events禁用事件光标变成default阻止hover和hover以及JavaScript 点击事件的触发
利用 max-width 防止图片撑破容器
伪类和伪元素的用法
footer永远在页面底部
两个子元素 一个有内容自动撑开,另一个为空如何跟随高度
消除transition闪屏
1、垂直居中对齐
› 继续阅读
JS Code block 代码块–图片压缩
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 491 views
图片压缩
/** * 图片压缩 * @param {string} file [压缩文件] * @param {object} obj [压缩参数] * @param {function} cb [回调函数] * @return {string} [返回压缩前和压缩后的格式] */ /* istanbul ignore next */ function photoCompress(file, obj, cb) { // obj = { // width: 图片宽, // height: 图片高, // quality: 图像质量, // blob: 是否转换成Blob // } // 将以base64的图片url数据转换为Blob function convertBase64UrlToBlob(urlData) { let arr = urlData.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); } // canvas 绘制图片 function canvasDataURL(oldBase64) { let img = new Image(); img.src = oldBase64; img.onload = function () { let that = this; // 默认按比例压缩 let w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); let quality = 0.7; // 默认图片质量为0.7 //生成canvas let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); // 创建属性节点 let anw = document.createAttribute('width'); anw.nodeValue = w; let anh = document.createAttribute('height'); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小,所绘制出的图像越模糊 let base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 if (obj.blob) { cb && cb(convertBase64UrlToBlob(base64), convertBase64UrlToBlob(oldBase64)) } else { cb && cb(base64, oldBase64); } } } // 读取图片的base64格式 let ready = new FileReader(); ready.readAsDataURL(file); ready.onload = function () { let re = this.result; canvasDataURL(re) } } |
Search
相关文章
热门文章
最新文章
文章分类
- ajax (10)
- algorithm-learn (3)
- Android (6)
- as (3)
- computer (85)
- Database (30)
- disucz (4)
- enterprise (1)
- erlang (2)
- flash (5)
- golang (3)
- html5 (18)
- ios (4)
- JAVA-and-J2EE (186)
- linux (143)
- mac (10)
- movie-music (11)
- pagemaker (36)
- php (50)
- spring-boot (2)
- Synology群晖 (2)
- Uncategorized (6)
- unity (1)
- webgame (15)
- wordpress (33)
- work-other (2)
- 低代码 (1)
- 体味生活 (40)
- 前端 (21)
- 大数据 (8)
- 游戏开发 (9)
- 爱上海 (19)
- 读书 (4)
- 软件 (3)