My workspace in Internet,Focus on Internet Technology

JS Code block 代码块–Function 函数

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

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

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

Tags: js

垂直居中对齐
全屏显示
不同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: Lee | computer, 前端 | 没有评论 32 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: Lee | computer, 前端 | 没有评论 26 views

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

Tags: js

JS Code block 代码块–日期

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

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

Tags: js

JS Code block 代码块–图片

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

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

Tags: js

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

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

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

Tags: js

使用说明
你需要引入horizontal-roll-pagination.js，引入之后会在全局window下有个属性HorizontalRollPagination，你可以new 它创建实例。

let config = {
        // preDom: 前一页的按钮节点 -- 必须
        preDom: document.getElementsByClassName('prev')[0],
        // nextDom: 后一页的按钮节点 -- 必须
        nextDom: document.getElementsByClassName('next')[0],
        // box: 可视区域的节点 -- 必须
        box: document.getElementsByClassName('box')[0],
        // scrollDom: 会被移动的节点 -- 必须
        scrollDom: document.getElementsByClassName('scroll_list')[0],
        // parentDom: 展示项的父节点 -- 必须
        parentDom: document.getElementsByTagName('ul')[0],
        // 是否循环
        loop: true
    };
    let horizontalRollPagination = new HorizontalRollPagination(config);
    horizontalRollPagination.init();

这个插件对dom节点需要一定要求。它的结构如下：
› 继续阅读

Tags: js

Search

JS Code block 代码块–URL - 242 views
JS Code block 代码块–dom - 57 views
JS Code block 代码块–对象（Object） - 53 views
JS Code block 代码块–Storage (localStorage, sessionStorage) - 56 views
JS Code block 代码块–cookie - 53 views
JS Code block 代码块–动态数字插件 scrollNum - 50 views
JS Code block 代码块–颜色 - 86 views
JS Code block 代码块–Math - 72 views

文章分类

ajax (10)
algorithm-learn (3)
Android (6)
as (3)
computer (83)
Database (30)
disucz (4)
enterprise (1)
erlang (2)
flash (5)
golang (3)
html5 (18)
ios (4)
JAVA-and-J2EE (184)
linux (142)
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)
体味生活 (40)
前端 (21)
大数据 (8)
游戏开发 (9)
爱上海 (19)
读书 (4)
软件 (3)

Pomelo Lee workspace