Java Script网页设计案例详解

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

下面我将提供一个简单的JavaScript网页设计案例,该案例将实现一个动态的待办事项列表（Todo List）,用户可以在页面上添加新的待办事项,标记它们为已完成,以及删除它们,这篇文章主要介绍了Java Script网页设计案例,需要的朋友可以参考下

1. JavaScript网页设计案例

下面我将提供一个简单的JavaScript网页设计案例，该案例将实现一个动态的待办事项列表（Todo List）。用户可以在页面上添加新的待办事项，标记它们为已完成，以及删除它们。这个案例将使用HTML来构建页面结构，CSS来美化页面，以及JavaScript来添加动态功能。

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 部分定义了页面的基本结构，包括一个输入框用于输入待办事项，一个按钮用于添加待办事项，以及一个无序列表用于显示待办事项。

（2）CSS 部分美化了页面，包括待办事项列表的样式、输入框和按钮的样式。

（3）JavaScript 部分实现了动态功能：

监听“添加待办事项”按钮的点击事件，并调用 addTodo 函数。
addTodo 函数从输入框中获取文本，创建一个新的列表项，并为其添加复选框和删除按钮。
复选框用于标记待办事项为已完成，点击时切换列表项的样式。
删除按钮用于从列表中删除待办事项。
监听输入框的 keypress 事件，以便在按下 Enter 键时也能添加待办事项。

这个案例展示了如何使用HTML、CSS和JavaScript来创建一个具有基本动态功能的网页应用。

2. JavaScript网页设计案例不同的功能和设计思路展示

除了上述的待办事项列表案例外，还有许多其他类似的JavaScript网页设计案例，这些案例展示了不同的功能和设计思路。以下是一些常见的案例及其简要描述：

2.1 图片画廊（Image Gallery）

（1）功能描述：

展示一组图片，并支持点击放大查看。
使用HTML和CSS创建图片网格布局。
使用JavaScript处理图片点击事件，显示放大的图片。

（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;  
            /* 其他模态框样式 */  
        }  
        .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 代码，用于处理点击事件和显示模态框  
    // ...（省略详细实现）  
</script>  
</body>  
</html>

2.2 简易天气应用（Weather App）

（1）功能描述：

获取并显示天气信息。
使用天气API（如OpenWeatherMap）获取实时天气数据。
使用JavaScript动态更新页面内容。

（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 动态表格（Dynamic Table）

（1）功能描述：

展示一个表格，表格内容可以动态添加、删除或修改。
使用HTML创建表格结构。
使用JavaScript处理数据的增删改操作，并动态更新表格内容。

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

创建一个HTML表格，包含表头和若干行。
使用JavaScript添加按钮或输入框，以便用户输入新数据。
编写JavaScript函数来处理添加、删除和修改数据的逻辑。
使用DOM操作动态更新表格内容。

这些案例涵盖了网页设计的不同方面，从基本的图片展示到实用的天气查询，再到动态的数据处理。它们都是学习JavaScript网页开发的良好起点，并可以根据实际需求进行扩展和定制。

到此这篇关于Java Script网页设计案例的文章就介绍到这了,更多相关Java Script网页设计案例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用JavaScript实现网页版Pongo设计思路及源代码分享

js实现有时间限制消失的图片方法
这篇文章主要介绍了js实现有时间限制消失的图片方法,实例分析了javascript操作setTimeout及图片特效操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JS获取短信验证码倒计时的实现代码
这篇文章主要介绍了JS获取短信验证码倒计时的实现代码,需要的朋友可以参考下
2017-05-05
微信小程序实现蓝牙设备搜索及连接功能示例详解
这篇文章主要介绍了微信小程序实现蓝牙设备搜索及连接功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
基于JavaScript实现拖动滑块效果
这篇文章主要为大家详细介绍了基于JavaScript实现拖动滑块效果，拖动滑块时数字进行变化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
使用javascript实现页面定时跳转总结篇
下面对使用JavaScript实现页面定时跳转做一下总结，各种定时跳转代码记录如下，希望对大家有所帮助
2013-09-09
当前页禁止复制粘贴截屏代码小集
本文为大家详细介绍下禁止截屏，通过清除剪切板实现、禁止复制、禁止右键菜单、禁止网页另存为等等，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
Laravel中常见的错误与解决方法小结
大家在用Laravel框架期间可能会遇到了不少问题，现在我将自己遇到的一些问题总结出来，有一些调试起来着实不太容易，本文筛选出几个，希望这篇文章能让大家在PHP开发中少走一些弯路。
2016-08-08
JavaScript中call、apply、bind实现原理详解
其实在很多文章都会写call，apply，bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下
2021-06-06
jQuery ajax(复习)—Baidu ajax request分离版
你没有看错标题，本文的确是在讲Baidu ajax，不过是很久很久以前的版本了,我们先分析一段简单的ajax代码，来自早期的百度七巧板项目通过这个来先复习一遍ajax的知识
2013-01-01
javascript+html5+css3自定义弹出窗口效果
这篇文章主要为大家详细介绍了javascript+html5+css3自定义弹出窗口效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10