利用jquery技术写一个父母游网页
时间: 2023-09-29 20:09:52 浏览: 72
jQuery云输入法加手写输入法特效代码
好的,我可以为您提供一些基本的代码来实现一个父母游网页,以下是示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>父母游</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>父母游</h1>
<form>
<label>您喜欢的地区:</label>
<select id="area">
<option value="0">请选择</option>
<option value="1">国内</option>
<option value="2">海外</option>
</select>
<br><br>
<label>您的预算:</label>
<input type="number" id="budget" min="0">
<br><br>
<label>您的出发时间:</label>
<input type="date" id="date">
<br><br>
<button type="button" id="submit">提交</button>
</form>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.container {
width: 60%;
margin: auto;
text-align: center;
padding: 20px;
border: 1px solid #ddd;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
label {
display: inline-block;
width: 120px;
text-align: right;
margin-right: 20px;
}
select, input {
width: 250px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
margin-top: 20px;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3E8E41;
}
```
JavaScript代码:
```
$(document).ready(function() {
$("#submit").click(function() {
var area = $("#area").val();
var budget = $("#budget").val();
var date = $("#date").val();
if (area == 0 || budget == "" || date == "") {
alert("请选择地区、输入预算和选择出发时间!");
} else {
$.ajax({
url: "response.php",
type: "POST",
data: {area: area, budget: budget, date: date},
success: function(result) {
$("#result").html(result);
}
});
}
});
});
```
以上代码实现了一个简单的父母游网页,包含一个表单和一个显示结果的区域。当用户点击提交按钮时,使用 AJAX 技术向服务器发送请求,并在返回结果后将结果显示在页面上。需要注意的是,这里使用了 jQuery 库来简化 JavaScript 代码的编写。
阅读全文