javascript 改背景

WBOY原創: 2023-05-10 09:58:36989瀏覽

在現今的網頁設計中，背景圖像是重要的設計元素。它不僅可以為網站增添美觀，還可以讓網站更有個人化，突顯網站主題，吸引更多的使用者。那麼，在這些中，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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript有多少種循環下一篇：javascript有多少種循環

看更多