資料的隨機抽取 及 jQuery補充效果（菜單、移動）

標籤：div   頁面配置   處理   html   line   移動   text   style   執行   

一、資料的隨機抽取

都見過那種考試題從很多題中隨機抽取幾道的試卷吧，現在就要做這樣的一個例子：從資料庫中隨機抽取幾條資料出來顯示（例如：一百中隨機挑選50條）

隨機挑選是要有提交資料的，所以肯定是要有可視化介面和幕後處理頁面

（1）提交介面

　　a.使用表單提交（做出一個表單來，這都是頁面配置的程式了，在這不多說肯定都會使用from表單）如下：

<form action="nt.php" method="post">      <div class="net_title">選擇題：<input id="net_xuan" type="text" style="width:50px" name="net_xuan"/></div>        <div class="net_title"><input type="submit" value="出題" /></div></form>

　　b.提交的處理頁面

<?phpinclude("../../js/DBDA.class.php");   //封裝的資料庫類$db = new DBDA();$nx = $_POST["net_xuan"];   //前面傳過來的選擇題數目       //查詢代號值並且執行$sqln = "select title from subject where code=‘11‘";echo $db->StrQuery($sqln);//選擇題判斷是否為空白if($nx == "" && $nd == "" && $ns == "" && $nm == ""){return false;   //返回false}else{$sql = "select title from subject where code=‘1101‘";  //選擇代號是1101的題目$attrx =  $db->Query($sql);  //執行語句foreach($attrx as $vxt)   //迴圈顯示{echo "<p>一、{$vxt[0]}</p>";//大題題目}$sqlx = " select title,xiang from subject where fcode=‘1101‘ order by rand(code) limit 0,$nx";  //隨機抽取題目根據代號（order by rand(code) limit 0,$nx）$attr =  $db->Query($sqlx);//執行語句foreach($attr as $v)  //迴圈顯示{for($i=1;$i<count($v);$i++){echo "<div>$i{$v[0]}</div><br><div>{$v[1]}</div><br>";//顯示的題目}}}

這裡需要主要的是：隨機抽取的題目怎麼寫，其實就是先排序在抽取數目，用到了rand()隨機數（order by rand(code) limit 0,3）

這樣的話抽取隨機數就出來~~~想要不重複的隨機的話，可以在查詢的語句中添加不重複distinct

 

二、零碎的知識點

（1）jq菜單

效果：滑鼠移動上有顏色的差別，單擊選中顯示，滑鼠移出菜單後只顯示選中的效果，其他的沒有，滑鼠移上顯示移上的顏色

　　a.顯示樣式不多說，怎麼布局也是會的，直接看代碼和效果，如下：

<ul>    <li class="xiang">項目一</li><!--都添加一個名字，後面使用名字進行操作-->    <li class="xiang">項目二</li>    <li class="xiang">項目三</li>    <li class="xiang">項目四</li></ul>

　　b.進行jq邏輯編寫，如下：

//按一下滑鼠選中$(".xiang").click(function(){//所有元素背景色變成原來的$(".xiang").removeAttr("xz");$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");//找到點擊了誰$(this).attr("xz","1");$(this).css("background-image","url(../img/lift_li_02_02.gif)");})//滑鼠移上$(".xiang").mousemove(function(){//所有元素背景色變成原來的$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");//找到點擊了誰$(this).css("background-image","url(../img/lift_li_02_02.gif)");$("[xz=‘1‘]").css("background-image","url(../img/lift_li_02_02.gif)");})//滑鼠移出$(".xiang").mouseout(function(){//所有元素背景色變成原來的$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");//找到點擊了誰$("[xz=‘1‘]").css("background-image","url(../img/lift_li_02_02.gif)");})

　　

（2）jq按一下滑鼠框後，框隨滑鼠移動

　　a.顯示框的樣式，這裡就是一個普通的框，如下：

　　（1）div顯示

<div class="aa">     <p>滑鼠摁下就可以拖著我移動哦~</p>     <p>滑鼠鬆開我就不動了哦~</p></div>

　　（2）style樣式（樣式效果不多說，都是寫簡單的樣式）如下：

<style>    .aa{　　　　height: 100px;  /*寬、高*/　　　　width:300px;　　　　position: absolute;  /*定位*/　　　　border:6px solid #90F;  /*邊框*/　　　　text-align:center;   /*裡面內容位置*/　　　　vertical-align:middle; 　　　　line-height:25px;       }</style>

如下：　　

　　b.jq移動效果邏輯編寫

//找到框的名字，添加事件$(".aa").mousedown(function(e){  //滑鼠摁下　　$(document).bind("mousemove",function(e){  //bind()事件掛起：綁定事件（事件名稱，執行代碼）　　　　$(".aa").css("left",e.pageX).css("top",e.pageY)  //pageX和pageY可以擷取滑鼠移動的座標位置　　});})$(".aa").mouseup(function(){  //滑鼠鬆開　　$(document).unbind("mousemove")  //移除事件：解除綁定（事件名稱）})

　　

 

該邏輯的整體效果如下：

a.滑鼠沒有拖動的效果：

b.滑鼠摁下後拖動的效果：

pageX和pageY可是擷取這個滑鼠的橫軸和縱軸的值

<p>滑鼠指標位於： <span></span></p>　　<!--這是一個顯示滑鼠橫縱值的數-->

$(document).ready(function(){  $(document).mousemove(function(e){ //滑鼠移動    $("span").text("X: " + e.pageX + ", Y: " + e.pageY); //新增內容到span中，這就是滑鼠移動到哪就會在span中顯示數值  });});

 

隨時補充知識點~~

學習和分享並不是衝突滴~~~

資料的隨機抽取 及 jQuery補充效果（菜單、移動）