数据的随机抽取 及 jQuery补充效果（菜单移动）

Posted 2020-10-19 悦～

一、数据的随机抽取

都见过那种考试题从很多题中随机抽取几道的试卷吧，现在就要做这样的一个例子：从数据库中随机抽取几条数据出来显示（例如：一百中随机挑选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.提交的处理页面

<?php
	include("../../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中显示数值
  });
});

 

随时补充知识点~~

学习和分享并不是冲突滴~~~