用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中的作用域scope介绍
Dec 28 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
模仿OSO的论坛(一)
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
详解JavaScript的变量
2019/04/04 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Python字符转换
2008/09/06 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Python读写锁实现实现代码解析
2020/11/28 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
深圳茁壮笔试题
2015/05/28 面试题
企业演讲比赛主持词
2014/03/18 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
员工团队活动方案
2014/08/28 职场文书
考试作弊检讨书
2015/01/27 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang