javascript 改背景
- WBOY原創
- 2023-05-10 09:58:361060瀏覽
在現今的網頁設計中，背景圖像是重要的設計元素。它不僅可以為網站增添美觀，還可以讓網站更有個人化，突顯網站主題，吸引更多的使用者。那麼，在這些中，JavaScript 的作用是不可忽視的。本文將介紹如何透過 JavaScript 改變背景，來滿足不同網站的需求。
一、利用 JavaScript 透過按鈕改變背景顏色
首先，我們可以藉助 JavaScript 的事件綁定機制，透過點擊按鈕來改變網頁的背景顏色。
我們可以先在HTML 檔案中定義一個按鈕和一個頁面主體的div，這個div 代表頁面的主體，程式碼如下所示：
<!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>在上面的程式碼中，我們定義了一個按鈕和一個主體div。主體 div 的背景顏色初始化為灰色。當使用者點擊按鈕後，JavaScript 中的 changeColor 函數會被呼叫。在這個函數中，我們取得了主體 div 標籤的元素，並將其背景顏色修改為 teal。
透過這種方式，我們可以實現簡單的顏色改變，但是，每次只能改變一次顏色，無法做到動態的效果。
二、透過 setInterval 方法改變頁面背景顏色
我們可以使用 JavaScript 的 setInterval 方法來改變頁面的背景顏色，透過計時器來讓背景顏色的改變具有動態效果。程式碼如下所示：
<!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>在這段程式碼中，我們定義了兩個函數。 changeBackgroundColor 函數透過 setInterval 方法每隔一秒鐘呼叫一次 getRandomColor 函數來取得隨機顏色並將其套用到 div 元素的背景中。
getRandomColor 函數會隨機產生一個顏色值，並傳回一個 rgb 值表示的字串。每次呼叫 getRandomColor 函數後，頁面的背景顏色會隨機改變。這兩個函數的結合，可以實現頁面隨機變色的效果。
三、透過時間和日期改變背景圖片
我們可以利用時間和日期來改變網頁的背景圖片，這可以實現一種更有趣的主題風格。具體實作方法如下所示：
<!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>這段程式碼會根據當下時刻修改頁面的背景圖片。如果當前時間是晚上6 點以後，則背景圖片會選擇id 為593 的圖片，如果當前時間位於中午12 點和晚上6 點之間，則選擇id 為550 的圖片，如果當前時間是凌晨，則選擇id 為544 的圖片。
透過 JavaScript 的日期時間對象，我們可以輕鬆實現這樣的效果，讓網站更有個性。
綜上所述，透過 JavaScript，我們可以實現改變網頁背景顏色、動態隨機變色、以及根據時間日期來改變背景圖片的效果。這些方法可以讓我們更能實現自己的網站設計需求，增強網頁的個人化和吸引力，提高使用者體驗，帶來更多的流量和效益。
以上是javascript 改背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！