JS+CSS做一个模拟发短信的页面!

最近在学习JS,刚试着做了一个模拟手机发短信的页面,发出来交流一下。

写的过程中,还是发现CSS这块儿有问题的,并没有想象中的那么好!布局时候也是各种问题,不过好在最后都解决了,半路出家自学前端,只能跟自己说一声加油啦!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS模拟发短信作业</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#div1{
			width:313px;
			height:645px;
			
			margin:100px auto;
			overflow:none;
			position:relative;
		}
		#div2{
			width:255px;
			height:414px;
			position:absolute;
			top:94px;
			left:29px;
			
			
		}
		.div1_bottom{
			width:256px;
			height:40px;
			position:absolute;
			top:510px;
			left:28px;
			border:solid 1px;
			
		}
		#tx{
			width:30px;
			height:30px;
			
			margin:4px 2px;
			float:left;
		}
		.tx{
			width:20px;
			height:20px;
			float:left;
			margin-left:3px;	
		}
		.tx2{
			width:20px;
			height:20px;
			float:right;
			margin-ri
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以提供一些示例代码供您参考。请注意,这些代码只是示例,需要根据实际情况进行调整。 1. 创建数据库和用户表 在 MySQL 中创建一个名为“email”的数据库,并创建一个名为“users”的表,包含以下字段: ```sql CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `created_at` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 2. 注册页面 ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <h1>注册页面</h1> <form action="register.php" method="post"> <label for="username">用户名:</label> <input type="text" name="username" id="username" required><br> <label for="password">密码:</label> <input type="password" name="password" id="password" required><br> <label for="confirm_password">确认密码:</label> <input type="password" name="confirm_password" id="confirm_password" required><br> <label for="email">邮箱:</label> <input type="email" name="email" id="email" required><br> <input type="submit" value="注册"> </form> </body> </html> ``` 在 register.php 文件中,我们需要对用户提交的数据进行验证,并将其添加到“users”表中: ```php <?php // 连接数据库 $host = 'localhost'; $username = 'root'; $password = ''; $dbname = 'email'; $conn = new mysqli($host, $username, $password, $dbname); if ($conn->connect_error) { die('连接失败:' . $conn->connect_error); } // 处理用户提交的数据 $username = $_POST['username']; $password = $_POST['password']; $confirm_password = $_POST['confirm_password']; $email = $_POST['email']; // 验证用户名和邮箱是否已被注册 $sql = "SELECT * FROM users WHERE username='$username' OR email='$email'"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo '用户名或邮箱已被注册'; } else { // 验证密码和确认密码是否一致 if ($password !== $confirm_password) { echo '密码和确认密码不一致'; } else { // 添加用户到数据库 $created_at = date('Y-m-d H:i:s'); $sql = "INSERT INTO users (username, password, email, created_at) VALUES ('$username', '$password', '$email', '$created_at')"; if ($conn->query($sql) === TRUE) { echo '注册成功'; } else { echo '注册失败:' . $conn->error; } } } // 关闭数据库连接 $conn->close(); ?> ``` 3. 登录页面 ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> </head> <body> <h1>登录页面</h1> <form action="login.php" method="post"> <label for="username">用户名:</label> <input type="text" name="username" id="username" required><br> <label for="password">密码:</label> <input type="password" name="password" id="password" required><br> <input type="submit" value="登录"> </form> </body> </html> ``` 在 login.php 文件中,我们需要验证用户名和密码是否正确,并使用 session 保存用户信息: ```php <?php session_start(); // 连接数据库 $host = 'localhost'; $username = 'root'; $password = ''; $dbname = 'email'; $conn = new mysqli($host, $username, $password, $dbname); if ($conn->connect_error) { die('连接失败:' . $conn->connect_error); } // 处理用户提交的数据 $username = $_POST['username']; $password = $_POST['password']; // 验证用户名和密码是否正确 $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $result = $conn->query($sql); if ($result->num_rows > 0) { // 保存用户信息到 session $_SESSION['username'] = $username; $_SESSION['password'] = $password; echo '登录成功'; } else { echo '用户名或密码错误'; } // 关闭数据库连接 $conn->close(); ?> ``` 4. 邮箱页面 ```html <!DOCTYPE html> <html> <head> <title>邮箱页面</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { // 每隔 5 秒钟自动刷新邮件列表 setInterval(function() { $('#email-list').load('email-list.php'); }, 5000); }); </script> </head> <body> <h1>欢迎,<?php echo $_SESSION['username']; ?></h1> <a href="logout.php">注销</a> <h2>邮件列表</h2> <div id="email-list"> <?php include 'email-list.php'; ?> </div> </body> </html> ``` 在 email-list.php 文件中,我们可以从数据库中获取邮件列表,并使用正则表达式解析邮件内容: ```php <?php // 连接数据库 $host = 'localhost'; $username = 'root'; $password = ''; $dbname = 'email'; $conn = new mysqli($host, $username, $password, $dbname); if ($conn->connect_error) { die('连接失败:' . $conn->connect_error); } // 获取邮件列表 $username = $_SESSION['username']; $sql = "SELECT * FROM users WHERE username='$username'"; $result = $conn->query($sql); if ($result->num_rows > 0) { $row = $result->fetch_assoc(); $email = $row['email']; // 模拟邮件列表 $emails = array( array( 'sender' => 'test@test.com', 'subject' => '测试邮件', 'body' => '这是一封测试邮件。', 'date' => '2021-07-01 10:00:00', ), array( 'sender' => 'example@example.com', 'subject' => '示例邮件', 'body' => '这是一封示例邮件。', 'date' => '2021-07-01 11:00:00', ), ); // 显示邮件列表 foreach ($emails as $email) { echo '<div>'; echo '<strong>发件人:</strong>' . $email['sender'] . '<br>'; echo '<strong>主题:</strong>' . $email['subject'] . '<br>'; echo '<strong>时间:</strong>' . $email['date'] . '<br>'; echo '<a href="email.php?sender=' . urlencode($email['sender']) . '&subject=' . urlencode($email['subject']) . '">查看</a>'; echo '</div>'; } } else { echo '用户不存在'; } // 关闭数据库连接 $conn->close(); ?> ``` 在 email.php 文件中,我们可以从 URL 参数中获取邮件内容,并使用正则表达式解析邮件内容: ```php <?php // 获取 URL 参数 $sender = urldecode($_GET['sender']); $subject = urldecode($_GET['subject']); // 解析邮件内容 $body = ''; if (preg_match('/From: (.*)\r\n/', $email, $matches)) { $body .= '<strong>发件人:</strong>' . $matches[1] . '<br>'; } if (preg_match('/Subject: (.*)\r\n/', $email, $matches)) { $body .= '<strong>主题:</strong>' . $matches[1] . '<br>'; } if (preg_match('/Date: (.*)\r\n/', $email, $matches)) { $body .= '<strong>时间:</strong>' . $matches[1] . '<br>'; } if (preg_match('/\r\n\r\n(.*)/', $email, $matches)) { $body .= '<strong>内容:</strong>' . nl2br($matches[1]) . '<br>'; } // 显示邮件内容 echo $body; ?> ``` 5. 注销功能 在 logout.php 文件中,我们可以使用 session_destroy() 函数销毁 session,实现注销功能: ```php <?php session_start(); session_destroy(); header('Location: login.php'); ?> ``` 以上就是一个基本的邮箱网站的实现,包括注册登录、邮箱页面、邮件列表、邮件内容和注销功能。当然,具体的实现方式还需要根据实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值