您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

JS判断颜色是否为深色 阀值

前言

碰到一个有趣的项目需求,判断颜色的深浅,若为深色则设置浅色阴影;反之,设置深色阴影。

本来没有头绪,怎样从才能知晓她的深浅呢,百度一下就tmd有了结果。

// arr为用于存储rgb的三个数据
var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;

知道其原理,则可以开始实践了…

  <div id="app">
    <div :style="bgc"></div>
    <br><br>
    <button @click="testing">testing</button>
  </div>
    new Vue({
      el: '#app',
      data() {
        return {
          bgc: {
            width: '80px',
            height: '80px',
            backgroundColor: 'rgb(255,200,255)',
            margin: '10px',
            boxShadow: ''
          }
        }
      },
      methods: {
        testing() {
          var color = this.bgc.backgroundColor
          var arr = color.replace('rgb(','').replace(')','').split(',').map(Number);
          console.log(arr);
          var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;
          console.log($grayLevel);

          if ($grayLevel >= 192) {
            this.turnDarkColor(arr)
          } else {
            this.turnLightColor(arr)
          }
        },
        turnDarkColor(arr) {
          var cla = new ColorHandle();
          var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);
          this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getDarkColor(hex,0.6)
        },
        turnLightColor(arr) {
          var cla = new ColorHandle();
          var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);
          this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getLightColor(hex,0.6)
        }
      }
    })

这里需引入一个颜色转换的js文件:

附上链接

效果图如下:
在这里插入图片描述

在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进