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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS多个矩形块选择效果代码(模拟CS结构)

Javascript: JavaScript教程:浏览器对象层次及其主要作用; JavaScript教程:文档对象功能及其作用; JavaScript教程:JS对象系统的使用范例; JavaScript教程:窗口及输入输出; JavaScript教程:简单的输入、输出例子; JavaScript教程:JS窗口及输入输出范例; JavaScript教程:JavaScript窗体基础知识; JavaScript教程:JS窗体中的基本元素; JavaScript教程:用JS脚本实现Web页面信息交互范例; JavaScript教程:什么是框架?; JavaScript教程:如何访问框架?; JavaScript教程:用JS实现更复杂的交互范例; JavaScript静态页面值传递:URL篇; JavaScript静态页面值传递:Window.open篇; JavaScript静态页面值传递:Cookie篇; JavaScript中sort排序函数; JavaScript中splice数组函数; JavaScript中split字符串函数; JavaScript中small对象函数; JavaScript：世界上误解最深的语言

No. « ‹ 160 161 162 163 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 189 ::

收藏到网摘: n/a

一个仿Windows UI的html table，兼容IE和firefox [原创]关键字空格替换为逗号的js代码

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

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

一个仿Windows UI的html table，兼容IE和firefox [原创]关键字空格替换为逗号的js代码

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

评论 (0) All