Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptを使用したカラーメーターの#CCCCCCと#3B5998の間の色を生成しますか?


与えられた2つの色の間でランダムな色を生成する関数を作成する必要があります。この問題を部分的に積み上げましょう-

  • まず→与えられた2つの数の間に乱数を生成する関数を書きます。

  • 2番目→ランダムな色の生成に16進スケールを使用する代わりに、16進を0から15の10進スケールにマップし、代わりにそれを使用します。

  • 最後に→指定されたカラー文字列のいずれかをループして、ランダムな色を生成します。

const randomBetween = (a, b) => {
   const max = Math.max(a, b);
   const min = Math.min(a, b);
   return Math.floor(Math.random() * (max - min) + min);
};
const randomColor = (firstColor, secondColor) => {
   first = firstColor.toUpperCase().substring(1, secondColor.length);
   second = secondColor.toUpperCase().substring(1, firstColor.length);
   const scale = '0123456789ABCDEF';
   let color = '#';
   for(let i = 0; i < first.length && i < second.length; i++ ){
      const random = randomBetween(scale.indexOf(first[i]),
      scale.indexOf(second[i]));
      color += scale[random];
   };
   return color;
};
console.log(randomColor('#34324a', '#42342c'));
console.log(randomColor('#f43250', '#12342c'));
console.log(randomColor('#34324a', '#47942c'));
console.log(randomColor('#ffffff', '#000000'));

以下は、コンソールで可能な出力です-

−出力は毎回ランダムであるため、これは考えられる多くの出力の1つにすぎません。

出力

#33332A
#C23328
#36822B
#35102A

  1. 色のランダムな16進コードを生成するJavaScript

    JavaScriptを使用してランダムな色の16進コードを生成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <s

  2. JavaScriptのランダムカラージェネレーター

    以下は、JavaScriptでランダムな色を生成するための構文です- $("#yourIdName").css("background-color", yourCustomFunctionNameToGetRandomColor()); 以下はJavaScriptコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&qu