PHP は、js と css コードをカプセル化したシンプルなゲストブックを開発します

style.css ファイルを作成します

このファイルに CSS コードを入力します

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

すべてのファイルを呼び出すために同じディレクトリに配置します。他のフォルダーに配置されている場合は、次のようにする必要があります。電話をかける前にパスを入力してください。

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

index.jsファイルを作成します

jsコードを

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

に追加します。簡単に呼び出すことができるように、すべてのファイルを同じディレクトリに配置します。他のフォルダーに配置した場合は、次のように入力する必要があります。呼び出すパス。