酷代码 AI
菜单
全部AI  /  AI写代码神器
服务商

web中用css样式和html样式和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,用户可以输入目的地进行搜索,然后展示搜索结果,并可以点击结果列表中的项获取详细信息。这只是一个简单的示例,并没有真正的后端搜索功能,只是用一个静态的结果列表代替。在实际应用中,需要与后端交互来获取和显示真实的数据。 [2024-06-20 12:04:38 | AI写代码神器 | 1695点数解答]

热门AI查看更多
“AI写代码神器”擅长各种语言编程、解释代码、注解补充。 在这里填写你的问题。如:写出java冒泡排序算法。
一个入口掌握所有。 在这输入任何问题,或者要AI输出的内容。
将阿拉伯数字转为人明币大写,如:数字1000转换为壹仟。
AI生成爆文标题,能够快速创作出极具吸引力的标题,促使短视频、自媒体文章的点击率与阅读量迅猛攀升。 此处填写一个原始标题,如:一般人怎样打理自身的社交圈?
AI生成新闻评论。 在这里填入新闻内容。
AI生成内容摘要。 在此处填入需要生成摘要的内容,还可以输入4000字。
AI生成主持词,擅长团建、年会、婚礼、节日等场合的主持词编写。 在这里填入主持场景,如:运动会
AI快速生成周报、月报、日报、年终总结等各类总结报告。 在这里简单输入工作目标、指标、成果,没有任何格式或特殊需求。如:计划年销售业绩1000万,实际完成800万。
输入一个字,显示以这个字开头的歇后语
输入一个字,显示以这个字开头的成语
极速在线生成证件照
极速更换证件照红、蓝、白底色
实用工具查看更多
阿里云99元2核2G服务器/年,199元2核4G服务器随心买。
今日油价 [生活类]
全国各省油价,实时更新。
图片互转base64 [开发类]
将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。
时间转换器 [开发类]
时间戳转换器,时间、毫秒、秒、倒计时查看
录入名字、电话、邮箱、个人介绍信息,生成二维码,可通过此码扫码添加微信联系人
数独游戏 [娱乐类]
数独(Sudoku)是经典的9x9数字逻辑谜题。在有81个小格的九宫格内,玩家依据初始数字推理填入1 - 9的数字,要保证每行、每列以及每个3x3宫格中的数字都不重复。这款在线数独游戏有多难度可选,没有头绪时,可以点开答案看一下哦^_^
经典推箱子 [娱乐类]
基于H5的经典推箱子小游戏,锻炼玩家的眼力和反应力,非常不错
AI摸鱼五子棋 [娱乐类]
基于H5的五子棋人机对练,锻炼玩家的眼力和反应力,非常不错
相关提问