些许总结------window.clientX
对与window.clientX,window.clientY的理解
1 <script type="text/javascript"> 2 function show_coords(event) { 3 x = event.clientX 4 y = event.clientY 5 alert("X coords: " + x + ", Y coords: " + y) 6 } 7 </script>
HTML元素中
1 <body onmousedown="show_coords(event)"> 2 <!-- clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标 --> 3 <!-- clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标 --> 4 <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标</p> 5 </body>
选中table的某一个单元格后，该单元格变色。
设计CSS格式
1 <title>选中表格中的单元格</title> 2 <style type="text/css"> 3 .STYLE3 {font-size: 13px; color: #FF0000; } 4 .STYLE4 {font-size: 12px} 5 </style>
制作表格HTML
1 <table width="547" height="200" border="0" align="center" cellpadding="0" cellspacing="0"> 2 <tr> 3 <td height="34"><img src="images/2.jpg" width="547" height="34"></td> 4 </tr> 5 <tr> 6 <td align="center" valign="top" background="images/2.jpg"> 7 <table id="table1" width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC"> 8 <tr> 9 <td width="113" height="24" align="center" bgcolor="#FFFFFF"><span class="STYLE3">商品名称</span></td> 10 <td width="83" align="center" bgcolor="#FFFFFF"><span class="STYLE3">数量</span></td> 11 <td width="139" align="center" bgcolor="#FFFFFF"><span class="STYLE3">价格</span></td> 12 <td width="142" align="center" bgcolor="#FFFFFF"><span class="STYLE3">合计</span></td> 13 </tr> 14 <tr> 15 <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手机</td> 16 <td align="center" bgcolor="#FFFFFF" class="STYLE4">1</td> 17 <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td> 18 <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td> 19 </tr> 20 <tr> 21 <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手表</td> 22 <td align="center" bgcolor="#FFFFFF" class="STYLE4">1</td> 23 <td align="center" bgcolor="#FFFFFF" class="STYLE4">999</td> 24 <td align="center" bgcolor="#FFFFFF" class="STYLE4">999</td> 25 </tr> 26 <tr> 27 <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">数码相机</td> 28 <td align="center" bgcolor="#FFFFFF" class="STYLE4">2</td> 29 <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td> 30 <td align="center" bgcolor="#FFFFFF" class="STYLE4">4800</td> 31 </tr> 32 <tr> 33 <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手机</td> 34 <td align="center" bgcolor="#FFFFFF" class="STYLE4">4</td> 35 <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td> 36 <td align="center" bgcolor="#FFFFFF" class="STYLE4">9600</td> 37 </tr> 38 <tr> 39 <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">移动硬盘</td> 40 <td align="center" bgcolor="#FFFFFF" class="STYLE4">4</td> 41 <td align="center" bgcolor="#FFFFFF" class="STYLE4">400</td> 42 <td align="center" bgcolor="#FFFFFF" class="STYLE4">1600</td> 43 </tr> 44 <tr> 45 <td height="20" align="center" bgcolor="#FFFFFF"><span class="STYLE4">笔记本电脑</span></td> 46 <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">2</span></td> 47 <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">4150</span></td> 48 <td align="center" bgcolor="#FFFFFF"><span class="STYLE4">9200</span></td> 49 </tr> 50 </table></td> 51 </tr> 52 <tr> 53 <td height="27"><img src="images/2.jpg" width="547" height="27"></td> 54 </tr> 55 </table>
函数设计，鼠标点击某一个单元格后变色。
1 <script language="javascript"> 2 var lastSelection = null; 3 function select(element){ 4 var e, r, c; 5 if(element == null){ 6 e = event.srcElement; //获取body元素的原始记录 7 }else{ 8 e = element; 9 } 10 if(e.tagName == "TD"){ 11 c = findcell(e); 12 if(c != null){ 13 if(lastSelection != null){ 14 deselectroworcell(window.lastSelection); 15 } 16 selectroworcell(c); 17 lastSelection = c; 18 } 19 } 20 window.event.cancelBubble = true; //取消冒泡语句,用于防止向下一个外层对象冒泡 21 } 22 table1.onclick=select; 23 function findcell(e){ 24 if(e.tagName == "TD"){ 25 return e; 26 }else if(e.tagName == "BODY"){ 27 return null; 28 }else{ 29 return findcell(e.parentElement); 30 } 31 } 32 function selectroworcell(r){ 33 r.runtimeStyle.backgroundColor="darkblue"; 34 r.runtimeStyle.color="white"; 35 } 36 function deselectroworcell(r){ 37 r.runtimeStyle.backgroundColor = ""; 38 r.runtimeStyle.color = ""; 39 } 40 </script>
2.创建一个可以移动的窗体
CSS样式
1 <style type="text/css"> 2 <!-- 3 .STYLE1 { 4 font-size: 13px 5 } 6 --> 7 </style>
设计div的样式
<div id="div1" class=yellow style="VISIBILITY: visible; background-color: #FFFF00; position: absolute; top: 60; left: 200; width: 360; height: 250; filter: revealTrans(transition = 12, ' duration = 0.1) blendTrans(duration = 0.1)"> <div id=title onmousedown=div_down( "div1") style="background-color: #30608F; padding: 2px; font-size: 13px; text-indent: 5; color: #FFFFFF; cursor: move">有限公司</div> <img id=close onclick=Hide(div1) style="position: absolute; right: 2; top: 2" border="0" src="01.jpg" width="15" height="15"> <span class="STYLE1"><br> 大学毕业后，我要好好工作</span> </div>
实现功能的函数
1 <script language="JavaScript"> 2 var Obj="none"; 3 var pX 4 var pY 5 document.onmousemove=div_move; 6 document.onmouseup=div_up; 7 function div_down(tag){ 8 Obj=tag; 9 pX=parseInt(document.all(Obj).style.left)-event.x; 10 pY=parseInt(document.all(Obj).style.top)-event.y; 11 } 12 function div_move(){ 13 if(Obj!="none"){ 14 document.all(Obj).style.left=pX+event.x; 15 document.all(Obj).style.top=pY+event.y; 16 event.returnValue=false; 17 } 18 } 19 function div_up(){Obj="none";} 20 function Hide(divid){ 21 divid.filters.revealTrans.apply(); 22 divid.style.visibility = "hidden"; 23 divid.filters.revealTrans.play(); 24 } 25 </script>
3》成功实现表格的移动
CSS样式设计
1 <title>制作浮在页面的窗口</title> 2 <style type='text/css'> 3 <!-- 4 a:visited { 5 text-decoration: none; 6 color: slategray; 7 } 8 9 a:hover { 10 text-decoration: underline; 11 color: slategray; 12 } 13 14 a:link { 15 text-decoration: none; 16 color: slategray; 17 } 18 --> 19 </style>
函数设计
1 <script language=JScript>//可以打包为js文件; 2 var x0=0,y0=0,x1=0,y1=0; 3 var offx=6,offy=6; 4 var moveable=false; 5 var hover='orange',normal='slategray';//color; 6 var index=10000;//z-index; 7 8 function startDrag(obj) { //开始拖动; 9 if(event.button==1) { 10 //锁定标题栏; 11 obj.setCapture(); 12 //定义对象; 13 var win = obj.parentNode; 14 var sha = win.nextSibling; 15 //记录鼠标和层位置; 16 x0 = event.clientX; 17 y0 = event.clientY; 18 x1 = parseInt(win.style.left); 19 y1 = parseInt(win.style.top); 20 //记录颜色; 21 normal = obj.style.backgroundColor; 22 //改变风格; 23 obj.style.backgroundColor = hover; 24 win.style.borderColor = hover; 25 obj.nextSibling.style.color = hover; 26 sha.style.left = x1 + offx; 27 sha.style.top = y1 + offy; 28 moveable = true; 29 } 30 } 31 32 function drag(obj) {//拖动; 33 if(moveable) { 34 var win = obj.parentNode; 35 var sha = win.nextSibling; 36 win.style.left = x1 + event.clientX - x0; 37 win.style.top = y1 + event.clientY - y0; 38 sha.style.left = parseInt(win.style.left) + offx; 39 sha.style.top = parseInt(win.style.top) + offy; 40 } 41 } 42 //停止拖动; 43 function stopDrag(obj) { 44 if(moveable) { 45 var win = obj.parentNode; 46 var sha = win.nextSibling; 47 var msg = obj.nextSibling; 48 win.style.borderColor = normal; 49 obj.style.backgroundColor = normal; 50 msg.style.color = normal; 51 sha.style.left = obj.parentNode.style.left; 52 sha.style.top = obj.parentNode.style.top; 53 obj.releaseCapture(); 54 moveable = false; 55 } 56 } 57 //获得焦点; 58 function getFocus(obj) { 59 if(obj.style.zIndex!=index) { 60 index = index + 2; 61 var idx = index; 62 obj.style.zIndex=idx; 63 obj.nextSibling.style.zIndex=idx-1; 64 } 65 } 66 67 function min(obj) {//最小化; 68 var win = obj.parentNode.parentNode; 69 var sha = win.nextSibling; 70 var tit = obj.parentNode; 71 var msg = tit.nextSibling; 72 var flg = msg.style.display=="none"; 73 if(flg) { 74 win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; 75 sha.style.height = win.style.height; 76 msg.style.display = "block"; 77 obj.innerHTML = "0"; 78 } 79 else { 80 win.style.height = parseInt(tit.style.height) + 2*2; 81 sha.style.height = win.style.height; 82 obj.innerHTML = "2"; 83 msg.style.display = "none"; 84 } 85 } 86 87 function cls(obj){ //关闭; 88 var win = obj.parentNode.parentNode; 89 var sha = win.nextSibling; 90 win.style.visibility = "hidden"; 91 sha.style.visibility = "hidden"; 92 } 93 94 function xWin(id,w,h,l,t,tit,msg){//创建一个对象; 95 index = index+2; 96 this.id = id; 97 this.width = w; 98 this.height = h; 99 this.left = l; 100 this.top = t; 101 this.zIndex = index; 102 this.title = tit; 103 this.message = msg; 104 this.obj = null; 105 this.bulid = bulid; 106 this.bulid(); 107 } 108 //初始化; 109 function bulid() { 110 var str = "" 111 + " <div id=xMsg" + this.id + " " 112 + "style='" 113 + "z-index:" + this.zIndex + ";" 114 + "width:" + this.width + ";" 115 + "height:" + this.height + ";" 116 + "left:" + this.left + ";" 117 + "top:" + this.top + ";" 118 + "background-color:" + normal + ";" 119 + "color:" + normal + ";" 120 + "font-size:12px;" 121 + "font-family:Verdana;" 122 + "position:absolute;" 123 + "cursor:default;" 124 + "border:2px solid " + normal + ";" 125 + "' " 126 + "onmousedown='getFocus(this)'>" 127 + " <div " 128 + "style='" 129 + "background-color:" + normal + ";" 130 + "width:" + (this.width-2*2) + ";" 131 + "height:20;" 132 + "color:white;" 133 + "' " 134 + "onmousedown='startDrag(this)' " 135 + "onmouseup='stopDrag(this)' " 136 + "onmousemove='drag(this)' " 137 + "ondblclick='min(this.childNodes[1])'" 138 + ">" 139 + " <span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + " </span>" 140 + " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0 </span>" 141 + " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r </span>" 142 + " </div>" 143 + " <div style='" 144 + "width:100%;" 145 + "height:" + (this.height-20-4) + ";" 146 + "background-color:white;" 147 + "line-height:14px;" 148 + "word-break:break-all;" 149 + "padding:3px;" 150 + "'>" + this.message + " </div>" 151 + " </div>" 152 + " <div style='" 153 + "width:" + this.width + ";" 154 + "height:" + this.height + ";" 155 + "top:" + this.top + ";" 156 + "left:" + this.left + ";" 157 + "z-index:" + (this.zIndex-1) + ";" 158 + "position:absolute;" 159 + "background-color:black;" 160 + "filter:alpha(opacity=40);" 161 + "'>by wildwind </div>"; 162 document.body.insertAdjacentHTML("beforeEnd",str); 163 } 164 </script> 165 <script language='JScript'>function initialize(){ 166 var b = new xWin("2",240,200,100,100,"商品信息"," 商品名称: <input name='WareName' class='input1' type='text'> <br> 商品编号: <input name='WareID' class='input1' type='text'> <br> 计量单价: <input name='price' class='Unit' type='text'> <br> 单价: <input name='Price' class='input1' type='text'>"); 167 } 168 169 /*---caiying2009--*/ 170 var outPut2 171 function initInput(){ 172 outPut2=[];setInput(2,outPut2) 173 } 174 175 function setInput(n,_a){ 176 var obj_con=document.getElementById("xMsg"+n) 177 var obj_input=obj_con.getElementsByTagName("input"),j=obj_input.length 178 for (var i=0;i<j;i++)obj_input[i].onblur=function(){_a[_a.length]=[this.name,this.value]};//请自己设定数组元素内容－－这里是演示 179 } 180 window.onload = function(){initialize();initInput()} 181 </script>
HTML表单元素
1 <input type=button value=test_2 onclick="alert(outPut2)" title="请自己设定对outPut2的应用，包括输入验证、传值到父窗对应对象等"/>
浙公网安备 33010602011771号