javascript网页设计案例

七夜zippoe

于 2024-10-10 08:49:14 发布

阅读量500

点赞数 3

分类专栏：前端 # JavaScript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/sinat_41617212/article/details/142810836

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

JavaScript 是网页设计中最重要的前端开发语言之一，可以用于创建动态和交互式的网页功能。以下是一个简单的 JavaScript 网页设计案例，它展示了如何使用 JavaScript 进行动态内容更新和用户交互。

案例：互动的天气小部件

功能描述：

用户输入一个城市名称。
点击“获取天气”按钮后，网页会显示该城市的当前天气信息（模拟数据）。
如果输入为空，则提示用户输入城市名称。

技术栈：

HTML：定义页面结构。
CSS：设置页面样式。
JavaScript：实现交互和数据更新。

1. HTML 部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气小部件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>天气小部件</h1>
        <input type="text" id="city" placeholder="请输入城市名称">
        <button id="getWeather">获取天气</button>
        <p id="weatherInfo"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS 部分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#weatherInfo {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

3. JavaScript 部分

// 获取页面元素
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherInfo = document.getElementById('weatherInfo');

// 模拟天气数据
const mockWeatherData = {
    "北京": "晴天，温度 18°C",
    "上海": "多云，温度 22°C",
    "广州": "小雨，温度 25°C"
};

// 点击获取天气按钮后的事件处理函数
getWeatherButton.addEventListener('click', function() {
    const city = cityInput.value.trim();
    
    if (city === "") {
        weatherInfo.textContent = "请输入城市名称";
        weatherInfo.style.color = "red";
    } else if (mockWeatherData[city]) {
        weatherInfo.textContent = `当前${city}的天气：${mockWeatherData[city]}`;
        weatherInfo.style.color = "black";
    } else {
        weatherInfo.textContent = `抱歉，${city}的天气信息不可用`;
        weatherInfo.style.color = "orange";
    }
});

4. 案例分析

HTML 部分：使用了一个简单的表单输入和按钮来让用户输入城市名称，并通过 <p> 标签展示天气信息。
CSS 部分：设置了页面布局、颜色、按钮样式，使网页看起来简洁、现代。
JavaScript 部分：
1. 通过 document.getElementById 获取输入框、按钮和展示信息的元素。
2. 为按钮绑定点击事件（addEventListener），获取用户输入的城市名称。
3. 使用一个模拟的天气数据对象 mockWeatherData，根据用户输入的城市名称显示相应的天气信息。
4. 处理输入为空的情况，显示提示信息。