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

前言

本文主要给大家介绍的是关于利用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);

总结

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

赞 (0)

相关推荐

  • RGB颜色值转HTML十六进制(HEX)代码的JS函数

    复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the

  • js实现可得到不同颜色值的颜色选择器实例

    本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut

  • JavaScript实现16进制颜色值转RGB的方法

    JavaScript实现16进制颜色值转RGB的方法

    本文实例讲述了JavaScript实现16进制颜色值转RGB的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • javascript实现十六进制颜色值（HEX）和RGB格式相互转换

    在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法. 复制代码 代码如下: //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为16进制*/ String.prototype.colorHex = function(){     var that = this;     if(/^(rgb|RGB)/.test(that)){         var aColor = th

  • 用js实现的十进制的颜色值转换成十六进制的代码

    function MyColor(name,r,g,b){ this.name=name; this.red=r; this.green=g; this.blue=b; } MyColor.prototype.hexValue=function(){ var hR=this.red.toString(16); var hG=this.green.toString(16); var hB=this.blue.toString(16); return "#"+(this.red [Ctrl

  • Javascript实现Web颜色值转换

    Javascript实现Web颜色值转换

    最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜

  • js获取随机颜色值的函数

    收集一个函数:获取随机颜色值 复制代码 代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充 在线演示代码: js随机颜色 document

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

    前言 本文主要给大家介绍的是关于利用javascript获取任意颜色更亮或更暗颜色值的相关内容,下面话不多说,来一起看看详细的介绍: 预处理CSS,比如Sass和less可以通过设定一个特定值,让任何颜色变得更亮或者更暗.但是在javascript中却没有这种方法.下面这个方法能在javascript中得到一个更亮或者更暗的值,通过一个给定的十六进制颜色值(比如#F06D06,或者没有#) 示例代码 function LightenDarkenColor(col, amt) { var useP

  • Vue.js获取手机系统型号、版本、浏览器类型的示例代码

    1.index.html引入 <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"> </script> 2.直接用 <script> //判断数组中是否包含

  • C#获取微信小程序的云数据库中数据的示例代码

    目录 0 背景说明 0.1 获取AccessToken 0.2 数据库查询 0.3 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 0 背景说明 试水小程序,实现访客登记,现有.NET程序需要获取该小程序的数据 0.1 获取AccessToken 调用绝大多数后台接口时都需使用 access_token 参考小程序文档:auth.getAccessToken 发送Get请求,获取AccessToken 接口: https://api.weixin.qq.com/cgi-bin/tok

  • C#获取HTML文本的第一张图片与截取内容摘要示例代码

    获取第一张图片 要我们获得到的数据是一段HTML文本.也许这段文本里面有许多图片.需要截取一张作为标题图片.也就是做为主图.这时就可以用到下面这个方法获取到第一张图片. 示例代码 #region 获取第一张图片 /// <summary> /// 获取HTML文本的图片地址 /// </summary> /// <param name="content"></param> /// <returns></returns&g

  • javascript 获取图片颜色

    javascript 获取图片颜色

    利用canvas的2d对象,我们可以获取图片每个像素点的数据 CanvasPixelArray 舜子这里也写了一个简单的 getImageData 的演示 图片取色演示.这个演示目前只能在ff3下运行. 能够获取像素点后,是不是以后的OCR文字识别系统都直接online了呢? 相关资料: http://www.whatwg.org/specs/web-apps/current-work/#dom-context-2d-getimagedata

  • javascript获取函数名称、函数参数、对象属性名称的代码实例

    一.获取函数名称的3种实现方法实例1: 在js权威指南中看到的一个方法: Function.prototype.getName = function(){    return this.name || this.toString().match(/function\s*([^(]*)\(/)[1]} 实例2: 如果当前函数是有名函数,则返回其名字,如果是匿名函数则返回被赋值的函数变量名,如果是闭包中匿名函数则返回"anonymous". 复制代码 代码如下: var getFnName

  • js获取下拉列表框<option>中的value和text的值示例代码

    在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得<option value="value">ShowText</option>中"ShowText",我们该如何获取呢?方法很简单,具体代码如下: 复制代码 代码如下: <script type="text/javascript">function a(object){alert(o

  • 为Javascript中的String对象添加去除左右空格的方法(示例代码)

    如下所示: String.prototype.trim=function(){   var m=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);   return (m==null)?"":m[1];} 使用:var  message ="  我很好  ";message.trim();

  • jQuery获取随机颜色的实例代码

    1.js //获取十六进制颜色 function randomColor1(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); if(r < 16){ r = "0"+r.toString(16); }else{ r = r.toString(16); } if(g < 16){ g =

  • JavaScript实现浏览器网页自动滚动并点击的示例代码

    JavaScript实现浏览器网页自动滚动并点击的示例代码

    1. 打开浏览器控制台窗口 JavaScript通常是作为开发Web页面的脚本语言,本文介绍的JavaScript代码均运行在指定网站的控制台窗口.一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J直接打开 2. 实时查看鼠标坐标 首先为了获取当前的鼠标位置的x.y坐标,需要先重写一个onmousemove函数

随机推荐