用javascript获取任意颜色的更亮或更暗颜色值示例代码


Posted in Javascript onJuly 21, 2017

前言

本文主要给大家介绍的是关于利用javascript获取任意颜色更亮或更暗颜色值的相关内容,下面话不多说,来一起看看详细的介绍:

预处理CSS,比如Sass和less可以通过设定一个特定值,让任何颜色变得更亮或者更暗。但是在javascript中却没有这种方法。下面这个方法能在javascript中得到一个更亮或者更暗的值,通过一个给定的十六进制颜色值(比如#F06D06,或者没有#)

示例代码

function LightenDarkenColor(col, amt) {
 
 var usePound = false;
 
 if (col[0] == "#") {
 col = col.slice(1);
 usePound = true;
 }
 
 var num = parseInt(col,16);
 
 var r = (num >> 16) + amt;
 
 if (r > 255) r = 255;
 else if (r < 0) r = 0;
 
 var b = ((num >> 8) & 0x00FF) + amt;
 
 if (b > 255) b = 255;
 else if (b < 0) b = 0;
 
 var g = (num & 0x0000FF) + amt;
 
 if (g > 255) g = 255;
 else if (g < 0) g = 0;
 
 return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
 
}
// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
基于JavaScript实现数码时钟效果
Mar 30 #Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 #Javascript
基于JavaScript实现无缝滚动效果
Jul 21 #Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php print EOF实现方法
2009/05/21 PHP
php图片裁剪函数
2018/10/31 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
webpack之devtool详解
2018/02/10 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
在Python中编写数据库模块的教程
2015/04/29 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
工作评语大全
2014/04/26 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
经营场所使用证明
2015/06/19 职场文书
欠条样本
2015/07/03 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书