JS多个矩形块选择效果代码(模拟CS结构)

更新时间：2008年11月30日 16:01:46 作者：

非常不错的可以选择多个矩形块的功能代码

<html> <head> <base href="<%=basePath%>"> <title>大屏屏幕</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"> <link href="<%=path%>/css/font.css" rel="stylesheet" type="text/css" /> <SCRIPT LANGUAGE="JavaScript"> var canChange = 1; var candraw = 1; function main_mouseup() { candraw = 0; } function init() { var aDivs = document.getElementsByTagName("div"); for (var i=0; i<aDivs.length; i++) { new neverDragDivision(aDivs[i]); } } function changeColorToSelected(id) { id1=""+id; var td =document.getElementById(id1); td.bgColor = "#0000C6"; } function changeColorToNotSelected(id) { id1=""+id; var td =document.getElementById(id1); td.bgColor = "#BEBEBE"; } function changecolor(id) { if(canChange == 1) { if(id<1000) { id1=""+id; var td =document.getElementById(id1); var str = td.bgColor; //alert(str); var str1 = "#bebebe"; //黑色 var str2 = "#008000"; //绿色 if(str == str1) { td.bgColor = "#0000C6"; //red说明这个位置可以放！ // ps[id] = 1; } else { //ps[id] = 0; td.bgColor = "#BEBEBE"; } } else { id1=""+id; var td =document.getElementById(id1); var str = td.bgColor; var str2 = "#008000"; //绿色 if(str == str2) { td.bgColor = "white"; isHasChang=0; } else td.bgColor = "green"; { isHasChang=1; } } } } var startId; var endId; var list = 5; var up = 5; var down = 6; var selectFun = 0; function changeStart(id) { resetcheck(); candraw = 1; switch(event.button) { case 1: selectFun = 0; break; case 2: selectFun = 1; break; } //获得鼠标按下的那个格子的ID，来确定是哪个格子 //alert('start'); startId = id; } function changeColorBySE(id1,id2) { var Sx,Sy,Ex,Ey; var startP; //the last start point var endP; //the end point var changeId; Sx = id1%list; Sy = Math.floor(id1/list); //alert(Sy); Ex = id2%list; Ey = Math.floor(id2/list); DisX = Math.abs(Sx-Ex); //差距为几列 //alert("DisX:"+DisX); DisY = Math.abs(Sy-Ey); //差距为几行 //alert("DisY:"+DisY); //这个函数功能是将所有的矩形开始结束全部转变为左上右下 function StartChange(id1,id2) { if((id1<id2)&&(id1%list<id2%list)) {startP = id1;endP = id2;} else if((id1>id2)&&(id1%list>id2%list)) {startP = id2;endP = id1;} else{ //alert(DisY); startP = (id1<id2)?(id1-DisX):(id2-DisX); endP = (id1<id2)?(id2+DisY):(id1+DisY); } //alert("startP:"+startP+"endP:"+endP); } //开始点在结束点的下面 //转换包含(Sx,Sy),(Ex,Ey)区域的颜色 StartChange(id1,id2); for(i=0;i<DisY+1;i++) { for(j=0;j<DisX+1;j++) { changeId = startP+j+i*list; //alert(changeId); selectFun == 0?changeColorToSelected(changeId):changeColorToNotSelected(changeId); } } //alert(Sx); } function changUpEnd() { if(startId == endId){ candraw = 1; changeColorToNotSelected(startId); document.getElementById("startid").value = startId; document.getElementById("endid").value = startId; window.parent.screenEvent(startId,startId,'<%=sSingalID%>'); }else{ candraw = 0; document.getElementById("startid").value = startId; document.getElementById("endid").value = endId; window.parent.screenEvent(startId,endId,'<%=sSingalID%>'); } } function changeEnd(id) { //获得了最后的一个格子。 if(candraw == 1){ endId = id; //alert(endId); //算法 /* *根据起始ID 和 最后ID来确定是哪些格子变 * 计算start和end的行，列数 */ changeColorBySE(startId,endId); } } function neverDragDivision(fObj) { with (this) { if (!fObj) return; this.bDraged = false; this.oDragOrig = fObj; oDragOrig.onmousedown = function() { oDragOrig.style.backgroundColor="#FFFFFF"; //alert(event.clientY); //alert(oDragOrig.offsetTop); //var ofs = Offset(oDragOrig); // oDragOrig.style.position = "absolute"; //oDragOrig.style.left = ofs.l; //oDragOrig.style.top = ofs.t; //alert(oDragOrig.style.top); //oDragOrig.X = event.clientX - ofs.l; //oDragOrig.Y = event.clientY - ofs.t; bDraged = true; }; /* oDragOrig.onmousemove = function() { if (!bDraged) return; oDragOrig.setCapture(); oDragOrig.style.left = event.clientX - oDragOrig.X; oDragOrig.style.top = event.clientY - oDragOrig.Y; };*/ /* oDragOrig.onmouseup = function() { bDraged = false; oDragOrig.releaseCapture(); };*/ function Offset(e) { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight; while(ee=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { t:t, l:l, w:w, h:h } }; }}; </SCRIPT> <style type="text/css">  </style> </head> <body onselectstart="return false" oncontextmenu="window.event.returnValue=false" onmouseup=main_mouseup()> <center> <script> document.write('<table border="0" align="center">'); document.write('<tr>'); number=1; number1=1; var i; up=5; list=8; for(i=0;i<(up*list);i++) { document.write('<td width="60" height="60" bgColor="#BEBEBE" id="'+i+'" onmouseMove="changeEnd(parseInt(id))" onmouseUp="changUpEnd()" onmouseDown="changeStart(parseInt(id))" onclick="changecolor(parseInt(id))")></td>'); if((i<((up*list)-list))&&(i+1)%list==0) { document.write('</tr><tr>'); number++; } } document.write('</tr><tr>'); document.write('<td>'); document.write('</td>'); document.write('</tr></table>'); function resetcheck(){ for(i=0;i<(up*list);i++){ changeColorToNotSelected(i); } } </script> </center>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
矩形块

Openlayers显示地理位置坐标的方法
这篇文章主要为大家详细介绍了Openlayers显示地理位置坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JS实现固定在右下角可展开收缩DIV层的方法
这篇文章主要介绍了JS实现固定在右下角可展开收缩DIV层的方法,右下角的div层可实现收缩与展开的功能,非常具有实用价值,需要的朋友可以参考下
2015-02-02
js chrome浏览器判断代码
今天发现chrome还是有一些独一无二的东西，基于它们，我们就可以搞出基于特征的判定了。
2010-03-03
JavaScript设计模式之策略模式实例
这篇文章主要介绍了JavaScript设计模式之策略模式实例,本文分析了Jquery源码并给出了自己的实现,需要的朋友可以参考下
2014-10-10
JS解决 Array.fill()参数为对象指向同一个引用地址的问题
这篇文章主要介绍了JS解决 Array.fill()参数为对象指向同一个引用地址问题，解决方案使用map返回出不同的引用的地址，fill参数可随意填写（不为空），主要是map函数中返回的数据,需要的朋友可以参考下
2023-02-02
微信小程序日期选择器实例代码
本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
JavaScript仿微博发布信息案例
这篇文章主要为大家详细介绍了JavaScript仿微博发布信息案例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js实现简单模态窗口，背景灰显
昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享，也希望高手多提意见。第一次在博客园上发文章，挺高兴的。
2008-11-11
带左右箭头图片轮播的JS代码
这篇文章主要介绍了带左右箭头图片轮播的JS代码，有需要的朋友可以参考一下
2013-12-12
JS组件系列之MVVM组件构建自己的Vue组件
这篇文章主要介绍了JS组件系列之MVVM组件构建自己的Vue组件,需要的朋友可以参考下
2017-04-04

JS多个矩形块选择效果代码(模拟CS结构)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具