快捷導(dǎo)航

Java?Script網(wǎng)頁設(shè)計案例詳解

更新時間：2024年08月30日 17:38:16 作者：TechSynapse

下面我將提供一個簡單的JavaScript網(wǎng)頁設(shè)計案例,該案例將實(shí)現(xiàn)一個動態(tài)的待辦事項(xiàng)列表（Todo List）,用戶可以在頁面上添加新的待辦事項(xiàng),標(biāo)記它們?yōu)橐淹瓿?以及刪除它們,這篇文章主要介紹了Java?Script網(wǎng)頁設(shè)計案例,需要的朋友可以參考下

1. JavaScript網(wǎng)頁設(shè)計案例

下面我將提供一個簡單的JavaScript網(wǎng)頁設(shè)計案例，該案例將實(shí)現(xiàn)一個動態(tài)的待辦事項(xiàng)列表（Todo List）。用戶可以在頁面上添加新的待辦事項(xiàng)，標(biāo)記它們?yōu)橐淹瓿?，以及刪除它們。這個案例將使用HTML來構(gòu)建頁面結(jié)構(gòu)，CSS來美化頁面，以及JavaScript來添加動態(tài)功能。

1.1 HTML (index.html)

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Todo List</title>  
    <link rel="stylesheet" href="style.css" rel="external nofollow" >  
</head>  
<body>  
    <h1>Todo List</h1>  
    <input type="text" id="todoInput" placeholder="Add new todo...">  
    <button onclick="addTodo()">Add Todo</button>  
    <ul id="todoList">  
        <!-- Todo items will be added here -->  
    </ul>  
    <script src="script.js"></script>  
</body>  
</html>

1.2 CSS (style.css)

body {  
    font-family: Arial, sans-serif;  
    margin: 20px;  
    padding: 0;  
}  
#todoList {  
    list-style-type: none;  
    padding: 0;  
}  
#todoList li {  
    margin: 10px 0;  
    padding: 10px;  
    background-color: #f4f4f4;  
    border: 1px solid #ddd;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  
#todoList li.completed {  
    text-decoration: line-through;  
    opacity: 0.5;  
}  
#todoInput {  
    padding: 10px;  
    margin-right: 10px;  
    width: calc(100% - 120px);  
}  
button {  
    padding: 10px 20px;  
    cursor: pointer;  
}

1.3 JavaScript (script.js)

function addTodo() {  
    const input = document.getElementById('todoInput');  
    const list = document.getElementById('todoList');  
    const itemText = input.value.trim();  
    if (itemText) {  
        const itemElement = document.createElement('li');  
        itemElement.textContent = itemText;  
        // Checkbox for marking todo as completed  
        const checkbox = document.createElement('input');  
        checkbox.type = 'checkbox';  
        checkbox.onclick = function() {  
            itemElement.classList.toggle('completed', this.checked);  
        };  
        // Button for deleting todo  
        const deleteButton = document.createElement('button');  
        deleteButton.textContent = 'Delete';  
        deleteButton.onclick = function() {  
            list.removeChild(itemElement);  
        };  
        // Append elements to the list item  
        itemElement.appendChild(checkbox);  
        itemElement.appendChild(document.createTextNode('\u00A0')); // Add space  
        itemElement.appendChild(deleteButton);  
        // Append list item to the list  
        list.appendChild(itemElement);  
        // Clear input field  
        input.value = '';  
    }  
}  
// Optionally, add event listener to input field for Enter key press  
document.getElementById('todoInput').addEventListener('keypress', function(event) {  
    if (event.key === 'Enter') {  
        addTodo();  
    }  
});

1.4說明

（1）HTML 部分定義了頁面的基本結(jié)構(gòu)，包括一個輸入框用于輸入待辦事項(xiàng)，一個按鈕用于添加待辦事項(xiàng)，以及一個無序列表用于顯示待辦事項(xiàng)。

（2）CSS 部分美化了頁面，包括待辦事項(xiàng)列表的樣式、輸入框和按鈕的樣式。

（3）JavaScript 部分實(shí)現(xiàn)了動態(tài)功能：

監(jiān)聽“添加待辦事項(xiàng)”按鈕的點(diǎn)擊事件，并調(diào)用 addTodo 函數(shù)。
addTodo 函數(shù)從輸入框中獲取文本，創(chuàng)建一個新的列表項(xiàng)，并為其添加復(fù)選框和刪除按鈕。
復(fù)選框用于標(biāo)記待辦事項(xiàng)為已完成，點(diǎn)擊時切換列表項(xiàng)的樣式。
刪除按鈕用于從列表中刪除待辦事項(xiàng)。
監(jiān)聽輸入框的 keypress 事件，以便在按下 Enter 鍵時也能添加待辦事項(xiàng)。

這個案例展示了如何使用HTML、CSS和JavaScript來創(chuàng)建一個具有基本動態(tài)功能的網(wǎng)頁應(yīng)用。

2. JavaScript網(wǎng)頁設(shè)計案例不同的功能和設(shè)計思路展示

除了上述的待辦事項(xiàng)列表案例外，還有許多其他類似的JavaScript網(wǎng)頁設(shè)計案例，這些案例展示了不同的功能和設(shè)計思路。以下是一些常見的案例及其簡要描述：

2.1 圖片畫廊（Image Gallery）

（1）功能描述：

展示一組圖片，并支持點(diǎn)擊放大查看。
使用HTML和CSS創(chuàng)建圖片網(wǎng)格布局。
使用JavaScript處理圖片點(diǎn)擊事件，顯示放大的圖片。

（2）代碼示例（簡化版）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Image Gallery</title>  
    <style>  
        .gallery img {  
            width: 100px; /* 或其他尺寸 */  
            height: auto;  
            margin: 10px;  
            cursor: pointer;  
        }  
        .modal {  
            display: none;  
            position: fixed;  
            z-index: 1;  
            /* 其他模態(tài)框樣式 */  
        }  
        .modal-content {  
            /* 放大圖片的樣式 */  
        }  
    </style>  
</head>  
<body>  
<div class="gallery">  
    <img src="image1.jpg" alt="Image 1">  
    <img src="image2.jpg" alt="Image 2">  
    <!-- 更多圖片 -->  
</div>  
<div id="modal" class="modal">  
    <span class="close">&times;</span>  
    <img class="modal-content" id="modalImg">  
</div>  
<script>  
    // JavaScript 代碼，用于處理點(diǎn)擊事件和顯示模態(tài)框  
    // ...（省略詳細(xì)實(shí)現(xiàn)）  
</script>  
</body>  
</html>

2.2 簡易天氣應(yīng)用（Weather App）

（1）功能描述：

獲取并顯示天氣信息。
使用天氣API（如OpenWeatherMap）獲取實(shí)時天氣數(shù)據(jù)。
使用JavaScript動態(tài)更新頁面內(nèi)容。

（2）代碼示例（簡化版，需要替換API密鑰）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Weather App</title>  
</head>  
<body>  
<h1>Weather App</h1>  
<input type="text" id="cityInput" placeholder="Enter city">  
<button id="getWeather">Get Weather</button>  
<div id="weatherResult"></div>  
<script>  
    const apiKey = 'YOUR_API_KEY'; // 替換為你的API密鑰  
    document.getElementById('getWeather').onclick = function() {  
        const city = document.getElementById('cityInput').value;  
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)  
            .then(response => response.json())  
            .then(data => {  
                const temp = data.main.temp;  
                const weatherDescription = data.weather[0].description;  
                document.getElementById('weatherResult').innerHTML = `Temperature: ${temp}°C<br>Description: ${weatherDescription}`;  
            })  
            .catch(error => {  
                document.getElementById('weatherResult').innerHTML = 'City not found.';  
            });  
    };  
</script>  
</body>  
</html>

2.3 動態(tài)表格（Dynamic Table）

（1）功能描述：

展示一個表格，表格內(nèi)容可以動態(tài)添加、刪除或修改。
使用HTML創(chuàng)建表格結(jié)構(gòu)。
使用JavaScript處理數(shù)據(jù)的增刪改操作，并動態(tài)更新表格內(nèi)容。

（2）代碼示例（由于篇幅限制，僅提供概念性描述）：

創(chuàng)建一個HTML表格，包含表頭和若干行。
使用JavaScript添加按鈕或輸入框，以便用戶輸入新數(shù)據(jù)。
編寫JavaScript函數(shù)來處理添加、刪除和修改數(shù)據(jù)的邏輯。
使用DOM操作動態(tài)更新表格內(nèi)容。

這些案例涵蓋了網(wǎng)頁設(shè)計的不同方面，從基本的圖片展示到實(shí)用的天氣查詢，再到動態(tài)的數(shù)據(jù)處理。它們都是學(xué)習(xí)JavaScript網(wǎng)頁開發(fā)的良好起點(diǎn)，并可以根據(jù)實(shí)際需求進(jìn)行擴(kuò)展和定制。

到此這篇關(guān)于Java Script網(wǎng)頁設(shè)計案例的文章就介紹到這了,更多相關(guān)Java Script網(wǎng)頁設(shè)計案例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: