Pomelo Lee workspace

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

星期二, 2023-04-18 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 311 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

JS Code block 代码块–颜色

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 276 views

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

Tags: js

JS Code block 代码块–Math

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 412 views

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

Tags: js

JS Code block 代码块–Function 函数

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 215 views

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

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

Tags: js

JS Code block 代码块–css 代码块

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 199 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

JS Code block 代码块–图片压缩

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 184 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

JS Code block 代码块–String 字符串

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 162 views

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

Tags: js

JS Code block 代码块–日期

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 175 views

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

Tags: js

JS Code block 代码块–图片

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 96 views

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

Tags: js

JS Code block 代码块–regex 正则表达式

星期一, 2023-04-17 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (490) | computer, 前端 | 没有评论 255 views

regex 正则表达式
是否由 26 个英文字母组成的字符串
是否由 26 个英文字母的大写组成的字符串
是否由 26 个英文字母的小写组成的字符串
是否为数字
是否为中文
是否为手机号
是否电子邮件
是否为座机号
是否为身份证
密码验证
邮政编码
是否为qq号
是否为金额
是否为Url
是否为ip
严格的身份证校验
移除标签
是否为 HTML 标签
检查是否为特殊字符
是否为有效的统一社会信用代码
是否为有效的A股代码
是否为有效的银行卡号
是否为有效的 base64格式
是否为有效的ed2k链接
是否为有效的IP v4
是否为有效的IP v6
是否为有效的md5格式(32位)
是否为有效的护照
是否为有效的子网掩码
› 继续阅读

Tags: js