资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS多个矩形块选择效果代码(模拟CS结构)
<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" /> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%0D%0Avar%20canChange%20%3D%201%3B%20%0D%0Avar%20candraw%20%3D%201%3B%20%0D%0Afunction%20main_mouseup()%20%0D%0A%7B%20%0D%0Acandraw%20%3D%200%3B%20%0D%0A%7D%20%0D%0Afunction%20init()%20%0D%0A%7B%20%0D%0Avar%20aDivs%20%3D%20document.getElementsByTagName(%22div%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3CaDivs.length%3B%20i%2B%2B)%20%7B%20%0D%0Anew%20neverDragDivision(aDivs%5Bi%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20changeColorToSelected(id)%20%0D%0A%7B%20%0D%0Aid1%3D%22%22%2Bid%3B%20%0D%0Avar%20td%20%3Ddocument.getElementById(id1)%3B%20%0D%0Atd.bgColor%20%3D%20%22%230000C6%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20changeColorToNotSelected(id)%20%0D%0A%7B%20%0D%0Aid1%3D%22%22%2Bid%3B%20%0D%0Avar%20td%20%3Ddocument.getElementById(id1)%3B%20%0D%0Atd.bgColor%20%3D%20%22%23BEBEBE%22%3B%20%0D%0A%7D%20%0D%0Afunction%20changecolor(id)%20%0D%0A%7B%20%0D%0Aif(canChange%20%3D%3D%201)%20%0D%0A%7B%20%0D%0Aif(id%3C1000)%20%0D%0A%7B%20%0D%0Aid1%3D%22%22%2Bid%3B%20%0D%0Avar%20td%20%3Ddocument.getElementById(id1)%3B%20%0D%0A%0D%0Avar%20str%20%3D%20td.bgColor%3B%20%0D%0A%2F%2Falert(str)%3B%20%0D%0Avar%20str1%20%3D%20%22%23bebebe%22%3B%20%2F%2F%E9%BB%91%E8%89%B2%20%0D%0Avar%20str2%20%3D%20%22%23008000%22%3B%20%2F%2F%E7%BB%BF%E8%89%B2%20%0D%0Aif(str%20%3D%3D%20str1)%20%0D%0A%7B%20%0D%0Atd.bgColor%20%3D%20%22%230000C6%22%3B%20%2F%2Fred%E8%AF%B4%E6%98%8E%E8%BF%99%E4%B8%AA%E4%BD%8D%E7%BD%AE%E5%8F%AF%E4%BB%A5%E6%94%BE%EF%BC%81%20%0D%0A%2F%2F%20ps%5Bid%5D%20%3D%201%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0A%2F%2Fps%5Bid%5D%20%3D%200%3B%20%0D%0Atd.bgColor%20%3D%20%22%23BEBEBE%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aid1%3D%22%22%2Bid%3B%20%0D%0Avar%20td%20%3Ddocument.getElementById(id1)%3B%20%0D%0Avar%20str%20%3D%20td.bgColor%3B%20%0D%0Avar%20str2%20%3D%20%22%23008000%22%3B%20%2F%2F%E7%BB%BF%E8%89%B2%20%0D%0Aif(str%20%3D%3D%20str2)%20%0D%0A%7B%20%0D%0Atd.bgColor%20%3D%20%22white%22%3B%20%0D%0AisHasChang%3D0%3B%20%0D%0A%7D%20%0D%0Aelse%20td.bgColor%20%3D%20%22green%22%3B%20%0D%0A%7B%20%0D%0AisHasChang%3D1%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20startId%3B%20%0D%0Avar%20endId%3B%20%0D%0Avar%20list%20%3D%205%3B%20%0D%0Avar%20up%20%3D%205%3B%20%0D%0Avar%20down%20%3D%206%3B%20%0D%0Avar%20selectFun%20%3D%200%3B%20%0D%0Afunction%20changeStart(id)%20%0D%0A%7B%20%0D%0Aresetcheck()%3B%20%0D%0Acandraw%20%3D%201%3B%20%0D%0Aswitch(event.button)%20%0D%0A%7B%20%0D%0Acase%201%3A%20selectFun%20%3D%200%3B%20break%3B%20%0D%0Acase%202%3A%20selectFun%20%3D%201%3B%20break%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E8%8E%B7%E5%BE%97%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%E7%9A%84%E9%82%A3%E4%B8%AA%E6%A0%BC%E5%AD%90%E7%9A%84ID%EF%BC%8C%E6%9D%A5%E7%A1%AE%E5%AE%9A%E6%98%AF%E5%93%AA%E4%B8%AA%E6%A0%BC%E5%AD%90%20%0D%0A%2F%2Falert('start')%3B%20%0D%0AstartId%20%3D%20id%3B%20%0D%0A%0D%0A%7D%20%0D%0Afunction%20changeColorBySE(id1%2Cid2)%20%0D%0A%7B%20%0D%0Avar%20Sx%2CSy%2CEx%2CEy%3B%20%0D%0Avar%20startP%3B%20%2F%2Fthe%20last%20start%20point%20%0D%0Avar%20endP%3B%20%2F%2Fthe%20end%20point%20%0D%0Avar%20changeId%3B%20%0D%0ASx%20%3D%20id1%25list%3B%20%0D%0ASy%20%3D%20Math.floor(id1%2Flist)%3B%20%0D%0A%2F%2Falert(Sy)%3B%20%0D%0AEx%20%3D%20id2%25list%3B%20%0D%0AEy%20%3D%20Math.floor(id2%2Flist)%3B%20%0D%0ADisX%20%3D%20Math.abs(Sx-Ex)%3B%20%2F%2F%E5%B7%AE%E8%B7%9D%E4%B8%BA%E5%87%A0%E5%88%97%20%0D%0A%2F%2Falert(%22DisX%3A%22%2BDisX)%3B%20%0D%0ADisY%20%3D%20Math.abs(Sy-Ey)%3B%20%2F%2F%E5%B7%AE%E8%B7%9D%E4%B8%BA%E5%87%A0%E8%A1%8C%20%0D%0A%2F%2Falert(%22DisY%3A%22%2BDisY)%3B%20%0D%0A%2F%2F%E8%BF%99%E4%B8%AA%E5%87%BD%E6%95%B0%E5%8A%9F%E8%83%BD%E6%98%AF%E5%B0%86%E6%89%80%E6%9C%89%E7%9A%84%E7%9F%A9%E5%BD%A2%E5%BC%80%E5%A7%8B%E7%BB%93%E6%9D%9F%E5%85%A8%E9%83%A8%E8%BD%AC%E5%8F%98%E4%B8%BA%E5%B7%A6%E4%B8%8A%E5%8F%B3%E4%B8%8B%20%0D%0Afunction%20StartChange(id1%2Cid2)%20%0D%0A%7B%20%0D%0A%0D%0Aif((id1%3Cid2)%26%26(id1%25list%3Cid2%25list))%20%7BstartP%20%3D%20id1%3BendP%20%3D%20id2%3B%7D%20%0D%0Aelse%20if((id1%3Eid2)%26%26(id1%25list%3Eid2%25list))%20%7BstartP%20%3D%20id2%3BendP%20%3D%20id1%3B%7D%20%0D%0Aelse%7B%20%0D%0A%2F%2Falert(DisY)%3B%20%0D%0AstartP%20%3D%20(id1%3Cid2)%3F(id1-DisX)%3A(id2-DisX)%3B%20%0D%0AendP%20%3D%20(id1%3Cid2)%3F(id2%2BDisY)%3A(id1%2BDisY)%3B%20%0D%0A%7D%20%0D%0A%2F%2Falert(%22startP%3A%22%2BstartP%2B%22endP%3A%22%2BendP)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%BC%80%E5%A7%8B%E7%82%B9%E5%9C%A8%E7%BB%93%E6%9D%9F%E7%82%B9%E7%9A%84%E4%B8%8B%E9%9D%A2%20%0D%0A%2F%2F%E8%BD%AC%E6%8D%A2%E5%8C%85%E5%90%AB(Sx%2CSy)%2C(Ex%2CEy)%E5%8C%BA%E5%9F%9F%E7%9A%84%E9%A2%9C%E8%89%B2%20%0D%0AStartChange(id1%2Cid2)%3B%20%0D%0A%0D%0Afor(i%3D0%3Bi%3CDisY%2B1%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Afor(j%3D0%3Bj%3CDisX%2B1%3Bj%2B%2B)%20%0D%0A%7B%20%0D%0AchangeId%20%3D%20startP%2Bj%2Bi*list%3B%20%0D%0A%2F%2Falert(changeId)%3B%20%0D%0AselectFun%20%3D%3D%200%3FchangeColorToSelected(changeId)%3AchangeColorToNotSelected(changeId)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2Falert(Sx)%3B%20%0D%0A%7D%20%0D%0Afunction%20changUpEnd()%20%0D%0A%7B%20%0D%0Aif(startId%20%3D%3D%20endId)%7B%20%0D%0Acandraw%20%3D%201%3B%20%0D%0AchangeColorToNotSelected(startId)%3B%20%0D%0Adocument.getElementById(%22startid%22).value%20%3D%20startId%3B%20%0D%0Adocument.getElementById(%22endid%22).value%20%3D%20startId%3B%20%0D%0Awindow.parent.screenEvent(startId%2CstartId%2C'%3C%25%3DsSingalID%25%3E')%3B%20%0D%0A%7Delse%7B%20%0D%0Acandraw%20%3D%200%3B%20%0D%0Adocument.getElementById(%22startid%22).value%20%3D%20startId%3B%20%0D%0Adocument.getElementById(%22endid%22).value%20%3D%20endId%3B%20%0D%0Awindow.parent.screenEvent(startId%2CendId%2C'%3C%25%3DsSingalID%25%3E')%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20changeEnd(id)%20%0D%0A%7B%20%0D%0A%2F%2F%E8%8E%B7%E5%BE%97%E4%BA%86%E6%9C%80%E5%90%8E%E7%9A%84%E4%B8%80%E4%B8%AA%E6%A0%BC%E5%AD%90%E3%80%82%20%0D%0Aif(candraw%20%3D%3D%201)%7B%20%0D%0AendId%20%3D%20id%3B%20%0D%0A%2F%2Falert(endId)%3B%20%0D%0A%2F%2F%E7%AE%97%E6%B3%95%20%0D%0A%2F*%20%0D%0A*%E6%A0%B9%E6%8D%AE%E8%B5%B7%E5%A7%8BID%20%E5%92%8C%20%E6%9C%80%E5%90%8EID%E6%9D%A5%E7%A1%AE%E5%AE%9A%E6%98%AF%E5%93%AA%E4%BA%9B%E6%A0%BC%E5%AD%90%E5%8F%98%20%0D%0A*%20%E8%AE%A1%E7%AE%97start%E5%92%8Cend%E7%9A%84%E8%A1%8C%EF%BC%8C%E5%88%97%E6%95%B0%20%0D%0A*%2F%20%0D%0AchangeColorBySE(startId%2CendId)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0Afunction%20neverDragDivision(fObj)%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0Aif%20(!fObj)%20return%3B%20%0D%0Athis.bDraged%20%3D%20false%3B%20%0D%0Athis.oDragOrig%20%3D%20fObj%3B%20%0D%0AoDragOrig.onmousedown%20%3D%20function()%20%0D%0A%7B%20%0D%0AoDragOrig.style.backgroundColor%3D%22%23FFFFFF%22%3B%20%0D%0A%2F%2Falert(event.clientY)%3B%20%0D%0A%2F%2Falert(oDragOrig.offsetTop)%3B%20%0D%0A%2F%2Fvar%20ofs%20%3D%20Offset(oDragOrig)%3B%20%0D%0A%2F%2F%20oDragOrig.style.position%20%3D%20%22absolute%22%3B%20%0D%0A%2F%2FoDragOrig.style.left%20%3D%20ofs.l%3B%20%0D%0A%2F%2FoDragOrig.style.top%20%3D%20ofs.t%3B%20%0D%0A%2F%2Falert(oDragOrig.style.top)%3B%20%0D%0A%2F%2FoDragOrig.X%20%3D%20event.clientX%20-%20ofs.l%3B%20%0D%0A%2F%2FoDragOrig.Y%20%3D%20event.clientY%20-%20ofs.t%3B%20%0D%0AbDraged%20%3D%20true%3B%20%0D%0A%7D%3B%20%0D%0A%2F*%20%0D%0AoDragOrig.onmousemove%20%3D%20function()%20%0D%0A%7B%20%0D%0Aif%20(!bDraged)%20return%3B%20%0D%0AoDragOrig.setCapture()%3B%20%0D%0AoDragOrig.style.left%20%3D%20event.clientX%20-%20oDragOrig.X%3B%20%0D%0AoDragOrig.style.top%20%3D%20event.clientY%20-%20oDragOrig.Y%3B%20%0D%0A%7D%3B*%2F%20%0D%0A%2F*%20%0D%0AoDragOrig.onmouseup%20%3D%20function()%20%0D%0A%7B%20%0D%0AbDraged%20%3D%20false%3B%20%0D%0AoDragOrig.releaseCapture()%3B%20%0D%0A%7D%3B*%2F%20%0D%0Afunction%20Offset(e)%20%7B%20%0D%0Avar%20t%20%3D%20e.offsetTop%3B%20%0D%0Avar%20l%20%3D%20e.offsetLeft%3B%20%0D%0Avar%20w%20%3D%20e.offsetWidth%3B%20%0D%0Avar%20h%20%3D%20e.offsetHeight%3B%20%0D%0Awhile(ee%3De.offsetParent)%20%7B%20%0D%0At%2B%3De.offsetTop%3B%20%0D%0Al%2B%3De.offsetLeft%3B%20%0D%0A%7D%20%0D%0Areturn%20%7B%20t%3At%2C%20l%3Al%2C%20w%3Aw%2C%20h%3Ah%20%7D%20%0D%0A%7D%3B%20%0D%0A%7D%7D%3B%20%0D%0A%3C%2FSCRIPT%3E"> <style type="text/css"> <!-- body { scrollbar-face-color: #E9F1F7; /*面部颜色*/ scrollbar-shadow-color: #D8E2E7; /*内边框右下*/ scrollbar-highlight-color: #FFFFFF; /*内边框左上*/ scrollbar-3dlight-color: #96AABD; /*外边框左上*/ scrollbar-darkshadow-color: #96AABD; /*外边框右下*/ scrollbar-track-color: #e2e7eb; /*底部颜色*/ scrollbar-arrow-color: #96AABD; /*三角头*/ background-color: #F1F4F7; } --> </style> </head> <body onselectstart="return false" oncontextmenu="window.event.returnValue=false" onmouseup=main_mouseup()> <center> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Adocument.write('%3Ctable%20border%3D%220%22%20align%3D%22center%22%3E')%3B%20%0D%0Adocument.write('%3Ctr%3E')%3B%20%0D%0A%0D%0Anumber%3D1%3B%20%0D%0Anumber1%3D1%3B%20%0D%0Avar%20i%3B%20%0D%0Aup%3D5%3B%20%0D%0Alist%3D8%3B%20%0D%0Afor(i%3D0%3Bi%3C(up*list)%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Adocument.write('%3Ctd%20width%3D%2260%22%20height%3D%2260%22%20bgColor%3D%22%23BEBEBE%22%20id%3D%22'%2Bi%2B'%22%20onmouseMove%3D%22changeEnd(parseInt(id))%22%20onmouseUp%3D%22changUpEnd()%22%20onmouseDown%3D%22changeStart(parseInt(id))%22%20onclick%3D%22changecolor(parseInt(id))%22)%3E%3C%2Ftd%3E')%3B%20%0D%0Aif((i%3C((up*list)-list))%26%26(i%2B1)%25list%3D%3D0)%20%0D%0A%7B%20%0D%0Adocument.write('%3C%2Ftr%3E%3Ctr%3E')%3B%20%0D%0A%0D%0Anumber%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.write('%3C%2Ftr%3E%3Ctr%3E')%3B%20%0D%0Adocument.write('%3Ctd%3E')%3B%20%0D%0Adocument.write('%3C%2Ftd%3E')%3B%20%0D%0Adocument.write('%3C%2Ftr%3E%3C%2Ftable%3E')%3B%20%0D%0A%0D%0Afunction%20resetcheck()%7B%20%0D%0Afor(i%3D0%3Bi%3C(up*list)%3Bi%2B%2B)%7B%20%0D%0AchangeColorToNotSelected(i)%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </center> <!-- strat id<input type=text value="" id="startid" name="startid" /> end id<input type=text value="" id="endid" name="endid" /> --> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程