Pomelo Lee workspace

JS Code block 代码块–URL

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

URL
获取window.URL 实例
获取url中的参数
删除url中参数
增加url中的参数
获取URL里domain
返回url的pathName
http协议转换为https
将dataURL转换为blob
blob2DataURL

› Continue reading

Tags: js

JS Code block 代码块–dom

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

dom
获取一级子节点
获取兄弟节点
获取元素相对于视口的位置信息
判定节点里是否有class
添加class
删除class
替换class
dom对象转换成字符串
给页面添加js和css
禁用浏览器的默认行为
获取当前元素，或窗口的滚动位置
判断一个对象是否为Dom对象
获取HTML里的文字内容
字符串的转义
字符串的反转义
将文本插入到文本区域的光标位置
浏览器全屏
退出全屏
是否是Element
› Continue reading

Tags: js

JS Code block 代码块–对象（Object）

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

对象（Object）
校验对象是否是某个类型
是否对象类型
是否数组类型
是否数组
是否是字符串
是否时blob
判断对象是否为空
class 类多继承
判断参数是不是blob
深层克隆对象
两个对象（值）之间的深入比较，以确定它们是否相等
过滤对象中为空的属性
反转对象的键值对
数组转换为键值对的对象
对象转化为键值对
› Continue reading

Tags: js

JS Code block 代码块–Storage (localStorage, sessionStorage)

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

Storage (localStorage, sessionStorage)
设置localStorage
获取localStorage
移除localStorage
移除所有localStorage
设置sessionStorage
获取sessionStorage
移除sessionStorage
移除所有sessionStorage
› Continue reading

Tags: js

JS Code block 代码块–cookie

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

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);
}

Tags: js

JS Code block 代码块–动态数字插件 scrollNum

星期二, 四月 18th, 2023 | computer, 前端 | 没有评论

动态数字插件 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()

› Continue reading

Tags: js

JS Code block 代码块–颜色

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

颜色
匹配rgba的正则
匹配透明度为0的rgba正则
hex转换为RGBA
rgb转Hex
获得随机的颜色值
是否为有效的16进制颜色
› Continue reading

Tags: js

JS Code block 代码块–Math

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

Math
计算两点的距离
组合C
求最大公约数
是否可以整除
最小公倍数
斐波那契数组生成器
› Continue reading

Tags: js

JS Code block 代码块–Function 函数

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

Function 函数
提供一些常用的函数功能

防抖
节流
等待
格式化银行卡
对css属性针对不同浏览器加私有前缀
› Continue reading

Tags: js

JS Code block 代码块–css 代码块

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

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、垂直居中对齐
› Continue reading

Tags: js