<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.box{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid #000;
}
.ul{
width: 100%;
height: auto;
}
.li{
width: 40px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
border: 1px solid #eee;
}
</style>
</head>
<body>
<div class="box">
<ul class="ul">
<!-- <li class="li" >21</li> -->
</ul>
</div>
</body>
</html>
<script>
window.onload = function () {
var data = [0,1,2,3,4,5,6,7,11,22,33,44,55,66,77,111]
var ul_box = document.querySelector(".ul");
var html = ''
var max = Math.max.apply(null, data);
console.log(max)
data.map(v=>{
let c = getColorByNumber(v,max)
html += `<li class="li" style="background: ${c};">${v}</li>`
})
ul_box.innerHTML = html
function rgbaToHex(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
function getColorByNumber(n,max) {
let halfMax = max / 2 //最大数值的二分之一
//var 百分之一 = (单色值范围) / halfMax; 单颜色的变化范围只在50%之内
// 绿色的rgb(0,255,0) 红色的rgb(255,0,0) 红+绿 = 黄色 rgb(255,255,0);
// [1, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]整数会直观一点。
// 100为例，0为rgb(0,255,0)，1-49应该为rgb(0-254,255,0)， 50为100的一半rgb(255,255,0),51-99应该为rgb(255,0-255,0),100为rgb(255, 2, 0)，255/100不能整除，此处理想状态下应该是rgb(255, 0, 0)
var one = 255 / halfMax;
console.log('one= ' + one)
var r = 0;
var g = 0;
var b = 0;
if (n < halfMax) {
// 比例小于halfMax的时候红色是越来越多的,直到红色为255时(红+绿)变为黄色.
r = one * n;
g = 255;
}
if (n >= halfMax) {
// 比例大于halfMax的时候绿色是越来越少的,直到0 变为纯红
g = (255 - ((n - halfMax) * one)) < 0 ? 0 : (255 - ((n - halfMax) * one))
r = 255;
}
r = parseInt(r);// 取整
g = parseInt(g);// 取整
b = parseInt(b);// 取整
// console.log(r,g,b)
return rgbaToHex("rgb(" + r + "," + g + "," + b + ")");
}
}
</script>
笔记仅供参考
2451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
