JS Code block 代码块–颜色

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 1,231 views

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

/**
 * 匹配rgba的正则
 * @returns {RegExp}
 */
function regexRgba () {
    return /^[rR][gG][Bb][Aa]?[\(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[\)]{1}$/g
}
 
/**
 * 匹配透明度为0的rgba正则
 * @returns {RegExp}
 */
function regexRgbaByZeroOpacity () {
    return /^[rR][gG][Bb][Aa]?[\(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*0[\)]{1}$/
}
 
/**
* hex转换为RGBA
* @param hex 格式颜色
* @param opacity 透明度
* @return {string}
*/
function hexToRgbA(hex, opacity = 1) {
    let c;
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
        c = hex.substring(1).split('');
        if (c.length === 3) {
            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c = '0x' + c.join('');
        return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + `,${opacity})`;
    }
    throw new Error('Bad Hex');
}
 
/**
* rgb转Hex
* @constructor
*/
function RGBToHex (r, g , b) {
    return ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0")
}
 
/**
 * 获得随机的颜色值
 * @return {String} 返回随机的颜色字符串
 */
function getRandomColor() {
    return (
        '#' +
        Math.random()
            .toString(16)
            .substring(2)
            .substr(0, 6)
    );
}
 
/**
 * 是否为有效的16进制颜色
 * @param {string} val
 * @returns {boolean}
 * @example
 * isValidHexadecimalColor('#f00');
 * // => true
 * isValidHexadecimalColor('#fe9de8');
 * // => true
 */
function isValidHexadecimalColor(val) {
  const reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
  return reg.test(val);
}

Tags:

文章作者: Lee

本文地址: https://www.pomelolee.com/2381.html

除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址

No comments yet.

Leave a comment

Search

文章分类

Links

Meta