发表于： 2019-06-18 20:34:50
1 762
任务7有一个取透明色任务,我在网上找的方法都不大好用就直接写了一个, http://1.jyyrgb.applinzi.com/demo.html
使用方法为先用取色工具取得透明色的rpb值,把gpb值分别输入就可以获取透明值的范围了,在输入透明值就能获得argb值了.
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.transparent{
display:none;
}
.a{
/* width:150px; */
height:40px;
display:inline-block;
font-size:30px;
}
div{
width:300px;
height:70px;
background:rgb(222,222,222);
color:white;
font-size:20px;
text-align:center;
line-height:70px;
}
.ban:hover{
cursor: not-allowed;
}
.good{
background:rgb(127.5, 215, 236.25);
}
.good:hover{
cursor: pointer;
}
em,
span{
display:none;
}
em{
color:green;
}
span{
color:red;
}
p{
font-size:30px;
}
/* "" */
</style>
</head>
<body> R<input type="text" placeholder="请输入0-255之间的数">
<span>请输入0-255之间的数</span><em>正确</em><br> G<input type="text" placeholder="请输入0-255之间的数">
<span>请输入0-255之间的数</span><em>正确</em><br> B<input type="text" placeholder="请输入0-255之间的数">
<span>请输入0-255之间的数</span><em>正确</em><br> A<input type="text">
<span>请输入0-255之间的数</span><br>
<div>点击提交获取透明值范围</div>
<p>你要的颜色值为</p>
</body>
<script>
//判断input中的value是否为正确数值
function isNum(a) {
if (Number(a) === 0) {
if (parseInt(a) === 0) {
return 0;
} else {
return false;
}
} else if (!Number(a)) { //此处不可以用Number(a)===NaN来判断,因为NaN不等于NaN
return false;
} else {
return (Number(a));
}
}
function rgba(RGB, a) {
var c = [];
for (var i = 0; i < 3; i++) {
c = (RGB[i] - 255 + 255 * a) / a;
c = Math.round(c)
rgb.push(c);
}
p.innerHTML = `你要的颜色值为 rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`
}
var em = document.querySelectorAll("em");
var span = document.querySelectorAll("span");
var p = document.querySelector("p");
var num = document.querySelectorAll("input");
var div = document.querySelector("div");
let RGB = [];
var a = null;
var rgb = [];
var flag = 1;
for (let i = 0; i < 4; i++) {
num[i].onkeyup = function() {
if (flag == 1) {
for (let j = 0; j < 3; j++) {
if (isNum(num[j].value) === false || isNum(num[j].value) > 255 || isNum(num[j].value) < 0) {
num[j].stutas = false;
} else {
num[j].stutas = true;
}
}
console.log(num[0].stutas + "....." + num[1].stutas + "......" + num[2].stutas)
if (num[0].stutas && num[1].stutas && num[2].stutas) {
flag = 2;
div.className = "good"
}
} else if (flag == 3) {
if (isNum(num[3].value) >= a && isNum(num[3].value) <= 1) {
console.log(a)
div.className = "good"
flag = 4;
p.innerHTML = `点击获取RGBA`
}
} else if (flag == 4) {
if (isNum(num[3].value) >= a && isNum(num[3].value) < 1) {
div.className = "good"
flag = 4;
p.innerHTML = `点击获取RGBA`
} else {
div.className = "bad"
flag = 3;
p.innerHTML = `透明值取值范围为 ${a}-1`
}
}
}
num[i].addEventListener("blur", () => {
if (isNum(num[i].value) === false || isNum(num[i].value) > 255 || isNum(num[i].value) < 0) {
span[i].style.display = "inline";
em[i].style.display = "none";
} else {
span[i].style.display = "none";
em[i].style.display = "inline";
}
});
}
div.onclick = function() {
if (flag === 1) {
return;
} else if (flag === 2) {
for (var i = 0; i < 3; i++) {
num[i].disabled = true;
}
var copy=[];
for (let i = 0; i < 3; i++) {
copy.push(num[i].value)
RGB.push(num[i].value)
}
copy.sort((a, b) => b - a);
a = 1 - copy[2] / 255;
a = (Math.floor(a * 100)) / 100
console.log("最大透明值为:" + a)
flag = 3;
p.innerHTML = `透明值取值范围为 ${a}-1`
div.className = "ban"
document.querySelector(".transparent").className = "a transparent"
console.log(num[3])
} else if (flag === 4) {
a = document.querySelector(".transparent").value;
console.log(a)
rgba(RGB, a)
}
}
</script>
</html>
返回列表
评论