网上下载的小功能练习，该实例最好使用火狐浏览器打开.
实现效果图：
html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>留言板功能</title> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src ="jajax.js"></script> </head> <body> <div id="container"> <h2>留言板展示</h2> <div class="textbox"> <div id="comments" class="comments"></div> </div> <div id="userbox"> <span class="statusm msg">wwww</span> <div class="commentbox"> <ul class ="toolbox"> <li class="emotion-select"> 表情 <div class="emotionbox"></div> </li> <li class="text-b">加粗</li> <li class="text-i">斜体</li> <li class="text-u">下划线</li> <li class="text-etc">待添加功能</li> </ul> <div class="commentarea" id="commentarea" contenteditable = "true">请输入留言内容</div> <span class="commentm msg">留言内容不能为空</span> </div> <div class="userinfo"> <span>您的昵称：</span><input type="text" id="username" class="username" value="请输入昵称"> <span class="usernamem msg">用户昵称不能为空</span> <input type="button" id="sub" class="sub" value="提交"> </div> </div> </div> </body> </html>
css
#container{
width:500px;
margin:20px auto;
}
/*.textbox{
width:500px;
height:300px;
border:1px solid gray;
margin:5px auto;
}*/
.textbox .comments {
overflow-y: auto;
word-break: break-all;
color:green;
width:500px;
height:300px;
border:1px solid gray;
margin:5px auto;
}
/*用户部分*/
#userbox {
position:relative;
top:0;
left:0;
width:500px;
height:180px;
padding-top:15px;
}
#userbox .msg {
font-size:10px;
line-height: 10px;
display:inline-block;
color:red;
}
#userbox .statusm {
position:absolute;
top:3px;
left:0;
display:none;
}
#userbox .commentbox .commentm {
position:absolute;
top:138px;
left:0;
display:none;
}
#userbox .userinfo .usernamem {
display:none;
}
#userbox .commentbox{
width:500px;
height:115px;
margin:0 auto;
}
#userbox .commentbox .toolbox {
list-style:none;
width:500px;
height:35;
border:1px solid gray;
border-bottom: 0;
margin:0;
padding:0;
/*overflow: hidden;*/
}
#userbox .commentbox .toolbox li {
float:left;
line-height:34px;
display:inline-block;
width:50px;
height:34px;
text-align:center;
cursor:pointer;
}
#userbox .commentbox .toolbox li:hover {
color:#fff;
background-color:#ddd;
}
#userbox .commentbox .toolbox
{
width: 698px;
height: 34px;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #c8cdd2;
border-bottom: 0;
}
#userbox .commentbox .toolbox li
{
line-height: 34px;
display: inline-block;
float: left;
width: 80px;
height: 34px;
cursor: pointer;
text-align: center;
}
#userbox .commentbox .toolbox li:hover
{
color: #fff;
background-color: #ddd;
}
/*工具栏表情选择*/
#userbox .toolbox .emotion-select {
position:relative;
}
#userbox .toolbox .emotion-select .emotionbox {
position:absolute;
display:none;
top:-96px;
left:-1px;
width:128px;
height:96px;
margin:0;
padding:0;
}
#userbox .toolbox .emotion-select .emotionbox img {
display:block;
float:left;
width:30px;
height:30px;
margin:0;
padding:0;
cursor:pointer;
border:1px solid gray;
}
#userbox .toolbox .emotion-select:hover .emotionbox {
display:block;
}
#userbox .toolbox .emotion-select .emotionbox img:hover {
border-color:#000;
}
#userbox .commentarea {
width:485px;
height:75px;
border:1px solid gray;
padding:5px 0 0 15px;
margin:0 auto;
overflow-y:auto;
word-break: break-all;
}
#userbox .userinfo {
width:500px;
height:45px;
margin:10px auto;
}
#userbox .userinfo .sub {
float:right;
}
js
alert("jiayou");
$(function(){
$("#commentarea").focus(function(){
if($(this).text()=="请输入留言内容") {
$(this).text("");
}
})
$("#username").one("focus",function(){
if($(this).val()=="请输入昵称") {
$(this).val("");
}
})
// 提交按钮
$("#sub").click(function(){
var $comment = $("#commentarea").html();
var $username = $("#username").val();
if($comment && $username !="") {
sendComment($comment,$username);
$(".commentm").hide();
$(".usernamem").hide();
}else if($comment =="" && $username !="") {
$(".commentm").show();
$("#commentarea").focus();
return false;
}else if($comment !="" && $username =="") {
$(".usernamem").show();
$("#username").focus();
return false;
}else{
$(".commentm").show();
$(".usernamem").show();
alert("请输入完整留言");
return false;
}
$(document).ajaxStart(function(){
$(".statusm").show().html("留言中...");
});
$(document).ajaxStop(function(){
$(".statusm").html("留言成功").fadeOut(1000);
});
});
// 添加表情
imgInit();
$("img").click(function(){
$("#commentarea").append($("#"+this.id).clone());
});
// 加粗
$(".text-b").click(function(){
if($("#commentarea").has("b").length !=0) {
var bh = $("#commentarea b").html();
$("#commentarea b").replaceWith(bh);
}else {
$("#commentarea").wrapInner("<b></b>");
}
});
// 斜体
$(".text-i").click(function(){
if($("#commentarea").has("i").length !=0) {
var ih = $("#commentarea i").html();
$("#commentarea i").replaceWith(ih);
}else {
$("#commentarea").wrapInner("<i></i>");
}
});
// 下划线
$(".text-u").click(function(){
if($("#commentarea").has("u").length !=0) {
var uh = $("#commentarea u").html();
$("#commentarea u").replaceWith(uh);
}else {
$("#commentarea").wrapInner("<u></u>");
}
});
});
// 自定义提交留言内容和用户昵称
function sendComment(comment,name) {
var $usercomment = "<b><i>"+name+"</i><b>"+" 发表于 "+"<i>"+GetDate()+"</i>"+
"<br/>"+comment+"<br/>";
var $commentslist = $("#comments").html()+$usercomment;
// 使用ajax实现
$.ajax({
url:"",
dataType:"text",
data: "&comment=&d="+new Date()+ "&commentslist="+$commentslist,
// data: "&commentslist="+$commentslist,
success: function(data){
$("#comments").html($commentslist);
$("#comments").get(0).scrollTop = $("#comments").get(0).scrollHeight;
$("#commentarea").html("");
},
err: function(){
alert("提交失败");
}
});
// 未用ajax实现
// $("#comments").html($commentslist);
// $("#comments").get(0).scrollTop = $("#comments").get(0).scrollHeight;
// $("#commentarea").html("");
}
function GetDate() {
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth();
var d = t.getDate();
var h = t.getHours();
var min = t.getMinutes();
var s = t.getSeconds();
var time = y+"/"+m+"/"+d+" "+h+":"+min+":"+s;
return time;
}
function imgInit(){
var eImg = "";
for(var i=1;i<13;i++) {
// eImg += '<img src = "http://file.imooc.com/opus/B4/271696/254/img/'+i+'.JPG" id = "e'+i+'"/>';
eImg += '<img src = "img/'+i+'.JPG" id = "e'+i+'"/>';
}
$(".emotionbox").append(eImg);
}
表情图片
