[ミニアイテム]背景Changer

10953 ワード
JavaScript スモールプロジェクト テキストリンク
GitHub

要求


ランダムHex色コードを生成する関数
  • を作成する
  • ボタンをクリックすると、ランダムなHex色コードが生成され、ページの背景色とHex色コードテキスト
    • が変更される.

    実行画面


  • リンク:https://changyun-go.github.io/Mini-Project/1.%20Background%20Changer/2

    • Code


    HTML

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js" type="text/javascript" defer></script>
		
		<title>Background Changer</title>
	</head>
	<body>
		<p>HEX COLOR :#FFFFFF</p>
		<br><button style = "color: white;" onclick="changer()">CLICK ME</button>
	</body>
</html>

    CSS

    body {
	margin: 0;
}
p {
	width: 100%;
	margin: 200px 0px 300px 0px;
	text-align: center;
	font-size: 60px;
	font-weight: bold;
}
button {
	width: 140px;
	height: 57px;
	display: block;
	margin: auto;
	position: relative;
        top: -300px;
	text-align: center;
	font-size: 22px;
	background-color: grey;
	border-radius: 7px;
	border: 0;
	outline: 0;
}

    JavaScript

    function changer(){
	let color = '#';
	for(let i = 0; i < 6; i++){
      color += Math.floor(Math.random()*16).toString(16).toUpperCase();
	}
		document.body.style.backgroundColor = color;
		document.querySelector('p').textContent = 'HEX COLOR :' + color;
}

    P.S.


    0から9までの数字とAからFまでのアルファベットからなるHex Codeの特徴により,6進数をランダムに生成し,機能を実現した.
    JavaScriptでコードを書くのは難しくありませんが、HTMLやCSSと一緒に画面を実現するのは初めてなので、理解しにくいところもあります😅 やはり見くびってはいけない.それでも初めてJavaScriptを使ってスクリーンを作成したのは嬉しいです.😊

    Reference

  • バニラコードプリラーニングガイド
    • 43238号-少数判別
    10826:フィボナッチ数4