JS Code block 代码块–cookie

星期二, 2023-04-18 | Author: Lee | computer, 前端 | 没有评论 391 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);
}

Tags:

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

星期二, 2023-04-18 | Author: Lee | computer, 前端 | 没有评论 451 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()

› 继续阅读

Tags:

JS Code block 代码块–颜色

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 401 views

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

Tags:

JS Code block 代码块–Math

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 577 views

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

Tags:

JS Code block 代码块–Function 函数

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 361 views

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

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

Tags:

JS Code block 代码块–css 代码块

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 283 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、垂直居中对齐
› 继续阅读

Tags:

JS Code block 代码块–图片压缩

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 252 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)
  }
}

Tags:

JS Code block 代码块–String 字符串

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 227 views

String 字符串
去除空格
字符大小写转换
翻转字符
下划线格式字符串转为驼峰格式
驼峰格式字符串转为下划线格式
转义html(防XSS攻击)
› 继续阅读

Tags:

JS Code block 代码块–日期

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 267 views

日期
按类型格式化日期
设置几天后的日期
获取当前时间的n天后的时间戳
本周第一天
本周最后一天
本月第一天
本月最后一天
日期转时间戳
返回指定时间戳之间的时间间隔
星期转换,将数字转换成英文
月份转换,将数字转换成英文
是否为闰年
返回两个年份之间的闰年
› 继续阅读

Tags:

JS Code block 代码块–图片

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 没有评论 147 views

图片
图片下载
图片转成base64
canvas标签转换成img标签
Base64转Blob对象
创建一个canvas,并获取 CanvasRenderingContext2D
内容以文件形式下载下来
浏览器是否支持webP格式图片
› 继续阅读

Tags:

Search

文章分类

Links

Meta