编写借阅书籍的前端html页面文件,具有填写读者账号,填写读者姓名,填写读者电话,添加书籍(可以多个,并且可以右搜索框),选择借书日期及归还日期的日期时间选择框,还有选择借阅书籍的当前状态的单选框(包括待借阅,已借阅,已归还,默认待借阅)和续借状态的单选框(包括非续借,已续借)
时间: 2024-05-24 20:12:24 浏览: 54
<!DOCTYPE html>
<html>
<head>
<title>借阅书籍</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>借阅书籍</h1>
<form>
<label for="account">读者账号:</label>
<input type="text" id="account" name="account"><br><br>
<label for="name">读者姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="phone">读者电话:</label>
<input type="text" id="phone" name="phone"><br><br>
<label for="books">添加书籍:</label>
<input type="text" id="books" name="books">
<button type="button" onclick="addBook()">添加</button>
<ul id="bookList"></ul>
<label for="borrowDate">借书日期:</label>
<input type="datetime-local" id="borrowDate" name="borrowDate"><br><br>
<label for="returnDate">归还日期:</label>
<input type="datetime-local" id="returnDate" name="returnDate"><br><br>
<label for="status">当前状态:</label>
<input type="radio" id="status1" name="status" value="待借阅" checked>
<label for="status1">待借阅</label>
<input type="radio" id="status2" name="status" value="已借阅">
<label for="status2">已借阅</label>
<input type="radio" id="status3" name="status" value="已归还">
<label for="status3">已归还</label><br><br>
<label for="renewal">续借状态:</label>
<input type="radio" id="renewal1" name="renewal" value="非续借" checked>
<label for="renewal1">非续借</label>
<input type="radio" id="renewal2" name="renewal" value="已续借">
<label for="renewal2">已续借</label><br><br>
<button type="submit">提交</button>
</form>
<script>
function addBook() {
var bookInput = document.getElementById("books");
var bookList = document.getElementById("bookList");
var book = bookInput.value;
if (book === "") {
alert("请输入书籍名称");
} else {
var li = document.createElement("li");
li.innerHTML = book + " <button type='button' onclick='removeBook(this)'>删除</button>";
bookList.appendChild(li);
bookInput.value = "";
}
}
function removeBook(btn) {
var li = btn.parentNode;
var bookList = li.parentNode;
bookList.removeChild(li);
}
</script>
</body>
</html>
阅读全文