仿留言板功能

最新推荐文章于 2022-12-13 12:31:52 发布

weixin_34138255

最新推荐文章于 2022-12-13 12:31:52 发布

阅读量265

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1833lljy/p/8920613.html

版权

网上下载的小功能练习，该实例最好使用火狐浏览器打开.

实现效果图：

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;
}

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>"+"&nbsp;&nbsp;发表于&nbsp;&nbsp;"+"<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+"&nbsp;&nbsp;"+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);

}