JavaScript网页设计案例

1、动态计数器代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态计数器</title>
</head>
<body>
    <h1>动态计数器</h1>
    <p>点击按钮增加计数：</p>
    <button onclick="incrementCounter()">点击我</button>
    <p id="counter">0</p>

    <script>
        let count = 0;

        function incrementCounter() {
            count++;
            document.getElementById("counter").innerHTML = count;
        }
    </script>
</body>
</html>

在这个例子中，我们创建了一个简单的HTML页面，包含一个标题、一个段落和一个按钮。当用户点击按钮时，会触发incrementCounter函数，该函数会增加计数器的值并更新页面上的显示。

2、动态表单验证代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Form Validation</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email">
        <div class="error" id="emailError"></div><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <div class="error" id="passwordError"></div><br>

        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Prevent form submission

            // Clear previous error messages
            document.getElementById("emailError").innerHTML = "";
            document.getElementById("passwordError").innerHTML = "";

            // Get input values
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;

            // Validate email
            if (!validateEmail(email)) {
                document.getElementById("emailError").innerHTML = "Invalid email format";
            }

            // Validate password (minimum length of 6 characters)
            if (password.length < 6) {
                document.getElementById("passwordError").innerHTML = "Password must be at least 6 characters long";
            }
        });

        function validateEmail(email) {
            var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的表单，包括一个电子邮件输入框和一个密码输入框。当用户提交表单时，JavaScript会阻止默认的表单提交行为，并执行自定义的验证逻辑。

我们定义了一个validateEmail函数来检查电子邮件是否符合常见的格式规则。如果电子邮件无效，将在对应的错误消息元素中显示错误信息。

对于密码验证，我们简单地检查密码长度是否至少为6个字符。如果不满足条件，同样会在相应的错误消息元素中显示错误信息。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的验证规则和更友好的用户界面提示。此外，为了提高用户体验，还可以考虑异步验证、实时反馈等功能。

3、实时搜索功能代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-time Search</title>
    <style>
        #results {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search...">
    <div id="results"></div>

    <script>
        document.getElementById("searchInput").addEventListener("input", function() {
            var query = this.value; // Get the search query from input field
            if (query.length > 2) { // Only perform search if query is at least 3 characters long
                search(query);
            } else {
                document.getElementById("results").innerHTML = ""; // Clear results if query is too short
            }
        });

        function search(query) {
            // Simulate an AJAX request to fetch search results
            setTimeout(function() {
                var results = ["Apple", "Banana", "Cherry", "Date", "Fig"]; // Example data for demonstration purposes
                var filteredResults = results.filter(function(item) {
                    return item.toLowerCase().includes(query.toLowerCase());
                });

                // Display the filtered results in the 'results' div
                var resultHtml = filteredResults.map(function(item) {
                    return "<p>" + item + "</p>";
                }).join("");
                document.getElementById("results").innerHTML = resultHtml;
            }, 500); // Simulate a delay of 500ms for the AJAX request
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个输入框和一个用于显示搜索结果的<div>元素。当用户在输入框中输入内容时，我们监听input事件，并在每次输入变化时调用search函数。

search函数模拟了一个异步请求（通过setTimeout来模拟延迟），然后根据用户的查询过滤一个示例数据数组，并将匹配的结果动态地显示在页面上。

请注意，这个示例仅用于演示目的，实际应用中可能需要与后端服务器进行交互以获取真实的搜索结果。此外，还可以考虑添加更多功能，如防抖（debounce）机制、错误处理等，以提高用户体验和性能。

4、交互式地图代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Map</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        function initMap() {
            var mapOptions = {
                center: {lat: -34.397, lng: 150.644}, // Set the initial map center to a specific location (e.g., Sydney)
                zoom: 8 // Set the initial zoom level
            };

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);

            // Add a marker at the specified location
            var marker = new google.maps.Marker({
                position: {lat: -34.397, lng: 150.644},
                map: map,
                title: 'Sydney'
            });
        }
    </script>

    <!-- Include the Google Maps JavaScript API -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

在这个示例中，我们创建了一个<div>元素用于显示地图，并在页面加载时调用initMap函数来初始化地图。在initMap函数中，我们设置了地图的中心点和缩放级别，并创建了一个标记（marker）以显示在地图上。

请注意，您需要将YOUR_API_KEY替换为您自己的Google Maps API密钥。您可以从Google Cloud Console获取API密钥，并将其添加到脚本标签的URL参数中。

这个示例仅展示了如何在地图上添加一个标记，但Google Maps API提供了许多其他功能，如绘制路径、添加多边形、自定义信息窗口等。您可以根据项目需求进一步扩展和定制地图的功能。

5、无限滚动加载代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Scroll</title>
    <style>
        #content {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- Content will be loaded here -->
    </div>

    <script>
        var content = document.getElementById("content");
        var itemCount = 0;

        function loadMoreItems() {
            for (var i = 0; i < 10; i++) { // Load 10 items at a time
                var newItem = document.createElement("div");
                newItem.className = "item";
                newItem.innerHTML = "Item " + (++itemCount);
                content.appendChild(newItem);
            }
        }

        function checkScrollPosition() {
            var scrollHeight = content.scrollHeight;
            var clientHeight = content.clientHeight;
            var scrollTop = content.scrollTop;

            if (scrollTop + clientHeight >= scrollHeight) {
                loadMoreItems(); // Load more items when the user reaches the bottom of the content area
            }
        }

        content.addEventListener("scroll", checkScrollPosition);
        loadMoreItems(); // Initially load some items
    </script>
</body>
</html>

在这个示例中，我们创建了一个具有固定高度和滚动条的<div>元素（#content），用于显示内容。当用户滚动到底部时，我们将加载更多的项目。

我们定义了两个函数：loadMoreItems用于加载更多项目，并将它们添加到#content元素中；checkScrollPosition用于检查用户的滚动位置，并在到达底部时调用loadMoreItems函数。

在页面加载时，我们首先调用loadMoreItems函数以加载一些初始项目。然后，我们为#content元素添加一个滚动事件监听器，以便在用户滚动时调用checkScrollPosition函数。

请注意，这个示例仅展示了基本的无限滚动加载逻辑。实际应用中可能需要处理更复杂的场景，如异步加载数据、错误处理等。此外，还可以考虑使用第三方库（如jQuery Infinite Scroll插件）来简化实现过程。

6、单页面应用（SPA）代码

单页面应用（SPA）是一种Web应用程序，它通过动态更新当前页面的内容来提供类似于桌面应用程序的用户体验。以下是一个简单的单页面应用示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
    <style>
        /* Add your CSS styles here */
    </style>
</head>
<body>
    <div id="app">
        <!-- Content will be dynamically loaded here -->
    </div>

    <script>
        // JavaScript code for the Single Page Application

        // Function to load content based on the URL hash
        function loadContent() {
            var hash = window.location.hash.substr(1); // Get the hash from the URL
            var contentElement = document.getElementById('app'); // Get the app container element

            switch (hash) {
                case 'home':
                    contentElement.innerHTML = '<h1>Welcome to Home Page</h1>';
                    break;
                case 'about':
                    contentElement.innerHTML = '<h1>About Us</h1><p>This is the about page.</p>';
                    break;
                case 'contact':
                    contentElement.innerHTML = '<h1>Contact Us</h1><p>Email: info@example.com</p>';
                    break;
                default:
                    contentElement.innerHTML = '<h1>404 Not Found</h1><p>The requested page does not exist.</p>';
                    break;
            }
        }

        // Load initial content when the page loads
        window.addEventListener('load', loadContent);

        // Update content when the URL hash changes
        window.addEventListener('hashchange', loadContent);
    </script>
</body>
</html>

在这个示例中，我们使用JavaScript来根据URL中的哈希值（#home、#about、#contact等）动态加载不同的内容到#app元素中。当用户点击导航链接或手动更改URL时，浏览器会触发hashchange事件，然后重新调用loadContent函数以更新页面内容。

请注意，这只是一个简单的示例，实际的单页面应用可能会涉及更复杂的路由处理、状态管理、数据获取等功能。在实际项目中，您可能需要使用前端框架（如React、Vue或Angular）来构建更强大和可维护的单页面应用。

JavaScript网页设计案例

1、动态计数器代码

2、动态表单验证代码

3、 实时搜索功能代码

4、交互式地图代码

5、无限滚动加载代码

6、单页面应用（SPA）代码

3、实时搜索功能代码