<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ简易聊天框</title> <link rel="stylesheet" href="css/chat.css"> <script src="js/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var headImg=new Array("head01.jpg","head02.jpg","head03.jpg"); //简单设置三个聊天用户 var uName=new Array("时尚伊人","六月奇迹","松松"); $("#send").click(function(){ //判断当前输入框中是否有内容(TODO) //获取当前聊天内容(TODO) //随机获取头像和昵称(TODO) //设置头像(TODO) //设置昵称(TODO) //获取并设置当前输入的内容(TODO) //设置当前聊天的头像、昵称和内容(TODO) // 设置样式(TODO) //清除文本框中的内容(TODO) }); }); </script> </head> <body> <section id="chat"> <div class="chatBody"></div> <div><img src="images/icon.jpg"></div> <textarea class="chatText"></textarea> <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div> </section> </body> </html>补全代码
时间: 2024-01-21 08:19:54 浏览: 40
以下是代码的补全:
```
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<link rel="stylesheet" href="css/chat.css">
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var headImg=new Array("head01.jpg","head02.jpg","head03.jpg");
//简单设置三个聊天用户
var uName=new Array("时尚伊人","六月奇迹","松松");
$("#send").click(function(){
//判断当前输入框中是否有内容
if($(".chatText").val() == "") {
alert("请输入聊天内容!");
return false;
}
//获取当前聊天内容
var chatContent = $(".chatText").val();
//随机获取头像和昵称
var randomIndex = Math.floor(Math.random() * 3);
var randomHeadImg = "images/" + headImg[randomIndex];
var randomUName = uName[randomIndex];
//设置头像
var headHtml = '<div class="headImg"><img src="' + randomHeadImg + '"></div>';
//设置昵称
var nameHtml = '<div class="uName">' + randomUName + '</div>';
//获取并设置当前输入的内容
var contentHtml = '<div class="content">' + chatContent + '</div>';
//设置当前聊天的头像、昵称和内容
var chatHtml = '<div class="chatItem">' + headHtml + nameHtml + contentHtml + '</div>';
$(".chatBody").append(chatHtml);
//清除文本框中的内容
$(".chatText").val("");
});
});
</script>
</head>
<body>
<section id="chat">
<div class="chatBody"></div>
<div><img src="images/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
把一下代码生成流程图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>register</title> <script src="js/zone.js"></script> </head> <body> 注册 用户名: <input type="text" id="username" autocomplete="off" placeholder="输入姓名"> 密码 <input type="password" id="password" placeholder="输入密码"> 确认密码 <input type="password" id="repwd" placeholder="确认密码"> <input type="button" value="注册" id="register" onclick="reg()"> 登录 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
优化这一段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>qq登录</title> </head> <body style=" border: 1px solid; height: 400px; width: 450px; color: #555555; font: 12px; background-color: #ffff; position: absolute; left: 35%; " >
密码登录 推荐使用 快捷登录 ,防止盗号
<input type="text" placeholder="请输入账号" style="width: 242.14px; height: 33.14px" />
<input type="text" placeholder="请输入密码" style="width: 242.14px; height: 33.14px" />
<input type="submit" value="登录" style=" width: 250px; height: 38px; background-color: rgb(0, 119, 255); padding: 1px 6px; " />
找回密码注册账号意见反馈 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)