制作一个基于html、css、js的具有登录、注册、上传和下载图片功能的个人博客网页,css和js采用外部引入的方式,并写出完整的html代码、css代码和js代码
时间: 2024-03-07 19:48:26 浏览: 17
好的,下面是一个基于 HTML、CSS、JS 的具有登录、注册、上传和下载图片功能的个人博客网页的完整代码。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人博客</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- 登录表单 -->
<div id="login-form" class="form-container">
<h2>登录</h2>
<form>
<div class="form-group">
<label for="login-username">用户名</label>
<input type="text" class="form-control" id="login-username" required>
</div>
<div class="form-group">
<label for="login-password">密码</label>
<input type="password" class="form-control" id="login-password" required>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
<p>还没有账号?<a href="#" id="show-register-form">注册</a></p>
</div>
<!-- 注册表单 -->
<div id="register-form" class="form-container">
<h2>注册</h2>
<form>
<div class="form-group">
<label for="register-username">用户名</label>
<input type="text" class="form-control" id="register-username" required>
</div>
<div class="form-group">
<label for="register-password">密码</label>
<input type="password" class="form-control" id="register-password" required>
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
<p>已有账号?<a href="#" id="show-login-form">登录</a></p>
</div>
<!-- 上传图片表单 -->
<div id="upload-form" class="form-container">
<h2>上传图片</h2>
<form enctype="multipart/form-data">
<div class="form-group">
<label for="upload-file">选择图片</label>
<input type="file" class="form-control-file" id="upload-file" accept="image/*" required>
</div>
<button type="submit" class="btn btn-primary">上传</button>
</form>
</div>
<!-- 图片列表 -->
<div id="image-list"></div>
</div>
<!-- JS 引入 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
display: none;
}
#image-list {
margin-top: 50px;
}
.image-container {
margin: 10px;
display: inline-block;
}
.image-container img {
max-width: 200px;
max-height: 200px;
}
```
JS 代码:
```js
// 显示登录表单
$("#show-login-form").click(function(e) {
e.preventDefault();
$("#register-form").hide();
$("#login-form").show();
});
// 显示注册表单
$("#show-register-form").click(function(e) {
e.preventDefault();
$("#login-form").hide();
$("#register-form").show();
});
// 登录表单提交
$("#login-form form").submit(function(e) {
e.preventDefault();
// TODO: 登录验证
Swal.fire("登录成功!", "", "success");
});
// 注册表单提交
$("#register-form form").submit(function(e) {
e.preventDefault();
// TODO: 注册验证
Swal.fire("注册成功!", "", "success");
});
// 上传图片表单提交
$("#upload-form form").submit(function(e) {
e.preventDefault();
var file = $("#upload-file")[0].files[0];
if (!file) {
Swal.fire("请选择要上传的图片!", "", "error");
return;
}
// TODO: 图片上传
Swal.fire("上传成功!", "", "success");
});
// 加载图片列表
$(function() {
// TODO: 加载图片列表
$("#image-list").html("<p>暂无图片</p>");
});
```
这个示例代码中,使用了 Bootstrap 和 SweetAlert2 库来美化页面和显示弹窗消息。实际开发中,可以根据自己的需求选择使用或不使用这些库。