上一篇博客我们分享了搜索框优化经验《数据自动匹配》。今天我们来分享一下时间控制经验:自动查询!
引言:
大家在网上购买火车票的时候,肯定用过12306这项功能,设置好条件,勾选“开启自动查询”,这时如果点击“查询”按钮,则会进入自动查询,并显示倒计时刷新时间,直到有满足条件的列车停止,如下图:
当我们的项目也需要不断查询,实时刷新显示新的数据时,比如,大学生每年要进行选修课网选,他们需要不断地查询选修课,实时更新可选选修课名称,选修课剩余容量等等,这时我们就可以借鉴提供这样的功能,给用户更高的体验度!下面我们来看看具体的实现吧:
思路:
1.提供时间控制功能,即倒计时功能;
2.时间控制功能和查询功能进行关联;
实现:
1.倒计时功能可以有多种实现方式,最简单的方式是使用timer控件(简单不做详细介绍),这里提供的是js实现方式,主要利用了时间间隔创建函数setInterval()。下面是js实现倒计时的一个小demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><title>JS的setInterval()实现倒计时特效代码</title>
<script>
function dtime(i){
var oBody = document.getElementById('shu');
var i=i;
setInterval(updateNum, 1000);//倒计时为1000为1秒间隔,每秒倒计时,动态秒数
updateNum();
function updateNum()
{
oBody.innerHTML = i--;
if(oBody.innerHTML<0){
oBody.innerHTML=0;
}
}
}
</script>
<button id='an' οnclick='dtime(10);'>查询</button>
<button id='shu' >num</button></span>
提示:如需终止时间间隔,可使用函数clearInterval()。
2.实例:学生选课自动查询和自动提交
定义自动查询函数autoQuery()
<span style="white-space:pre"> </span>//定义变量times,用作倒计时
var times_query
var timeID;
function autoQuery(){
times_query=$("#daojishi").html();
if (times_query>0){
$("#daojishi").html(times_query-1);
}else{
clearInterval(timeID); //终止计时器
$("#daojishi").html(5); //重置倒计时为5
getCourse(); //调用getCourse()函数 获取课程信息
}
}
定义查询课程函数getCourse(),查询课程,并显示
function getCourse() {
//清空原有的数据
……
//如果选中“余量优先”,普通选课,未开启自动查询
if($("#chkLeftFirst").attr("checked")){
……
}
else{
//如果开启了“自动查询”
if ($("#chkOpenAutoQuery").attr("checked")) {
//如果开启了“自动提交”
if ($("#chkAutoSubmit").attr("checked" )) {
//自动查询、自动提交都选中
//调用RobCourse.js文件中的函数setFirst(),根据设置的优先条件查询课程
var resText=setFirst();
if (resText==undefined || resText=="") {
//将“查询”按钮变为“停止自动查询”按钮
……
//开启自动查询定时器
timeID=setInterval("autoQuery()","1000");
return;
}
//调用函数showCourses(),在页面上显示查询到的课程
showCourses(resText);
//将“停止自动查询”按钮变为“查询”按钮
……
//终止定时器
clearInterval(timeID);
//将倒计时值归为5
$("#daojishi").html(5);
//调快速选课(RobCourse.js)函数,提交课程
chooseCourseFast('<%=Session["StudentID"]%>');
}else{
//自动查询选中;自动提交未选中
……
}
//调用RobCourse.js文件中的函数setFirst(),根据设置的优先条件查询课程
var resText=setFirst()
……
//开启定时器 timeID=setInterval("autoQuery()","1000"); return; }
showCourses(resText);
//将“停止自动查询按钮”改为“查询”按钮
……
//终止定时器 clearInterval(timeID);
$("#daojishi").html(5);
}
} else { //终止定时器 clearInterval(timeID);
……
} } }
定义显示课程函数showCourses(),将查询出来的课程显示出来,注意转换json格式:
function showCourses(resText)
{
……
}
定义函数chkOpenAutoQuery_onChange(),用于关联自动查询复选框变化:
function chkOpenAutoQuery_onChange(){
if (!($("#chkOpenAutoQuery").attr("checked"))) {
if ($("#chkAutoSubmit").attr("checked")) {
//取消自动提交
$("#chkAutoSubmit").removeAttr("checked");
}
clearInterval(timeID);
$("#daojishi").html(5);
return;
}
}
效果:
总结:
从用户角度出发,以用户为主,越靠近用户的使用习惯,软件亲和力越高,开发的软件越受欢迎!