Java Script网页设计案例详解_Javascript

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>