JSのボタンをクリックしてランダムな背景10
2413 ワード
こんにちは👋
JavaScriptでボタンをクリックすると、ランダムな背景を作る方法を示します.
これは10 JSプロジェクトチャレンジのパート1です.
それでは始めましょう.
まず、ビデオチュートリアルです
ではコーディングを始めましょう.
まず、フォルダに3つのファイルを作成する必要があります.
インデックスのコードを示します.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<button">Click Me</button>
<script src="home.js"></script>
</body>
</html>
さあ、スタイルをしましょう.CSS
以下がコードです.
body{
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
button{
padding: 14px 24px;
font-size: 24px;
border: none !important;
outline: none !important;
border-radius: 20px;
background: white;
}
そして最後に、Javascriptを作りましょう.
あなたの家にこのコードを加えてください.js
function changeBg(){
document.body.style.backgroundColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}
我々はまだ行われていない、我々は我々のボタンにこの機能を追加する必要があるので、私たちがクリックすると、背景色がランダムに選択されます.
あなたは私たちのインデックスのボタンにonclick fucntionを追加するだけでこれを達成することができます.HTML .
<button onclick="changeBg()">Click Me</button>
そして今、我々は完了です!あなたがボタンをクリックするたびに色の変更を参照してくださいする必要があります.大きな仕事.
私のポストを読んでくれてありがとう.今度はあなたに会いたい.
Reference
この問題について(JSのボタンをクリックしてランダムな背景10), 我々は、より多くの情報をここで見つけました https://dev.to/vector3studio/random-background-on-clicking-button-in-js-50-js-project-challenge-1-1o7mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol