JavaScript - Lichtregler

Diese wenigen Array-Optionen für den Farbverlauf kopieren.


<script>

function 
lichtregler(wert) {
 
let farben = ["#FFFFFF""#FEFEFE""#FDFDFD""#FBFBFB""#FAFAFA""#F9F9F9""#F8F8F8""#F7F7F7""#F5F5F5""#F4F4F4",
 
"#F3F3F3""#F2F2F2""#F1F1F1""#F0F0F0""#EFEFEF""#EEEEEE""#EDEDED""#ECECEC""#EBEBEB""#EAEAEA",
 
"#E8E8E8""#E7E7E7""#E6E6E6""#E5E5E5""#E4E4E4""#E2E2E2""#E1E1E1""#E0E0E0""#DFDFDF""#DEDEDE",
 
"#DCDCDC""#DBDBDB""#DADADA""#D9D9D9""#D8D8D8""#D7D7D7""#D5D5D5""#D4D4D4""#D3D3D3""#D2D2D2",
 
"#D1D1D1""#CFCFCF""#CECECE""#CDCDCD""#CCCCCC""#CBCBCB""#C9C9C9""#C8C8C8""#C7C7C7""#C6C6C6",
 
"#C5C5C5""#C4C4C4""#C2C2C2""#C1C1C1""#C0C0C0""#BFBFBF""#BEBEBE""#BCBCBC""#BBBBBB""#BABABA",
 
"#B9B9B9""#B8B8B8""#B6B6B6""#B5B5B5""#B4B4B4""#B3B3B3""#B2B2B2""#B0B0B0""#AFAFAF""#AEAEAE",
 
"#ADADAD""#ACACAC""#ABABAB""#A9A9A9""#A8A8A8""#A7A7A7""#A6A6A6""#A5A5A5""#A3A3A3""#A2A2A2",
 
"#A1A1A1""#A0A0A0""#9F9F9F""#9D9D9D""#9C9C9C""#9B9B9B""#9A9A9A""#999999""#979797""#969696",
 
"#959595""#949494""#939393""#929292""#909090""#8F8F8F""#8E8E8E""#8D8D8D""#8C8C8C""#8A8A8A",
 
"#898989""#888888""#878787""#868686""#848484""#838383""#828282""#818181""#808080""#7E7E7E",
 
"#7D7D7D""#7C7C7C""#7B7B7B""#7A7A7A""#797979""#777777""#767676""#757575""#747474""#737373",
 
"#717171""#707070""#6F6F6F""#6E6E6E""#6D6D6D""#6B6B6B""#6A6A6A""#696969""#686868""#676767",
 
"#656565""#646464""#636363""#626262""#616161""#606060""#5E5E5E""#5D5D5D""#5C5C5C""#5B5B5B",
 
"#5A5A5A""#585858""#575757""#565656""#555555""#545454""#525252""#515151""#505050""#4F4F4F",
 
"#4E4E4E""#4D4D4D""#4B4B4B""#4A4A4A""#494949""#484848""#474747""#454545""#444444""#434343",
 
"#424242""#414141""#3F3F3F""#3E3E3E""#3D3D3D""#3C3C3C""#3B3B3B""#393939""#383838""#373737",
 
"#363636""#353535""#343434""#323232""#313131""#303030""#2F2F2F""#2E2E2E""#2C2C2C""#2B2B2B",
 
"#2A2A2A""#292929""#282828""#262626""#252525""#242424""#232323""#222222""#202020""#1F1F1F",
 
"#1E1E1E""#1D1D1D""#1C1C1C""#1B1B1B""#191919""#181818""#171717""#161616""#151515""#131313",
 
"#121212""#111111""#000000"];
document.getElementsByTagName('body')[0].style.backgroundColor farben[wert];
}
</
script>

<
input type="range" value="0" min="0" max="203" step="1" onInput="lichtregler(this.value)">

max="203", ist die Anzahl der Elemente im Array!

Mein Tipp:
Mit dem Farbverlauf Generator lassen sich andere Farbverläufe für den JavaScript-Code erstellen.

Bausteine  [Alle Anzeigen]

Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Eingabefelder und Buttons formatieren

PHP - Verwendung von str_split() und chunk_split()

JavaScript - HTML-Button über JavaScript eine Funktion zuweisen

MySQL - Flexible Insert-Funktion