近来瞎做一个会议时间的选择页面,
点选开始时间和结束时间的时候,怎么感觉有时候判断是好的,有时候判断又不正确
比如alert((startTimeId<=id)+"---startTimeId:"+startTimeId+"objId:"+objId);返回的结果有时候竟然是:true--startTImeId:11 objId:9的情况。如果可以,大家可以把这个jsp运行一下
逻辑是:首次点击(onClick),默认是开始时间,再次点击为结束时间,第三次右边点击为修改结束时间,第三次左边点击为修改开始时间我操作了一下,先点击一下,如:11,再右边点击一下:13,再左边点击一下:9 ——正常应该清除所有,选中9为开始时间,但是点击了没反应。
jsp页面代码如下<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
table{border:1px solid #77a594;border-collapse:collapse;width: 95%;}
td{border:1px solid #77a594;empty-cells:show;width:30px; height:50px; text-align:center;}
</style>
<script type="text/javascript">
/**全局常量,设置鼠标移至(onmouseover)状态时td的背景颜色*/
var MOUSEOVERCOLOR = "#EEEEEE";
/**全局常量,设置鼠标移出(onmouseout)状态时td的背景颜色*/
var MOUSEOUTCOLOR = "#FFFFFF";
/**全局常量,设置鼠标按下(onmousedown)状态时td的背景颜色*/
var MOSECLICKCOLOR = "#00f";
/**全局变量,设置选中开始时间的ID*/
var startTimeId = -1;
/**全局变量,设置选中结束时间的ID*/
var endTimeId = -1;
function select(obj,isSelect){
if(startTimeId>=0){
return ;//如果已选择开始时间,则鼠标移至(onmouseover)状态,鼠标移出(onmouseout)状态无效
}
if(isSelect){
obj.style.background=MOUSEOVERCOLOR;//设置鼠标移至(onmouseover)状态时td的背景颜色
}else{
obj.style.background=MOUSEOUTCOLOR;//设置鼠标移出(onmouseout)状态时td的背景颜色
}
}
var objId = -1;
function checkSelect(id){
objId = id;
if(startTimeId<0){
//第一次选择开始时间
startTimeId = objId;
endTimeId = objId;
document.getElementById(objId).style.background=MOSECLICKCOLOR;
document.getElementById("div1").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}else{
//选择过
//alert((startTimeId<=id)+"---startTimeId:"+startTimeId+"objId:"+objId);
if(startTimeId<=objId){
//点击右边
if(endTimeId<objId){
//选中后的右边
endTimeId = objId;
var j = startTimeId;
for(j+1;j<=endTimeId;j++){
document.getElementById(j).style.background = MOSECLICKCOLOR;//设置选中状态
}
document.getElementById("div2").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}else{
//选中后的左边
var i = startTimeId;
for(i+1;i<=endTimeId ;i++){
document.getElementById(i).style.background = MOUSEOUTCOLOR;//清除选中状态
}
endTimeId = objId;
var j = startTimeId;
for(j+1;j<=endTimeId;j++){
document.getElementById(j).style.background = MOSECLICKCOLOR;//设置选中状态
}
document.getElementById("div3").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}
}else{
//点击左边,左边结束时间小于开始时间,默认回到未选择状态,重新选择开始时间
if(startTimeId>=endTimeId){
document.getElementById(startTimeId).style.background = MOUSEOUTCOLOR;//清除选中状态
}else{
var i = startTimeId;
for(i;i<=endTimeId ;i++){
document.getElementById(i).style.background = MOUSEOUTCOLOR;//清除选中状态
}
}
document.getElementById("div4").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
//重新选择开始时间
document.getElementById(objId).style.background=MOSECLICKCOLOR;
startTimeId = objId;
endTimeId = objId;
document.getElementById("div5").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}
}
}
</script>
</head>
<body>
<table id="table" border="1" cellpadding='1' cellspacing='1'>
<tr>
<%
for(int i=0;i<24*4;i++){
%>
<td id="<%=i%>" onmouseover="select(this,true)" onmouseout="select(this,false)" onClick="checkSelect('<%=i%>')"><%=i %></td>
<%
}
%>
</tr>
<tr>
<%
for(int i=0;i<24;i++){
%>
<td><%=i%>:00</td>
<td><%=i%>:15</td>
<td><%=i%>:30</td>
<td><%=i%>:45</td>
<%
}
%>
</tr>
</table>
div1:<div id = "div1"></div><br/>
div2:<div id = "div2"></div><br/>
div3:<div id = "div3"></div><br/>
div4:<div id = "div4"></div><br/>
div5:<div id = "div5"></div><br/>
</body>
</html>
点选开始时间和结束时间的时候,怎么感觉有时候判断是好的,有时候判断又不正确
比如alert((startTimeId<=id)+"---startTimeId:"+startTimeId+"objId:"+objId);返回的结果有时候竟然是:true--startTImeId:11 objId:9的情况。如果可以,大家可以把这个jsp运行一下
逻辑是:首次点击(onClick),默认是开始时间,再次点击为结束时间,第三次右边点击为修改结束时间,第三次左边点击为修改开始时间我操作了一下,先点击一下,如:11,再右边点击一下:13,再左边点击一下:9 ——正常应该清除所有,选中9为开始时间,但是点击了没反应。
jsp页面代码如下<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
table{border:1px solid #77a594;border-collapse:collapse;width: 95%;}
td{border:1px solid #77a594;empty-cells:show;width:30px; height:50px; text-align:center;}
</style>
<script type="text/javascript">
/**全局常量,设置鼠标移至(onmouseover)状态时td的背景颜色*/
var MOUSEOVERCOLOR = "#EEEEEE";
/**全局常量,设置鼠标移出(onmouseout)状态时td的背景颜色*/
var MOUSEOUTCOLOR = "#FFFFFF";
/**全局常量,设置鼠标按下(onmousedown)状态时td的背景颜色*/
var MOSECLICKCOLOR = "#00f";
/**全局变量,设置选中开始时间的ID*/
var startTimeId = -1;
/**全局变量,设置选中结束时间的ID*/
var endTimeId = -1;
function select(obj,isSelect){
if(startTimeId>=0){
return ;//如果已选择开始时间,则鼠标移至(onmouseover)状态,鼠标移出(onmouseout)状态无效
}
if(isSelect){
obj.style.background=MOUSEOVERCOLOR;//设置鼠标移至(onmouseover)状态时td的背景颜色
}else{
obj.style.background=MOUSEOUTCOLOR;//设置鼠标移出(onmouseout)状态时td的背景颜色
}
}
var objId = -1;
function checkSelect(id){
objId = id;
if(startTimeId<0){
//第一次选择开始时间
startTimeId = objId;
endTimeId = objId;
document.getElementById(objId).style.background=MOSECLICKCOLOR;
document.getElementById("div1").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}else{
//选择过
//alert((startTimeId<=id)+"---startTimeId:"+startTimeId+"objId:"+objId);
if(startTimeId<=objId){
//点击右边
if(endTimeId<objId){
//选中后的右边
endTimeId = objId;
var j = startTimeId;
for(j+1;j<=endTimeId;j++){
document.getElementById(j).style.background = MOSECLICKCOLOR;//设置选中状态
}
document.getElementById("div2").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}else{
//选中后的左边
var i = startTimeId;
for(i+1;i<=endTimeId ;i++){
document.getElementById(i).style.background = MOUSEOUTCOLOR;//清除选中状态
}
endTimeId = objId;
var j = startTimeId;
for(j+1;j<=endTimeId;j++){
document.getElementById(j).style.background = MOSECLICKCOLOR;//设置选中状态
}
document.getElementById("div3").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}
}else{
//点击左边,左边结束时间小于开始时间,默认回到未选择状态,重新选择开始时间
if(startTimeId>=endTimeId){
document.getElementById(startTimeId).style.background = MOUSEOUTCOLOR;//清除选中状态
}else{
var i = startTimeId;
for(i;i<=endTimeId ;i++){
document.getElementById(i).style.background = MOUSEOUTCOLOR;//清除选中状态
}
}
document.getElementById("div4").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
//重新选择开始时间
document.getElementById(objId).style.background=MOSECLICKCOLOR;
startTimeId = objId;
endTimeId = objId;
document.getElementById("div5").innerHTML="startTimeId:"+startTimeId+"endTimeId:"+endTimeId+"objid:"+objId;
}
}
}
</script>
</head>
<body>
<table id="table" border="1" cellpadding='1' cellspacing='1'>
<tr>
<%
for(int i=0;i<24*4;i++){
%>
<td id="<%=i%>" onmouseover="select(this,true)" onmouseout="select(this,false)" onClick="checkSelect('<%=i%>')"><%=i %></td>
<%
}
%>
</tr>
<tr>
<%
for(int i=0;i<24;i++){
%>
<td><%=i%>:00</td>
<td><%=i%>:15</td>
<td><%=i%>:30</td>
<td><%=i%>:45</td>
<%
}
%>
</tr>
</table>
div1:<div id = "div1"></div><br/>
div2:<div id = "div2"></div><br/>
div3:<div id = "div3"></div><br/>
div4:<div id = "div4"></div><br/>
div5:<div id = "div5"></div><br/>
</body>
</html>
楼主可以试试!