前端自制渐变色

最新推荐文章于 2024-12-01 11:38:25 发布

屿凡

最新推荐文章于 2024-12-01 11:38:25 发布

阅读量1k

点赞数 2

分类专栏：前端学习文章标签：前端 javascript html css

本文链接：https://blog.youkuaiyun.com/m0_47987937/article/details/125384918

版权

前端学习专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了一个使用HTML、CSS和JavaScript实现的在线颜色渐变生成器。用户可以选取三个颜色并调整角度，实时预览和修改线性渐变效果。同时，博客提供了详细的代码示例，解释了如何通过监听颜色选择器和滑动条的变动来更新页面背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自制渐变色</title>
		<style type="text/css">
			 #div {
				width:100%;
				height:500px;
				border:1px solid red;
			}
			
			#c41{
				display: inline-block;
				color: red;
				width: 10px;
				height: 10px;
			}
		</style>
		
	</head>
	<body>
		<input type="color" id="c1" value="#051d33">
		<input type="color" id="c2" value="#331e0a">
		<input type="color" id="c3" value="#88135b">
		<!-- range是滚动条数值。是input的一种 -->
		<input type="range" id="c4" min="0" max="360" /><div id="c41"></div><div id="warring" style="color: red;">选择三个颜色即可生成渐变色，拖动右边的数值条即可旋转图像,旋转单位为度</div>
		<div id="div"></div>
		<div id="result" style="width: 500px;height: 50px; color: red;"></div>
		<script type="text/javascript">
			// 定义三种颜色的初始值
			var value1 = '#051d33' ;
			var value2 = '#331e0a' ;
			var value3 = '#88135b' ;
			var result = document.getElementById("result");
			//获取
			var range = document.getElementById("c4");
			
			
			
			// 方法一
			
			// onchange方法就是说,input这种输入呀,或者滚动条,日历,颜色选择等等这类,选择或者输入后都会改变(change),所以这个onchange方法就是改变后就会触发
			
			//滚动条的数值改变时触发的函数--也就是要改变颜色啦
			range.onchange = function() {
				//给滚动条旁边显示一下滚动条的数值，不然都不知道多少度
				c41.innerText = range.value ;
				//执行设置颜色函数。
				setColor1(value1, value2 , value3);
				//给底下那个div里写入这个颜色的具体value值。方便使用
				result.innerText = "当前颜色为:" + "linear-gradient(" + range.value + "deg," + value1 + "," + value2 + "," + value3 + ")";	
			}
			
			
			//方法二
			
			//这个方法就是第一个改变颜色的那个input改变时触发的函数。也当然是改变了底下的大框就要改变颜色呀。然后最底下也需要显示这个颜色的值
			document.getElementById("c1").onchange = function() {
				//咱们需要value值来改变颜色，所以第一个颜色选择器选择后就获取一下c1的value值
				//this是这个函数的input对象。也就是document.getElementById("c1")。
			    value1 = this.value;
				//同样选择了第一个颜色后就调用设置颜色的方法来设置颜色
				setColor(value1, value2 , value3);
				//输入颜色信息
				result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";
			}
			//同c1
			document.getElementById('c2').onchange = function() {
			    value2 = this.value;
			    setColor(value1, value2 , value3);
				result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";
			};
			//同c3
			document.getElementById('c3').onchange = function() {
			    value3 = this.value;
			    setColor(value1, value2 , value3);
				result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";	
			};
			
			
			//方法3
			
			//设置颜色的方法来了,也就是每一个操作都会触发的方法.其实很简单,就是获取目标DIV的元素
			//然后用.style.a="b";来设置style样式.a是需要设置的属性,后边b是CSS样式代码
			function setColor(value1,value2,value3) {
				//获取div那个大框
			    var bg = document.getElementById("div");
				// 然后给它设置颜色即可，用的是"linear-gradient()"渐变色。
				bg.style.background = "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")"
			}
			//这个和那个一样的，只不过三个input颜色选择器选择的是to right从左到右的线行渐变色，而这个是Xdeg，x就是角度了，旋转的，颜色的value值一样的
			function setColor1(value1,value2,value3) {
			    var bg = document.getElementById("div");
				bg.style.background = "linear-gradient(" + range.value + "deg," + value1 + "," + value2 + "," + value3 + ")"
			}
			setColor(value1, value2 , value3);
		</script>
	</body>
</html>