目录
1.制作QQ简易聊天框
2.制作课工场论坛发帖
1.制作QQ简易聊天框
<script>$(function () {var touxiang = new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");var names = new Array("时尚伊人", "六月奇迹", "松松");//send 事件$("#send").click(function () {if ($(".chatText").val().length > 0) {var lt = $(".chatBody").html(); //上方聊天记录//设置头像和昵称var tn = Math.floor(Math.random() * 3);var timg = "<div><img src=" + touxiang[tn] + "></div>";var tname ="<p style='color: red; font-size: 12px;'>" + names[tn] + "</p>";//修饰内容var chatBody = "<div>" + $(".chatText").val() + "</div>";var all = "<section>" + timg + tname + chatBody + "</section>";$(".chatBody").html(lt + all);$(".chatText").val(""); //清除文本框中的内容}});});</script>----------------------------
body：
<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><script src="js/jquery-1.12.4.js"></script></body>2.制作课工场论坛发帖
<script>$(function () {$("span").click(function () {$(".post").show();});$(".btn").click(function () {let randomIndex = Math.floor(Math.random() * 4);//创建li标签let li = $("<li></li>");//创建div标签let div = $("<div></div>");//imglet img = $("<img/>");img.attr("src", "images/tou0" + (randomIndex + 1) + ".jpg");//将img放入divdiv.append(img);//创建标题标签let h1 = $("<h1>" + $(".title").val() + "</h1>");//创建p标签let p = $("<p></p>");//创建span//select input textarea 都是通过 :val()来获取let bankuai = $("select").val();let span1 = $("<span>板块：" + bankuai + "</span>");//创建span标签用存放发布内容let contentValue = $(".content").val();let content = $("<span>" + contentValue + "</span>");//创建日期对象let date = new Date();let str ="发布：" +date.getFullYear() +"-" +(date.getMonth() + 1) +" " +date.getDate() +"-" +date.getHours() +":" +date.getMinutes();//创建span标签用于存放时间let time = $("<span>" + str + "</span>");p.append(span1);content.appendTo(p);p.append(time);li.append(div);li.append(h1);li.append(p);/*$("ul").append(li);*/$("ul").prepend(li);$(".title").val("");$("select").val($(""));$(".content").val("");$(".post").hide();});});</script>-----------
body：
<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><script src="js/jquery-1.12.4.js"></script></body>
