今天一直在纠结JS画矩形,找了很多资料,终于找到个像样点的了,自己改了点,不过还存在一些问题
<form name="myForm" action="exportToExcel" method="POST">
<div style="position:absolute;top:1260px;left:400px;z-index:-1;">
<input type="button" value="select" οnclick="beginSelect()"
name="select" />
<input type="button" value="export" οnclick="get()" name="export" />
<input type="hidden" name="textDatas">
</div>
</form>
</div>
<iframe name=saveWin height=0 width=0></iframe>
<div id="ld" class="area" style="filter: Alpha(Opacity=60)"></div>
</body>
<script language='javascript'>
var value = "";
int index=0;
//矩形选择区域
var client_x = 0;
var client_y = 0;
var bLeftDown = false;
var bSelected =false;
var bClick = false;
//存矩形选择区域
var tempX1=0;
var tempY1=0;
var tempX2=0;
var tempY2=0;
//将像素字符串转成int
function changePixelToInt(pixel){
var str = pixel;
return parseInt(str.substring(0,str.indexOf("px")));
}
//这里是得到所选矩形区域内的所有文本框值
function get(){
if(!bSelected)
{
window.alert("请选择要导出的区域!");
return;
}
//获得矩形选择区域坐标
tempX1=changePixelToInt(ld.style.left);
tempY1=changePixelToInt(ld.style.top);
tempX2=tempX1+changePixelToInt(ld.style.width);
tempY2=tempY1+changePixelToInt(ld.style.height);
var texts = document.myForm.elements;
for(var i = 0; i < texts.length; i ++){
if(texts[i].type == 'text'){
getAbsPoint(texts[i]);
}
}
document.myForm.textDatas.value=value;//将文本框信息赋给POST
init();
document.myForm.submit();
}
//获得文本框信息
function getAbsPoint(obj)
{
var x,y;
var oRect = obj.getBoundingClientRect();
x=oRect.left +document.body.scrollLeft ;
y=oRect.top +document.body.scrollTop ;
//判断是否在所选区域内
if(Math.max(x,tempX1)>=Math.min(x+obj.offsetWidth,tempX2) || Math.max(y,tempY1)>=Math.min(y+obj.offsetHeight,tempY2)){
//两个矩形不相交,则不在所选区域内,退出
return;
}
//文本框信息用#分开
var s = index+"#"+obj.value+"#"+x+"#"+y+"#"+obj.offsetWidth+"#"+obj.offsetHeight;
value +=s;
value+="!"; //将各文本框组合成长串
index++;
}
//初始化
function init(){
bSelected = false;
document.myForm.select.value="select";
ld.style.width = 0;
ld.style.height = 0;
ld.style.left = client_x;
ld.style.top = client_y;
ld.style.visibility = "hidden";
bClick = false;
tempX1=0;
tempY1=0;
tempX2=0;
tempY2=0;
value = "";
}
//是否变成可选择状态
function beginSelect(){
var value = document.myForm.select.value;
if(value=="select"){
bSelected = true;
document.myForm.select.value="cancel";
}
else{
bSelected = false;
document.myForm.select.value="select";
}
}
//随鼠标运动的更改函数
function resize()
{
if(bSelected){
if(bLeftDown){
if(bClick){
ld.style.width = 0;
ld.style.height = 0;
ld.style.left = client_x;
ld.style.top = client_y;
ld.style.visibility = "visible";
bClick = false;
}
var scroll_left = document.body.scrollLeft;
var scroll_top = document.body.scrollTop;
var new_x = event.clientX + scroll_left;
var new_y = event.clientY + scroll_top;
//swordmaple javascript article @jx165.com
//by im286 yeye
//取得当前鼠标位置
if (new_y>=client_y) temp_height = new_y - client_y;
else {
temp_height = client_y - new_y;
ld.style.top = new_y;
}
//如果上下移动
if (new_x>=client_x) temp_width = new_x - client_x;
else {
temp_width = client_x - new_x;
ld.style.left = new_x;
}
//如果左右移动
ld.style.width = temp_width;
ld.style.height = temp_height;
//重设层的宽度及位置
return false;
}}
}
//点击鼠标重设
function reset()
{
if(bSelected){
if(event.button == 1)
bLeftDown = true;
if(bLeftDown){
bClick = true;
client_x = event.clientX + document.body.scrollLeft;
client_y = event.clientY + document.body.scrollTop;
}
}
//初始定义层属性
}
//放开鼠标键操作
function mouseup(){
bLeftDown = false;
}
document.onmousedown = reset;
document.onmousemove = resize;
document.onmouseup = mouseup;
</script>
</html>