Cara Membuat Random Color di HTML

- Oktober 23, 2022

Assalamualaikum, Hai sobat, kembali lagi bersama saya. kali ini saya ngak ngapa-ngapain karna saya bosen jadi saya membuat RANDOM COLOR saja sebagai pengisi waktu luang bagi temen-temen yang mau kodenya bisa lihat kode nya paling bawah. ok

Ini adalah contoh sederhana yang saya gunakan. untuk properti javascript RANDOM kegunaan nya lebih dari ini masih banayak lagi. dan salah satunya seperti ini.

Random Color

Empty

Hasil

Belum Ada Hasil

Diatas adalah contoh Random color yang saya gunakan. untuk temen temen yang mau mendisain random color seperti saya, ini kodenya.

《

Download Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Random Color </title>
</head>
<body>

<div id="container_color">
<h2>Random Color</h2>
<p id="hasil">Empty</p>
<button type="submit" onclick="klik()">Refresh</button>
</div>
<p class="hasil-name">Hasil</p>
<div id="container_hasil"><h2 class="hasil_akhir_name">Belum Ada Hasil</h2></div>

<style>
h2:nth-child(1){
text-align: center;
}
#container_color,#container_hasil{
width: 200px;
height: 100px;
background-color: #ccc;
border-radius: 10px;
text-align: center;
border: 2px solid lime;
margin: 0 auto;
}
#container_hasil{
margin-top: 20px;
background-color: white;
border-color: black;
}
#container_hasil h2{
margin-top: 30px;
color: black;
}
.hasil-name{
text-align: center;
font-weight: bold;
font-size: 25px;
}
#container_color h2{
margin: 0;
}
#container_color button{
border-radius: 5px;
border: 2px solid black;
padding: 5px;
text-align: center;
font-weight: bold;
width: 100px;
position: relative;
bottom: 15px;
}
#container_color p{
position: relative;
bottom: 10px;
}
button:active{
transition: 0.5s;
transform: scale(90%);
}
</style>

<script type="text/javascript" charset="utf-8">

var hasil = document.querySelector("#hasil");
var container_hasil = document.querySelector("#container_hasil");
function klik(){
var c = Math.random().toString(16).substr(2,6);
container_hasil.style.background= "#" + c;
hasil.innerHTML= "#" + c;

if(c.length > 5){
document.querySelector(".hasil_akhir_name").innerHTML="";
}
}
</script>
</body>
</html>

Perludiketahui bahwa saya bila gak ada kerjaan biasanya saya membuat artikel random seperti ini.

Mungkin saya akhiri sampai disini, okeh. dan bila ada kesalahan atau bug dan yanglain kalian bisa komen di bawah.

Cari Blog Ini

MZElektronik