PHP develops simple guestbook encapsulating js and css code

Create a style.css file

Put the css code into this file

<style>
*{
   margin:0;
   padding:0;
   list-style-type:none;
   font-size:13px;
   font-family:'Helvetica Neue',Helvetica,Arial,Sans-serif;
}
body {
   background-color: #54B1EB;
}
 
#all_wrap {
   width: 958px;
   margin: 0 auto;
   margin-top:30px;
   background-color:#CCCCCC;
}

#header h1 {
   font-size: 36px;
   line-height:70px;
}

#header {
   margin: 0 auto;
   width: 916px;
}

#content {
   margin: 0 auto;
   width: 916px;
   border: 1px solid #3683D8;
}
.item {
   margin: 0 auto;
   width: 896px;
   border-bottom-width: 1px;
   border-bottom-style: dashed;
   border-bottom-color: #900;
   clear:both;
}
.a {
   float: left;
   width:60px;
   margin-top:5px;
}

/*留言列表*/
.n,.t,.m{
   line-height:30px;
}
.n {
   float: left;
   color:#00F;
   padding-right:5px;
}
.t{
   color:#666;
}
.o {
   float: right;
}
.m{
   padding-left:60px;
   padding-right:30px;
   word-break:break-all;
}

/*新留言表单*/
.form_line{
   clear:both;
   margin-top:10px;
}
.form_box {
   margin: 0 auto;
   width: 890px;
}
.form_text {
   float: left;
   width: 80px;
   text-align:right;
}
#form_select_avater label {
   width: 60px;
   display: block;
   float: left;
   text-align: center;
   cursor: pointer;
}
.form_input textarea {
   width: 500px;
   height: 70px;
}

#submit_0{
   width:100px;
   height:30px;
   }

#footer{
margin: 0 auto;
   width: 896px;
   }
.footer_message {
   line-height: 40px;
   
}
.pagination {
   text-align: center;
   margin:10px auto 10px auto;
}
.pagination a {
   display: inline-block;
   border: 1px solid #00F;
   padding-right: 8px;
   padding-left: 8px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
   color: #900;
   margin-right: 4px;
}

.pagination a:hover{
   border-color:#F0F;
   color:#000;
   }
.login_button {
   float: right;
}
#submit_1 {
   width: 60px;
}
.login_form form label {
   float: left;
   display: block;
   width: 220px;
}
.login_form {
   padding-top: 20px;
}
.login_form form {
   display: block;
   border: 1px dashed #F0F;
   width:520px;
   padding-top:10px;
   padding-bottom:10px;
   padding-left:3px;
}
.welcome_info {
   color: #900;
   float: right;
}
.r {
   color: #F00;
}

.retime{
   color:#666;
   }

.login_button a{
   text-decoration:none;
   }
#login_form{
   
   display:none;}
</style>

Enter this code on the front-end page. All files are placed in the same directory for easy calling. If placed You need to enter the path in other folders to call it.

<link rel="stylesheet" type="text/css" href="style.css"/>

Create an index.js file

Put the js code in

<script type="text/javascript">
$(document).ready(function() {
      random_checked_avatar();
      $("#submit_0").click(validate_input);
//      toggle() 方法切换元素的可见状态。
//        如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
      $("#login_show_button").toggle(function(){
         $("#login_form").show(100);
         return false;
      },function(){
         $("#login_form").hide(100);
         return false;
      });

      $(".reply_button").click(function(){
         if($(this).parent().parent().children(".m").children(".reply_form_wrap").size()==0){
            //parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
            var id=$(this).attr("href");  //attr() 方法设置或返回被选元素的属性值。
            var reply_form=$("#reply_form").html();
            $(this).parent().parent().children(".m").append(reply_form);  //append() 方法在被选元素的结尾插入指定内容。
            $(this).parent().parent().children(".m").children(".reply_form_wrap").show(200);
            $(this).parent().parent().children(".m").children(".reply_form_wrap").children("form")
                  .children("input[name='id']").val(id);
         }
         return false;
      });
   });

   function random_checked_avatar(){
      var r=Math.random()*2; //返回介于 0 ~ 2 之间的一个随机数。
      $("#form_select_avater input:radio").eq(r).attr("checked","checked");
   }
   function validate_input(){
      var l=$("#nickname").val().trim().length;
      if(l==0) {alert("昵称不能为空");return false;};
      if(l>6) {alert("昵称要6个字符以内");return false;}
      l=$("#message").val().trim().length;
      if(l==0) {alert("留言内容不能为空");return false;}
      if(l>300) {alert("留言内容要300字符以内");return false;}
      return true;
   }
</script>

Add such code to the front-end page, and place all files in the same directory for easy calling. If You need to enter the path to call it when placed in other folders.

<script type="text/javascript" src="index.js"></script>