<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイル>
。サークル {
境界半径：50％。
位置：絶対;
}
</スタイル>
</ head>の
<身体>
<ヘッダ>
<ボタンID = "addcircle">添加小球</ボタン>
</ヘッダ>
<DIV CLASS = "コンテンツ" ID = "コンテンツ"> </ div>
<スクリプト>
//ボックスを取得
constのコンテンツ=のdocument.getElementById（ 'コンテンツ'）
console.log（ '***'、コンテンツ）
constのaddcircle =のdocument.getElementById（ 'addcircle'）//取得ボタンオブジェクト
クラスサークル{
コンストラクタ（小道具= {}）{
const {
R = this.random（20、50）、
色= this.randomColor（）、//＃のCCCC
X = 50、
Y = 50
}小道具を=。
this.r = R。
this.color =色。
this.x = X。
this.y = Y。
this.createEl（）; // DOMノードを作成します
} // DOMを作成します。
createEl（）{
CONST {色、R、X、Y}はこれを=。
this.circle =のdocument.createElement（ 'DIV'）;
this.circle.className = '円';
this.circle.style.width = '$ {R * 2} px`。
this.circle.style.height = '$ {R * 2} px`。
this.circle.style.background = `$ {色}`。
this.circle.style.left = '$ {X} px`。
this.circle.style.top = `$ {と} px`。
content.appendChild（this.circle）。
}
//乱数を生成します
ランダム（MIN、MAX）{
リターンMath.floor（Math.random（）*（最大 - 最小）+分）
}
色を製造する方法//
randomColor（ミックス、MAX）{
// #CCCCCC
CONST文字= [ '、 'B'、 'C'、 'D'、 'E'、 'F']
constのSTRS = [...手紙]
{（I ++; I <10、I = 0せて）のために
strs.push（I）;
}
console.log（STRS）。
colorStr = '＃' をしましょう。
私は= 0ましょう。
{（I <6）、一方
インデックス= this.random（0、strs.length）とします。
colorStr + = STRS [インデックス]。
I ++;
}
colorStrを返します。
}
}
addcircle.onclick =（）=> {
新しいサークル（）
console.log（サークル）
}
// constのC1 =新しいサークル（）;
// constのC2 =新しいサークル（{
// 青色'、
// X：400、
// Y：50
//}）
</ SCRIPT>
</ BODY>
</ HTML>