使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08

1,制作qq 窗口

<!DOCTYPE html>
<html><head><title>QQ聊天工具</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=gbk"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微软雅黑";}#chat{margin: 3px auto 0 auto; width:436px; border: 1px #999999 solid;}.chatBody{width: 100%; height: 220px; overflow:auto;}.chatText{border: none; width: 100%; height: 50px;}.btn{text-align: right;}.btn span{display: inline-block; padding: 0 10px; height: 25px;overflow: hidden; color: #ffffff; border-radius: 5px; background-color: #069dd5; font-size: 12px; margin-right: 3px; cursor:pointer;}.chatBody div:first-of-type{float: left; width: 38px;}.chatBody p{float: left; font-size: 12px; width:370px; color: #0000ff;}.chatBody div:last-of-type{float: left; width: 370px; font-size: 12px;}.chatBody section{clear: both;}.chatContent{ background:#efefef;border-radius: 5px; padding: 3px;}</style><script src="js/jQuery1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">$(function(){var hadImg=new Array("head01.jpg","head02.jpg","head03.jpg");var uName=new Array("海滩登陆","英雄登场","占领高地");$("#send").click(function(){//判断聊天内容长度》0，显示在上面if($(".chatText").val().length>0){//获取聊天内容var str=$(".chatBody").html();//随机数var tou=Math.floor(Math.random()*3);//获得随机图【片var hedstr="<div><img src='images/"+hadImg[tou]+"'</div>";//获得随机名字var useName="<p>"+uName[tou]+"</p>";//获取当前输入的内容var cha=$(".chatText").val();var chastr="<div>"+cha+"</div>";//把内容放到chatbox里头var suoYou="<section>"+hedstr+useName+chastr+"</section>";//显示在指定位置，清楚内容$(".chatBody").html(str+suoYou);$(".chatBody section div:last").addClass("chatContent");$(".chatText").val("");}});});
</script></head><body><section id="chat"><div class="chatBody"></div><div><img src="data:images/icon.jpg"></div><textarea class="chatText"></textarea><div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section></body>
</html>

2,制作课工厂窗口

<!DOCTYPE html>
<html><head><title>课工厂窗口制作</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=gbk"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}ul,li{list-style: none;}.bbs{margin: 0 auto; width: 600px; position: relative;}header{padding: 5px 0; border-bottom: 1px solid #cecece;}header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}.post{position: absolute; background: #ffffff; border: 1px #999999 solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #aaaaaa solid; margin-bottom: 10px;}.post select{width: 200px; height: 30px;}.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #aaaaaa solid;}.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;overflow: hidden;}.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}.bbs section ul li div img{ border-radius:50%; width: 60px;}.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }.bbs section ul li p span{padding-right:20px;}</style><script src="js/jQuery1.11.1.js"></script><script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script><script type="text/javascript">$(function(){$(".bbs header span").click(function(){$(".post").show();});var headimage=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");$(".btn").click(function(){//获取标题内容var mytitle=$(".title").val();var tites=$("<div>"+mytitle+"</div>");//获取随,机数得到标题图片var index=Math.floor(Math.random()*4);var imaindex=$("<img src='images/"+headimage[index]+"'></img>");//获取和设置板块发布var myslect=$(".post select").val();var date=new Date();var newdate=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();var shijian=newdate;var day=$("<p><span>"+myslect+"   "+shijian+"</span></p>");var myli=$("<li></li>");myli.append(imaindex);myli.append(tites);myli.append(day);$("section ul").append(myli);$(".post").hide();});});</script>
  </head><body><div class="bbs"><header><span>我要发帖</span></header><section><ul></ul></section><div class="post"><input class="title" placeholder="请输入标题（1-50个字符）">所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select><textarea class="content"></textarea><input class="btn" value="发布"></div>
</div></body>
</html>

转载于:https://www.cnblogs.com/bb1008/p/7102674.html

使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08相关推荐

怎么制作真人qq秀_一分钟简单制作一个专属于自己的卡通头像
点击蓝字关注我们制作一个专属于自己的卡通头像很简单,我们常用的美图秀秀软件就可以轻松制作. 首选在应用市场搜索美图秀秀下载后选择工具箱打开,找到实用工具中的动漫化身这个选项: 打开后点击绘制动漫形象 ...
简单qq表情浏览器开发记事下
之前开了一个头,现在把结尾补上简单qq表情浏览器开发记事 <上> 再发一次功能: 简单qq表情浏览器功能:简单浏览一个文件夹下面的图片,图片可以拖拽实现透明窗体,分页,图片位置变换等功 ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
在万彩手影大师上怎么制作微课_制作微课最简单方便的设备？
推荐平台:来画视频现在的微课视频主要有两种方式: 第一种,老师做好一份课程的PPT,对着电脑把讲课的过程录制成微课视频的形式. 第二种,在讲解知识点的过程,使用MG动画的形式去展示说明,让学生更好理 ...
HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...
HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还 ...
视频教程-C# 实战项目——制作仿QQ软件-C#
C# 实战项目--制作仿QQ软件专注编程领域,拥有多年开发经验王小科 ¥49.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ...
学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作...
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作文章 ...
学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...

使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08

使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08相关推荐

最新文章

热门文章

使用 jquery 制作简单QQ 聊天窗口 制作课工厂简单窗口---------2017-7-1 16:08

使用 jquery 制作简单QQ 聊天窗口 制作课工厂简单窗口---------2017-7-1 16:08相关推荐

最新文章

热门文章

使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08

使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08相关推荐