<!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">
<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");
range.onchange = function() {
c41.innerText = range.value ;
setColor1(value1, value2 , value3);
result.innerText = "当前颜色为:" + "linear-gradient(" + range.value + "deg," + value1 + "," + value2 + "," + value3 + ")";
}
document.getElementById("c1").onchange = function() {
value1 = this.value;
setColor(value1, value2 , value3);
result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";
}
document.getElementById('c2').onchange = function() {
value2 = this.value;
setColor(value1, value2 , value3);
result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";
};
document.getElementById('c3').onchange = function() {
value3 = this.value;
setColor(value1, value2 , value3);
result.innerText = "当前颜色为:" + "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")";
};
function setColor(value1,value2,value3) {
var bg = document.getElementById("div");
bg.style.background = "linear-gradient(to right," + value1 + "," + value2 + "," + value3 + ")"
}
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>
