制作带透明度的拾色器【计算属性】

柔光的暖阳◎ 2023-02-26 04:26 13阅读 0赞

## html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue.js</title>
    	<link rel="stylesheet" type="text/css" href="style/index.css" />
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	
    	<div id="box">
    		<p>R: <input type="range" min='0' max='255' v-model.number='r'><span>{ { r}}</span></p>
    		<p>G: <input type="range" min='0' max='255' v-model.number='g'><span>{ { g}}</span></p>
    		<p>B: <input type="range" min='0' max='255' v-model.number='b'><span>{ { b}}</span></p>
    		<p>A: <input type="range" min='0' max='100' v-model.number='a'><span>{ { a}}</span></p>
    		<p>颜色代码：<input type="text" v-model='color' /></p>
    		<div class="box" :style='{backgroundColor:bgc}'></div>
    	</div>
    
    
    	
    	<script type='text/javascript' src="js/index.js"></script>
    </body>
    </html>

## js ##

var vm=new Vue({ 
    	el:'#box',
    	data:{ 
    		r:0,
    		g:0,
    		b:0,
    		a:0,
    		bgc:''
    	},
    	computed:{ 
    		color:{ 
    			get(){ 
    				var red=this.r<=9?'0' + this.r.toString(16) : this.r.toString(16);
    				var green=this.g<=9?'0' + this.g.toString(16) : this.g.toString(16);
    				var blue=this.b<=9?'0' + this.b.toString(16) : this.b.toString(16);
    				var opcity=this.a===100 ? (this.a)/100 : parseInt((this.a)/10)/10;
    				// this.bgc= '#' + red + green + blue;
    				this.bgc=`rgba(${ this.r},${ this.g},${ this.b},${ opcity})`;
    				return '#' + red + green + blue;
    			},
    			set(newColor){ 
    				if(newColor.length===7){ 
    					this.bgc=newColor;
    					var red=parseInt(newColor.slice(1,3),16);
    					var green=parseInt(newColor.slice(3,5),16);
    					var blue=parseInt(newColor.slice(5),16);
    					this.r=red;
    					this.g=green;
    					this.b=blue;					
    				}				
    			}
    		}
    	}
    })
    
    for(var i=0;i<=100;i++){ 
    	console.log(parseInt(i/10)/10);
    }

## css ##

.box{ 
    	width:150px;height:150px;
    	border:solid 1px #ccc;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Studio设置颜色拾色器工具Color Picker

可能下载过一些获取颜色值的一些小工具，　　这种方式获取颜色，需要先切换窗口转跳到桌面，然后打开拾色器小工具程序，然后去拾取颜色；你可能也知道Android S...

向右看齐/ 2024年04月17日 17:52/ 0 赞/ 91 阅读

相关简单易用的拾色器推荐

目录屏幕拾色器浏览器自带的拾色器电脑自带的画图工具拾色器 -------------------- 屏幕拾色器屏幕拾色器，一

逃离我推掉我的手/ 2023年06月28日 15:24/ 0 赞/ 14 阅读

相关原生js制作简易DOM拾色器实例教程

本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作，实例效果如下图所示。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

秒速五厘米/ 2023年05月22日 08:47/ 0 赞/ 14 阅读

相关 layui颜色选择器拾色器结合表单记录

有时候需要提交颜色进行处理，需要拾色器供用户筛选颜色 <div class="layui-col-md8"> <inpu

不念不忘少年蓝@/ 2023年02月26日 06:20/ 0 赞/ 6 阅读

相关制作带透明度的拾色器【计算属性】

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔光的暖阳◎/ 2023年02月26日 04:26/ 0 赞/ 14 阅读

相关推荐一款拾色器插件colorpicker.js

需求：点击颜色的input框的时候，会出现拾色器的插件，将自己选择的颜色的色号赋值给input里面，在插件库里面找到了一个UI样式还比较好看的插件，作了一些修改，符合项目需要，

柔光的暖阳◎/ 2022年12月22日 00:58/ 0 赞/ 189 阅读

相关 Windows系统微软拾色器小工具

Github下载地址：[https://github.com/microsoft/PowerToys/releases][https_github.com_micro

╰+哭是因爲堅強的太久メ/ 2022年10月07日 01:54/ 0 赞/ 329 阅读

相关 JavaScript HSL拾色器

HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R, G 和 B 的坐标的变换。从 RGB 到 HSL 或 HSV 的转换设 (r, g, b)

我就是我/ 2022年07月11日 04:58/ 0 赞/ 233 阅读

相关图片拾色器

如果要获取这张图片的所有颜色：[https://segmentfault.com/a/1190000009345753][https_segmentfault.com_a_11

我会带着你远行/ 2022年06月03日 05:16/ 0 赞/ 254 阅读

相关 HTML input color 拾色器

< input> 标签 type 属性值设置为 "color" 即可创建一个拾色器。拾色器控件是 HTML5 新增。

小灰灰/ 2020年05月16日 16:40/ 0 赞/ 710 阅读