栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用JavaScript在CSS中生成较浅/较深的颜色

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用JavaScript在CSS中生成较浅/较深的颜色

var pad = function(num, totalChars) {    var pad = '0';    num = num + '';    while (num.length < totalChars) {        num = pad + num;    }    return num;};// Ratio is between 0 and 1var changeColor = function(color, ratio, darker) {    // Trim trailing/leading whitespace    color = color.replace(/^s*|s*$/, '');    // Expand three-digit hex    color = color.replace(        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,        '#$1$1$2$2$3$3'    );    // Calculate ratio    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),        // Determine if input is RGB(A)        rgb = color.match(new RegExp('^rgba?\(\s*' + '(\d|[1-9]\d|1\d{2}|2[0-4][0-9]|25[0-5])' + '\s*,\s*' + '(\d|[1-9]\d|1\d{2}|2[0-4][0-9]|25[0-5])' + '\s*,\s*' + '(\d|[1-9]\d|1\d{2}|2[0-4][0-9]|25[0-5])' + '(?:\s*,\s*' + '(0|1|0?\.\d+))?' + '\s*\)$'        , 'i')),        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,        // Convert hex to decimal        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace( /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i, function() {     return parseInt(arguments[1], 16) + ',' +         parseInt(arguments[2], 16) + ',' +         parseInt(arguments[3], 16); }        ).split(/,/),        returnValue;    // Return RGB(A)    return !!rgb ?        'rgb' + (alpha !== null ? 'a' : '') + '(' + Math[darker ? 'max' : 'min'](     parseInt(decimal[0], 10) + difference, darker ? 0 : 255 ) + ', ' + Math[darker ? 'max' : 'min'](     parseInt(decimal[1], 10) + difference, darker ? 0 : 255 ) + ', ' + Math[darker ? 'max' : 'min'](     parseInt(decimal[2], 10) + difference, darker ? 0 : 255 ) + (alpha !== null ? ', ' + alpha : '') + ')' :        // Return hex        [ '#', pad(Math[darker ? 'max' : 'min'](     parseInt(decimal[0], 10) + difference, darker ? 0 : 255 ).toString(16), 2), pad(Math[darker ? 'max' : 'min'](     parseInt(decimal[1], 10) + difference, darker ? 0 : 255 ).toString(16), 2), pad(Math[darker ? 'max' : 'min'](     parseInt(decimal[2], 10) + difference, darker ? 0 : 255 ).toString(16), 2)        ].join('');};var lighterColor = function(color, ratio) {    return changeColor(color, ratio, false);};var darkerColor = function(color, ratio) {    return changeColor(color, ratio, true);};// Usevar darker = darkerColor('rgba(80, 75, 52, .5)', .2);var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

现在处理RGB(A)输入以及十六进制(3位数或6)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/573218.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号