超详细！用 HTML、CSS 和 JavaScript 设计旅游 App 高级代码示例

以下是一个简单的旅游app的HTML、CSS和JavaScript代码示例： HTML： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旅游App</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>旅游App</h1> </header> <div id="main"> <div id="search"> <input type="text" id="destination" placeholder="目的地"> <button id="search-btn">搜索</button> </div> <div id="results"> <h2>搜索结果:</h2> <ul id="destination-list"></ul> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS（style.css）： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } #main { padding: 20px; } #search { margin-bottom: 20px; } #destination { width: 200px; padding: 10px; } #search-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; cursor: pointer; } #results { display: none; } #results h2 { margin-bottom: 10px; } #destination-list li { margin-bottom: 5px; cursor: pointer; } ``` JavaScript（script.js）： ```javascript document.getElementById("search-btn").addEventListener("click", function() { var destination = document.getElementById("destination").value; search(destination); }); document.getElementById("destination-list").addEventListener("click", function(e) { var selectedDestination = e.target.innerText; alert("You have selected " + selectedDestination); }); function search(destination) { // 使用Ajax或其他方式进行后端搜索，并返回结果 var results = ["北京", "上海", "广州", "深圳", "成都", "杭州"]; showResults(results); } function showResults(results) { var destinationList = document.getElementById("destination-list"); destinationList.innerHTML = ""; for (var i = 0; i < results.length; i++) { var listItem = document.createElement("li"); listItem.innerText = results[i]; destinationList.appendChild(listItem); } document.getElementById("results").style.display = "block"; } ``` 以上代码实现了一个简单的旅游app，用户可以输入目的地进行搜索，然后展示搜索结果，并可以点击结果列表中的项获取详细信息。这只是一个简单的示例，并没有真正的后端搜索功能，只是用一个静态的结果列表代替。在实际应用中，需要与后端交互来获取和显示真实的数据。 ######[AI写代码神器 | 1695点数解答 | 2024-06-20 12:04:38]

服务商

更多选项

快捷项

自定义