jQuery實作留言板功能
緒論:今天課堂上做了一個小專案，使用jQuery實作留言板功能，秉著鞏固和分享的心，來發布此篇文章，
留言樣式效果:
以上是樣式
下面我把css樣式和排版放出來，功能的實作我單獨講
代碼:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<style>
#rong{
border:0px solid pink;
width:500px;
margin:0 auto;
}
h3{
border-bottom:dashed;
}
#liuyan{
border:1px solid black;
height: 300px;
margin-bottom:20px;
}
h5{
margin-top:0px;
}
p{
position:relative;
}
#name{
width:497px;
}
#btn{
width:100%;
}
#neirong{
width:495px;
}
span{
position:absolute;
right:100px;
}
.times{
position:absolute;
right:0;
}
.yellow{
background-color: yellow;
}
.yc{
display: none;
}
</style>
<script>
$().ready(function(){ //準備開始函式
$('#name').val($('#name').attr("defaultValue")); //給昵稱框添加默認值
$('#neirong').val($('#neirong').attr("defaultValue")); //給內容框添加默認值
$('#name').focus(function(){ //昵稱框得到焦點事件
if($('#name').val()==$('#name').attr('defaultValue')){ //如果昵稱框的值等于默認值
$('#name').val(""); //昵稱框的值 附空值
}
})
$('#neirong').focus(function(){ //內容框得到焦點事件
if($('#neirong').val()==$('#neirong').attr('defaultValue')){ //如果內容框的值等于默認值
$('#neirong').val(""); //內容框的值 附空值
}
})
//---------------------------------------------------------
//失去焦點
$('#name').blur(function(){ //昵稱框失去焦點事件
if($('#name').val()==""){ //如果值等于空
$('#name').val($(this).attr('defaultValue')); //昵稱框的值 附默認值
}
})
$('#neirong').blur(function(){ //內容框失去焦點事件
if($('#neirong').val()==""){ //如果值等于空
$('#neirong').val($(this).attr('defaultValue')); //內容框的值 附默認值
}
})
//------------------------------------------------上傳留言
var num =0; //這個變數 是給第幾條留言的中的 “幾” 全域變數
$('#btn').click(function(){ //獲取點擊按鈕
num++; //每點擊一下意味著上傳了一條留言 所以num++
var s=new Date(); //這個是實作 時分秒的一個實體化
var h=s.getHours(); //獲取當前時間小時
var m=s.getMinutes(); //獲取當前時間分鐘
var mm=s.getSeconds(); //獲取當前時間秒
var ni=$('#name').val(); //獲取昵稱框的值
var nei=$('#neirong').val(); //獲取內容框的值
//這個xin 是拼接 具體怎么拼接的看下面的樣式代碼 （就是HTML元素那些）
var xin=$("<p > <i>"+ni+": </i><b> "+nei+"</b><span class='yc' id='x'><a>洗掉</a><strong>第"+num+"條 </strong></span><span class='times'>"+h+"時"+m+"分"+mm+"秒</span></p>");
$('#liuyan').append(xin); //把新拼接的內容追加到大的留言框里面就是那個height 300px 的里面 實作上傳留言的操作
$('em').css('display','none'); //已經有內容了，就把提示訊息的css樣式 display 設定為none
})
//-------------------------------------------------- 把后面添加的元素 設定樣式
$(document).on('mouseover','p',function(){ //因為上傳的留言是后面添加上去的 它沒有默認事件 屬性 所以要使用on 這條代碼意思是為p標簽添加一個移入事件
/* 為上傳的留言添加背景顏色*/ $(this).attr('class','yellow'); /*把這個事件的class屬性
取名叫做yellow 這個yellow 已經在style里面已經設定了
只要這個事件激發就會創建一個類 從而style的css樣式起作用*/
/*這個是留言資訊 洗掉字符和時間的顯示 */ $(this).find('#x').removeAttr('class','yc'); // #x 其實是上面字串拼接的一個<span>標簽的id 留言的時間資訊 及洗掉都是這個代碼顯示
}) //為什么要 removeAttr 呢？ 因為上面style已經設定了包含資訊的欄位不顯示了 所以這里想讓他顯示就要移除
//-------------------------------------- 把后面添加的元素 設定樣式
$(document).on('mouseout','p',function(){ //因為上傳的留言是后面添加上去的 它沒有默認事件 屬性 所以要使用on 這條代碼意思是為p標簽添加一個移出事件
$(this).removeAttr('class','yellow'); //當滑鼠移除 就移除留言的背景顏色
$(this).find('#x').attr('class','yc'); //因為移入的代碼已經給 移除掉上面的style樣式了 ，所以這里要重新設定一下
})
//----------------------------------------------------------------- 點擊洗掉就洗掉
$(document).on('click','a',function(){ //a標簽是后面添加的 所以使用on 這個代碼是把a添加yg click事件
var a=confirm('是否洗掉') //彈窗詢問是否洗掉
if(a){ //如果點擊 是
num--; // 還記得這個num嗎 在上面是全域變數
$(this).parents().parents('p').remove(); //a 便簽的第一個parents是span但是span被p包裹所以還有一個parents 找到了p段落 給移除
var allstrong=$('#liuyan').find('strong'); //找到留言板中所有的 strong 存盤
for (var i=0; i<allstrong.length;i++) { //i<找到的strong
$(allstrong[i]).text("第"+(i+1)+"條"); //第i條 strong便簽的內容 賦值為i+1條 為什么i+1呢？ 因為i是0開始
}
if(num==0){ //如果當num-- 變成0了 就相當于沒有留言了 ，那么留言板的提示訊息 顯示出來
$('em').css('display','block') //設定em的display 為顯示 也就是block
}
}
})
})
</script>
</head>
<body>
<div id="rong">
<h3>留言板</h3>
<div id="liuyan">
<em>留言內容</em>
<!--<p>
<i>這里是昵稱</i>
<b>這里是內容</b>
<span>
<a>洗掉</a>
<strong>第一條</strong>
</span>
<span class="times">3時2分一秒</span>
</p>-->
</div>
<h5>昵稱</h5>
<input type="text" id="name" defaultValue="你的昵稱"/>
<h5>留言內容</h5>
<textarea id="neirong" defaultValue="你要說得話"></textarea>
<input type="button" value="提交" id="btn" />
</div>
</body>
</html>
功能的實作主要是以下幾點:
1. 在昵稱和留言內容的文本框中顯示提示文字
$('#name').val($('#name').attr("defaultValue")); //給昵稱框添加默認值
$('#neirong').val($('#neirong').attr("defaultValue")); //給內容框添加默認值
2. 獲得焦點時提示文字消失,失去焦點時若內容為空，則再次顯示提示 文字
$('#name').focus(function(){ //昵稱框得到焦點事件
if($('#name').val()==$('#name').attr('defaultValue')){ //如果昵稱框的值等于默認值
$('#name').val(""); //昵稱框的值 附空值
}
})
$('#neirong').focus(function(){ //內容框得到焦點事件
if($('#neirong').val()==$('#neirong').attr('defaultValue')){ //如果內容框的值等于默認值
$('#neirong').val(""); //內容框的值 附空值
}
})
//---------------------------------------------------------
//失去焦點
$('#name').blur(function(){ //昵稱框失去焦點事件
if($('#name').val()==""){ //如果值等于空
$('#name').val($(this).attr('defaultValue')); //昵稱框的值 附默認值
}
})
$('#neirong').blur(function(){ //內容框失去焦點事件
if($('#neirong').val()==""){ //如果值等于空
$('#neirong').val($(this).attr('defaultValue')); //內容框的值 附默認值
}
})
3. 若用戶輸入了昵稱和留言內容，點擊提交按鈕，則創建一條留言，并顯示在頁面的留言板上，發布的每條留言，留言資訊都會有第幾條
//------------------------------------------------上傳留言
var num =0; //這個變數 是給第幾條留言的中的 “幾” 全域變數
$('#btn').click(function(){ //獲取點擊按鈕
num++; //每點擊一下意味著上傳了一條留言 所以num++
var s=new Date(); //這個是實作 時分秒的一個實體化
var h=s.getHours(); //獲取當前時間小時
var m=s.getMinutes(); //獲取當前時間分鐘
var mm=s.getSeconds(); //獲取當前時間秒
var ni=$('#name').val(); //獲取昵稱框的值
var nei=$('#neirong').val(); //獲取內容框的值
//這個xin 是拼接 具體怎么拼接的看下面的樣式代碼 （就是HTML元素那些）
var xin=$("<p > <i>"+ni+": </i><b> "+nei+"</b><span class='yc' id='x'><a>洗掉</a><strong>第"+num+"條 </strong></span><span class='times'>"+h+"時"+m+"分"+mm+"秒</span></p>");
$('#liuyan').append(xin); //把新拼接的內容追加到大的留言框里面就是那個height 300px 的里面 實作上傳留言的操作
$('em').css('display','none'); //已經有內容了，就把提示訊息的css樣式 display 設定為none
})
5. 當滑鼠移動上去背景顏色變成黃色，滑鼠移動出去背景顏色消失
//-------------------------------------------------- 把后面添加的元素 設定樣式
$(document).on('mouseover','p',function(){ //因為上傳的留言是后面添加上去的 它沒有默認事件 屬性 所以要使用on 這條代碼意思是為p標簽添加一個移入事件
/* 為上傳的留言添加背景顏色*/ $(this).attr('class','yellow'); /*把這個事件的class屬性
取名叫做yellow 這個yellow 已經在style里面已經設定了
只要這個事件激發就會創建一個類 從而style的css樣式起作用*/
/*這個是留言資訊 洗掉字符和時間的顯示 */ $(this).find('#x').removeAttr('class','yc'); // #x 其實是上面字串拼接的一個<span>標簽的id 留言的時間資訊 及洗掉都是這個代碼顯示
}) //為什么要 removeAttr 呢？ 因為上面style已經設定了包含資訊的欄位不顯示了 所以這里想讓他顯示就要移除
//-------------------------------------- 把后面添加的元素 設定樣式
$(document).on('mouseout','p',function(){ //因為上傳的留言是后面添加上去的 它沒有默認事件 屬性 所以要使用on 這條代碼意思是為p標簽添加一個移出事件
$(this).removeAttr('class','yellow'); //當滑鼠移除 就移除留言的背景顏色
$(this).find('#x').attr('class','yc'); //因為移入的代碼已經給 移除掉上面的style樣式了 ，所以這里要重新設定一下
})
6.點擊洗掉，及可洗掉當前留言
//----------------------------------------------------------------- 點擊洗掉就洗掉
$(document).on('click','a',function(){ //a標簽是后面添加的 所以使用on 這個代碼是把a添加yg click事件
var a=confirm('是否洗掉') //彈窗詢問是否洗掉
if(a){ //如果點擊 是
num--; // 還記得這個num嗎 在上面是全域變數
$(this).parents().parents('p').remove(); //a 便簽的第一個parents是span但是span被p包裹所以還有一個parents 找到了p段落 給移除
var allstrong=$('#liuyan').find('strong'); //找到留言板中所有的 strong 存盤
for (var i=0; i<allstrong.length;i++) { //i<找到的strong
$(allstrong[i]).text("第"+(i+1)+"條"); //第i條 strong便簽的內容 賦值為i+1條 為什么i+1呢？ 因為i是0開始
}
if(num==0){ //如果當num-- 變成0了 就相當于沒有留言了 ，那么留言板的提示訊息 顯示出來
$('em').css('display','block') //設定em的display 為顯示 也就是block
}
}
})
以上就是全部內容了，其實你們可以自己把代碼復制下來到自己的編譯器上運行可以有更加好的效果哦，還有某些功能點沒有說出，但是已經在上面的代碼里面全部注釋了應該可以看懂了，謝謝觀看！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272003.html
標籤：其他