Rumah > Artikel > hujung hadapan web > javascript menukar latar belakang
javascript menukar latar belakang
- WBOYasal
- 2023-05-10 09:58:36989semak imbas
Dalam reka bentuk web hari ini, imej latar belakang merupakan elemen reka bentuk yang penting. Ia bukan sahaja boleh menambah keindahan pada laman web, tetapi juga menjadikan laman web lebih diperibadikan, menyerlahkan tema laman web, dan menarik lebih ramai pengguna. Nah, antara ini, peranan JavaScript tidak boleh diabaikan. Artikel ini akan memperkenalkan cara menukar latar belakang melalui JavaScript untuk memenuhi keperluan tapak web yang berbeza.
1. Gunakan JavaScript untuk menukar warna latar belakang melalui butang
Pertama sekali, kami boleh menggunakan mekanisme pengikatan acara JavaScript untuk menukar warna latar belakang halaman web dengan mengklik butang.
Kita boleh mentakrifkan butang dan div badan halaman terlebih dahulu dalam fail HTML Div ini mewakili badan halaman Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 改变背景</title>
<style>
#main {
width: 100%;
height: 100%;
background-color: gray;
}
</style>
</head>
<body>
<button onclick="changeColor()">改变背景颜色</button>
<div id="main">
<h1>欢迎来到我的博客</h1>
<p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
</div>
<script>
function changeColor() {
var main = document.getElementById("main");
main.style.backgroundColor = "teal";
}
</script>
</body>
</html>Dalam kod di atas , kami mentakrifkan butang A dan div badan. Warna latar belakang div badan dimulakan kepada kelabu. Apabila pengguna mengklik butang, fungsi changeColor dalam JavaScript dipanggil. Dalam fungsi ini, kami mendapat elemen teg div badan dan menukar warna latar belakangnya kepada teal.
Dengan cara ini, kita boleh mencapai perubahan warna yang mudah, tetapi warna hanya boleh ditukar sekali pada satu masa dan kesan dinamik tidak boleh dicapai.
2. Tukar warna latar belakang halaman melalui kaedah setInterval
Kita boleh menggunakan kaedah setInterval JavaScript untuk menukar warna latar belakang halaman dan menggunakan pemasa untuk membuat latar belakang dinamik perubahan warna. Kodnya kelihatan seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Javascript改变背景</title>
<style>
#main {
width: 100%;
height: 100%;
background-color: gray;
}
</style>
</head>
<body>
<button onclick="changeBackgroundColor()">改变背景颜色</button>
<div id="main">
<h1>欢迎来到我的博客</h1>
<p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
</div>
<script>
function changeBackgroundColor() {
setInterval(function() {
var main = document.getElementById('main');
main.style.backgroundColor = getRandomColor();
}, 1000);
}
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>Dalam kod ini, kami mentakrifkan dua fungsi. Fungsi changeBackgroundColor memanggil fungsi getRandomColor setiap satu saat melalui kaedah setInterval untuk mendapatkan warna rawak dan menerapkannya pada latar belakang elemen div.
Fungsi getRandomColor menjana nilai warna secara rawak dan mengembalikan rentetan yang diwakili oleh nilai rgb. Selepas setiap panggilan ke fungsi getRandomColor, warna latar belakang halaman akan berubah secara rawak. Gabungan kedua-dua fungsi ini boleh mencapai kesan perubahan warna rawak pada halaman.
3. Tukar imej latar belakang mengikut masa dan tarikh
Kita boleh menggunakan masa dan tarikh untuk menukar imej latar belakang halaman web, yang boleh mencapai gaya tema yang lebih menarik. Kaedah pelaksanaan khusus adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Javascript改变背景</title>
<style>
#main {
width: 100%;
height: 100%;
background-image: url('https://picsum.photos/1024/768');
background-size: cover;
}
</style>
</head>
<body>
<div id="main">
<h1>欢迎来到我的博客</h1>
<p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
</div>
<script>
var today = new Date();
var hourNow = today.getHours();
if (hourNow > 18) {
document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=593')";
document.getElementById("main").style.backgroundSize = "cover";
} else if (hourNow > 12) {
document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=550')";
document.getElementById("main").style.backgroundSize = "cover";
} else if (hourNow > 0) {
document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=544')";
document.getElementById("main").style.backgroundSize = "cover";
} else {
document.getElementById("main").style.backgroundColor = "black";
}
</script>
</body>
</html>Kod ini akan mengubah suai imej latar belakang halaman berdasarkan detik semasa. Jika masa semasa adalah selepas 6 petang, imej latar belakang akan memilih imej dengan id 593. Jika masa semasa adalah antara 12 tengah hari dan 6 petang, imej dengan id 550 akan dipilih Jika masa semasa adalah awal pagi, maka imej dengan id 550 akan dipilih.
Melalui objek tarikh dan masa JavaScript, kami boleh mencapai kesan ini dengan mudah untuk menjadikan tapak web lebih diperibadikan.
Ringkasnya, melalui JavaScript, kita boleh mencapai kesan menukar warna latar belakang halaman web, menukar warna secara dinamik secara rawak dan menukar imej latar belakang berdasarkan masa dan tarikh. Kaedah ini membolehkan kami merealisasikan keperluan reka bentuk tapak web kami dengan lebih baik, meningkatkan pemperibadian dan daya tarikan halaman web, meningkatkan pengalaman pengguna dan membawa lebih banyak trafik dan hasil.
Atas ialah kandungan terperinci javascript menukar latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!