Gaya halaman papan mesej dibangunkan dalam PHP
Kod dalam salah satu bab kami tidak menggunakan sebarang gaya halaman Halaman ini kelihatan sangat tidak kemas, yang bukan kesan yang kami jangkakan, oleh itu, bab ini menggunakan beberapa gaya css untuk menjadikan halaman kelihatan lebih menarik
Petua: Apabila berjalan dalam talian, sesetengah gaya mungkin tidak kelihatan kerana saiz imej yang besar Anda boleh mencubanya secara setempat
gaya css
<style>
#left{
width: 25%;
float: left;
}
#center{
width: 42%;
float: left;
}
#right{
width: 32%;
float: left;
}
.right{
margin-left: 180px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 550px;
height: 100px;
}
</style>Kami menggunakan kesan show-hide dalam jQuery pada halaman penyiaran mesej, apabila kami mengklik untuk menerbitkan mesej halaman yang kami gunakan untuk menerbitkan mesej akan dipaparkan. Keluar, kod jQuery adalah seperti berikut
Nota: Untuk menggunakan kesan paparan jQuery, anda perlu memuatkan perpustakaan jQuery, dan anda perlu meletakkan sekeping kod berikut ke dalam kepala
<script src="http://libs.baidu.com/jquery/ 1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
</script>JS
Kami perlu mengesahkan mesej kami menerbitkan. Jika nama dan mesej tidak diisi, kami tidak dibenarkan menyiarkannya. Mereka perlu diberi maklumat segera, kodnya adalah seperti berikut
<script>
function foo(){
if(myform.name.value=="")
{
alert("請輸入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言內容不能為空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('驗證碼不能為空');
myform.vcode.focus();
return false;
}
}
</script>
Kod susun atur halaman lengkap
<?php
session_start();
header("content-type:text/html;charset=utf-8");
$page=isset($_GET['page']) ?$_GET['page'] :1 ;//接收頁碼
$page=!empty($page) ? $page :1;
$conn=mysqli_connect("localhost","root","root","Ressage");
mysqli_set_charset($conn,'utf8'); //設定字符集
$table_name="ressage_user";//查取表名設置
$perpage=5;//每頁顯示的數(shù)據(jù)個數(shù)
//最大頁數(shù)和總記錄數(shù)
$total_sql="select count(*) from $table_name";
$total_result =mysqli_query($conn,$total_sql);
$total_row=mysqli_fetch_row($total_result);
$total = $total_row[0];//獲取最大頁碼數(shù)
$total_page = ceil($total/$perpage);//向上整數(shù)
//臨界點
$page=$page>$total_page ? $total_page:$page;//當下一頁數(shù)大于最大頁數(shù)時的情況
//分頁設置初始化
$start=($page-1)*$perpage;
$sql= "select * from ressage_user order by id desc limit $start ,$perpage";
$result=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<style>
.right{
margin-left: 140px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 360px;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
function foo(){
if(myform.name.value=="")
{
alert("請輸入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言內容不能為空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('驗證碼不能為空');
myform.vcode.focus();
return false;
}
}
</script>
</head>
<body>
<div id="left">
<img src="https://img.php.cn/upload/image/460/147/285/1477727203382106.jpg" width="370px">
</div>
<div id="center">
<h1>留言內容</h1>
<p>
<?
if($result==null){
echo"暫時沒有留言";
} ?>
</p>
<?php
while($row=mysqli_fetch_array($result)){
?>
<table border="1" cellspacing="0">
<tr>
<td>姓名：<?php echo $row['name']?></td>
<td style="text-align: center">留言時間:<?php echo $row['ressage_time']?></td>
<td><a href="ressage_delete.php?id=<?php echo $row['id']?>" >刪除</a> </td>
</tr>
<tr>
<td colspan="3">你的留言:<?php echo $row['content']?></td>
</tr>
</table>
<?php
}?>
<div id="baner" style="margin-top: 20px">
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=1"
?>">首頁</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page-1)
?>">上一頁</a>
<!-- 顯示123456等頁碼按鈕-->
<?php
for($i=1;$i<=$total_page;$i++){
if($i==$page){//當前頁為顯示頁時加背景顏色
echo "<a style='padding: 5px 5px;background: #000;color: #FFF' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}else{
echo "<a style='padding: 5px 5px' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}
}
?>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page+1)
?>">下一頁</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page={$total_page}"
?>">末頁</a>
<span>共<?php echo $total?>條</span>
</div>
</div>
<div id="right" >
<h2>留言板</h2>
<div > <a href="">首頁</a> | <button>留言</button> <a href="" class="right">管理員登錄</a>
<form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" ">
<div class="form">
<p>
姓名：<input type="text" name="name">
</p>
<p>
郵箱：<input type="email" name="email">
</p>
<p>
留言內容：<br/>
<textarea cols="30" rows="7" name="content"></textarea>
</p>
<p>
驗證碼：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
</p>
<p>
<button class="button">提交留言</button>
</p>
</div>
</form>
</div>
</body>
</html>Dengan cara ini, susun atur halaman kami sedia . Langkah seterusnya ialah menghantar mesej dan memasukkan data ke dalam pangkalan data
