- 浏览: 529748 次
- 性别:
- 来自: 山东济南
文章分类
最新评论
-
dragon_8844:
非常不错,nice
java.util.concurrent 多线程框架 -
wusendong:
很好的文章!受益匪浅,谢谢!
java.util.concurrent 多线程框架 -
SINCE1978:
你也关注并发啊
java.util.concurrent 多线程框架 -
lku1314:
这个不错 刚刚找到这个组建 以前孤陋寡闻了 像lz学习!标 ...
quartz 在WEB中应用小结 -
lliiqiang:
人们对于目标需要的需求明确的去做,对于目标以外的因素是随机的执 ...
flex和后端的数据交互(一)--XML和HTTPService
1.数组操作时的push
2.获得当前样式
3. 移动数组中元素位置
4.校验密码级别
5.清除文件选择框中的内容
6. 创建事件
7.js 画图
8.查找页面中的字符
9.字符替换
10.获得页面中选中的字符串
11.MediaPlayer控制
12.鼠标滚轮事件
13.清除节点中的空白节点
14.左右方向无缝滚动
15.Scroll到底部只触发一次事件
16.在textarea光标位置插入字符
17.浏览器窗体宽高集合
var a = [],b = [],c = []; a.push([1,2]); a.push([3,4]); Array.prototype.push.apply(b,[1,2]); Array.prototype.push.apply(b,[3,4]); c.push(5,6); c.push(7,8); alert(a+'\n'+a.length+'\n'+a[0]); alert(b+'\n'+b.length+'\n'+b[0]); alert(c+'\n'+c.length+'\n'+c[0]);
2.获得当前样式
function getCurrentStyle(oElement, sProperty) { if(oElement.currentStyle){ return oElement.currentStyle[sProperty]; }else if(window.getComputedStyle){ sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase(); return window.getComputedStyle(oElement, null).getPropertyValue(sProperty); }else{ return null; } }
3. 移动数组中元素位置
Array.prototype.moveComponent=function (s,t){ if(s!=t) { var temp=this[s]; this.splice(s,1); this.splice(t,0,temp); } return this; } var a=new Array(0,1,2,3,4,5,6,7); alert(a); alert(a.moveComponent(2,6));
4.校验密码级别
var checkPassWord = function (string) { return string.replace(/^(?:(?=.{4})(?=.*([a-z])|.)(?=.*([A-Z])|.)(?=.*(\d)|.)(?=.*(\W)|.).*|.*)$/, "$1$2$3$4").length; }; alert(checkPassWord("JS示例代码"));
5.清除文件选择框中的内容
<input type="file" id="file_choose" /><button onclick="clearf();">clear</button>
var clearf = function(){ var dx = document.getElementById('file_choose'); dx.value = ''; if(document.selection){ dx.select(); document.selection.clear(); } };
6. 创建事件
<div id="d" onclick="alert(1)"> </div>
window.onload = function () { var d = document.getElementById('d'); if (d.addEventListener) { d.addEventListener('click', function () { alert(2); }, false); var evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, true); d.dispatchEvent(evt); } else { d.attachEvent('onclick', function () { alert(3); }); d.click(); } }
7.js 画图
<HTML> <HEAD> <TITLE>画图</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="emu"> <META NAME="Keywords" CONTENT="chart javascript"> <META NAME="Description" CONTENT="emu's dhtml chart"> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawLine(x0,y0,x1,y1,color){ var rs = ""; if (y0 == y1) //画横线 { if (x0>x1){var t=x0;x0=x1;x1=t} rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>"; } else if (x0 == x1) //画竖线 { if (y0>y1){var t=y0;y0=y1;y1=t} rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>"; } else { var lx = x1-x0 var ly = y1-y0 var l = Math.sqrt(lx*lx+ly*ly) rs = new Array(); for (var i=0;i<l;i+=1) { var p = i/l; var px = parseInt(x0 + lx*p); var py = parseInt(y0 + ly*p); rs[rs.length] = "<p class=emuWH style='top:"+py+";left:"+px+";background-color:"+color+"'/>"; } rs = rs.join(""); } return rs } function drawRectangle(x0,y0,x1,y1,color,title) { if (x0 == x1 || y0 == y1) return; if (x0>x1) {var t=x0;x0=x1;x1=t} if (y0>y1) {var t=y0;y0=y1;y1=t} return "<table style='top:"+y0+";left:"+x0+";position:absolute' title="+title+"><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"> </td></table>"; } function outText(x0,y0,text,fontSize,color){ return "<p style='top:"+y0+";left:"+x0+";position:absolute;color:"+color+";font-size:"+fontSize+"'>"+text+"</p>"; } var points = new Array(1000); function drawPie(x0,y0,radius,startAngle,endAngle,color){ if (points.length<radius<<2) points.length=radius<<2; var startAngle = startAngle*Math.PI/180; var endAngle = endAngle*Math.PI/180; var maxX=0,maxY=0,minX=0,minY=0; var pointsLength = 0; var lines ; // get arc points var step = 1/radius; for (var i=startAngle;i<endAngle;i+=step){ var x = Math.round(Math.sin(i)*radius); var y = Math.round(Math.cos(i)*radius) points[pointsLength++]=[x,y]; if (maxX<x) maxX=x; if (minX>x) minX=x; if (maxY<y) maxY=y; if (minY>y) minY=y; } // get radius points var dx1=Math.sin(startAngle)*radius; var dy1=Math.cos(startAngle)*radius; var dx2=Math.sin(endAngle)*radius; var dy2=Math.cos(endAngle)*radius; var L = Math.sqrt(dx1*dx1+dy1*dy1); var stepx1 = dx1/L , stepy1 = dy1/L ,stepx2 = dx2/L , stepy2 = dy2/L ; for (var i=0;i<L;i+=.99){ points[pointsLength++] = [Math.round(stepx1*i),Math.round(stepy1*i)] points[pointsLength++] = [Math.round(stepx2*i),Math.round(stepy2*i)] } var dx = maxX-minX+1; var dy = maxY-minY+1; if (dx>dy){ lines = new Array(dy); for (var i=pointsLength-1;i>-1;i--){ var p0 = points[i]; var px = p0[0]; var y = p0[1]-minY; if (lines[y]){ if (lines[y][0]>px) //left point lines[y][0] = px; if (lines[y][1]<px) //right point lines[y][1] = px; }else{ lines[y]=[px,px]; } } for (var i=dy-1;i>-1;i--){ var left = lines[i][0]; lines[i] = "<p class=emuH style='top:"+(i+minY+y0)+";left:"+(left+x0)+";width:"+(lines[i][1]-left)+";background-color:"+color+"'/>"; } }else{ lines = new Array(dx); for (var i=pointsLength-1;i>-1;i--){ var p0 = points[i]; var py = p0[1]; var x = p0[0]-minX; if (lines[x]){ if (lines[x][0]>py) //top point lines[x][0] = py; if (lines[x][1]<py) //buttom point lines[x][1] = py; }else{ lines[x]=[py,py]; } } for (var i=dx-1;i>-1;i--){ var top = lines[i][0]; lines[i] = "<p class=emuW style='left:"+(i+minX+x0)+";top:"+(top+y0)+";height:"+(lines[i][1]-top)+";background-color:"+color+"'/>"; } } return lines.join(""); } function drawArc(x0,y0,radius,startAngle,endAngle,color,step){ if (step == null || isNaN(step)) step=1; rs = new Array(); tmpar = new Array(); startAngle = startAngle/180*Math.PI; endAngle = endAngle/180*Math.PI; for (var i=startAngle;i<endAngle;i+=(step/radius)) { var dx = parseInt(Math.sin(i)*radius+x0); var dy = parseInt(Math.cos(i)*radius+y0); rs[rs.length] = "<p class=emuWH style='top:"+dy+";left:"+dx+";background-color:"+color+"'/>"; } return (rs.join("")); } function fixTo(s,i){ if (s==null || s=="" || isNaN(s) || Math.round(s)==0) return 0; i = Math.round(i); if (i==0) return Math.round(s); if (i==null || isNaN(i) || i<0) i=2; var v = Math.round(s*Math.pow(10,i)).toString(); if (/e/i.test(v)) return s; return v.substr(0,v.length-i)+"."+v.substr(v.length-i); } //--> </SCRIPT> <style> .emuW{position:absolute;font-size:1px;width:1} .emuH{position:absolute;font-size:1px;height:1} .emuWH{position:absolute;font-size:1px;width:1;height:1} A{text-decoration:none;color:#FF66FF} </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawCol(e){ var div1 = document.getElementById("canvas") var rows = e.parentNode.parentNode.rows; var cellIndex = e.cellIndex; var data = []; for (var i=1;i<rows.length;i++){ var d = parseInt(rows[i].cells[cellIndex].innerHTML);; if (isNaN(d)){ alert("Invalid data!"); return; } var color = rows[i].bgColor; var title = rows[i].cells[0].innerHTML; data[i-1] = [d,color,title] } var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"得分情况对比",15,"blue"); div1.innerHTML = chartTitle+drawPoleWidthData(data).join("")+drawPieWidthData(data).join(""); alert(div1.innerHTML); } function drawPieWidthData(data){ var sum=0; var rs = new Array(); for (var i=0;i<data.length;i++) sum += data[i][0]; var startAngle = 0; for (var i=0;i<data.length;i++){ var angle = data[i][0]/sum*360; rs[i] = drawPie(580,250,100,startAngle,startAngle+=angle,data[i][1]) } return rs; } function drawPoleWidthData(data){ var rs = new Array(); var max = 0; for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0]; for (var i=0;i<data.length;i++){ rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue"); var top = 400-200*data[i][0]/max; rs[rs.length] = drawRectangle(i*100+130,top,i*100+170,400,data[i][1],"¥"+fixTo(data[i][0])) } rs[rs.length]= drawLine(100,400,500,400,"black") rs[rs.length]= drawLine(100,400,100,150,"black") rs[rs.length]= drawLine(500,400,490,405,"black") rs[rs.length]= drawLine(100,150,95,160,"black") rs[rs.length]= drawLine(500,400,490,395,"black") rs[rs.length]= drawLine(100,150,105,160,"black") return rs; } function drawRow(e){ var div1 = document.getElementById("canvas") var row = e.parentNode; var cells = row.cells; var rowIndex = row.rowIndex; var data = []; for (var i=1;i<cells.length;i++){ var d = parseInt(cells[i].innerHTML);; if (isNaN(d)){ alert("Invalid data!"); return; } var color = row.bgColor; var title = row.parentNode.rows[0].cells[i].innerHTML; data[i-1] = [d,color,title] } var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"得分情况走向",15,"blue"); div1.innerHTML = chartTitle+drawLineWidthData(data).join(""); alert(div1.innerHTML); } function drawLineWidthData(data){ var rs = new Array(); rs[rs.length]= drawLine(100,400,770,400,"black") rs[rs.length]= drawLine(100,400,100,150,"black") rs[rs.length]= drawLine(770,400,760,405,"black") rs[rs.length]= drawLine(100,150,95,160,"black") rs[rs.length]= drawLine(770,400,760,395,"black") rs[rs.length]= drawLine(100,150,105,160,"black") var max = 0; for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0]; var top; for (var i=0;i<data.length;i++){ rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue"); if (i>0){ rs[rs.length] = drawLine(i*100+50,top,i*100+150,(400-200*data[i][0]/max),data[i][1]) } top = 400-200*data[i][0]/max; } return rs; } //--> </SCRIPT> </HEAD> <BODY> <TABLE bgcolor=black cellspacing=1> <TR bgcolor=#FFFFCC> <TD>得分</TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第1场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第2场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第3场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第4场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第5场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第6场</A></TD> <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第7场</A></TD> </TR> <TR bgcolor=#CCFFCC> <TD onclick="drawRow(this)"><A HREF="javascript:;">二分球</A></TD> <TD>14</TD> <TD>24</TD> <TD>8</TD> <TD>32</TD> <TD>12</TD> <TD>18</TD> <TD>22</TD> </TR> <TR bgcolor=#CCCCFF> <TD onclick="drawRow(this)"><A HREF="javascript:;">三分球</A></TD> <TD>9</TD> <TD>3</TD> <TD>15</TD> <TD>6</TD> <TD>3</TD> <TD>9</TD> <TD>3</TD> </TR> <TR bgcolor=#FFCCCC> <TD onclick="drawRow(this)"><A HREF="javascript:;">罚球</A></TD> <TD>8</TD> <TD>7</TD> <TD>2</TD> <TD>11</TD> <TD>3</TD> <TD>5</TD> <TD>12</TD> </TR> </TABLE> <div id=canvas></div> </BODY> </HTML>
8.查找页面中的字符
if(document.createRange){ var range = document.createRange(); }else var range = document.body.createTextRange(); if(range.findText){ while(range.findText("字符")){ range.pasteHTML(range.text.fontcolor("#4499ee")); range.collapse(true); } }else{ var s,n; s = window.getSelection(); while(window.find("字符")){ var n = document.createElement("SPAN"); n.style.color="#ff0000" s.getRangeAt(0).surroundContents(n); } }
9.字符替换
String.prototype.format=function() { if(arguments.length==0) return this; for(var s=this, i=0; i<arguments.length; i++) s=s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]); return s; };
10.获得页面中选中的字符串
function getSelectedText() { if (window.getSelection) { // This technique is the most likely to be standardized. // getSelection() returns a Selection object, which we do not document. return window.getSelection().toString(); } else if (document.getSelection) { // This is an older, simpler technique that returns a string return document.getSelection(); } else if (document.selection) { // This is the IE-specific technique. // We do not document the IE selection property or TextRange objects. return document.selection.createRange().text; } }
11.MediaPlayer控制
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="mp" width="300" height="240"> <param name="AudioStream" value="-1"> <param name="AutoSize" value="-1"> <!--是否自动调整播放大小--> <param name="AutoStart" value="-1"> <!--是否自动播放--> <param name="AnimationAtStart" value="-1"> <param name="AllowScan" value="-1"> <param name="AllowChangeDisplaySize" value="-1"> <param name="AutoRewind" value="0"> <param name="Balance" value="0"> <!--左右声道平衡,最左-9640,最右9640--> <param name="BaseURL" value> <param name="BufferingTime" value="15"> <!--缓冲时间--> <param name="CaptioningID" value> <param name="ClickToPlay" value="-1"> <param name="CursorType" value="0"> <param name="CurrentPosition" value="0"> <!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0--> <param name="CurrentMarker" value="0"> <param name="DefaultFrame" value> <param name="DisplayBackColor" value="0"> <param name="DisplayForeColor" value="16777215"> <param name="DisplayMode" value="0"> <param name="DisplaySize" value="0"> <!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理--> <param name="Enabled" value="-1"> <param name="EnableContextMenu" value="-1"> <!-是否用右键弹出菜单控制--> <param name="EnablePositionControls" value="-1"> <param name="EnableFullScreenControls" value="-1"> <param name="EnableTracker" value="-1"> <!--是否允许拉动播放进度条到任意地方播放--> <param name="Filename" value="bh.mp3" valuetype="ref"> <param name="InvokeURLs" value="-1"> <param name="Language" value="-1"> <param name="Mute" value="0"> <!--是否静音--> <param name="PlayCount" value="10"> <!--重复播放次数,0为始终重复--> <param name="PreviewMode" value="-1"> <param name="Rate" value="1"> <!--播放速度1.0-2.0倍的速度播放--> <param name="SAMILang" value> <param name="SAMIStyle" value> <param name="SAMIFileName" value> <!--选择同时播放(伴音)的歌曲--> <param name="SelectionStart" value="-1"> <param name="SelectionEnd" value="-1"> <param name="SendOpenStateChangeEvents" value="-1"> <param name="SendWarningEvents" value="-1"> <param name="SendErrorEvents" value="-1"> <param name="SendKeyboardEvents" value="0"> <param name="SendMouseClickEvents" value="0"> <param name="SendMouseMoveEvents" value="0"> <param name="SendPlayStateChangeEvents" value="-1"> <param name="ShowCaptioning" value="0"> <!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示--> <param name="ShowControls" value="-1"> <!--是否显示控制,比如播放,停止,暂停--> <param name="ShowAudioControls" value="-1"> <!--是否显示音量控制--> <param name="ShowDisplay" value="0"> <!--显示节目信息,比如版权等--> <param name="ShowGotoBar" value="0"> <!--一条框,在下面,有往下箭头--> <param name="ShowPositionControls" value="-1"> <!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制--> <param name="ShowStatusBar" value="-1"> <!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间--> <param name="ShowTracker" value="-1"> <!--是否显示当前播放跟踪条,即当前的播放进度条--> <param name="TransparentAtStart" value="-1"> <param name="VideoBorderWidth" value="0"> <!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小--> <param name="VideoBorderColor" value="0"> <!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色--> <param name="VideoBorder3D" value="0"> <param name="Volume" value="0"> <!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640,最大0--> <param name="WindowlessVideo" value="0"> <!--如果是0可以允许全屏,否则只能在窗口中查看--> </object> <br> <b>播放控制:</b><br> 音乐切换: <input type="button" onclick="mp.Filename='sha.mp3'" value="你是风儿我是沙"> <input type="button" onclick="mp.Filename='bh.mp3'" value="白狐"> <input type="button" onclick="alert(mp.Filename)" value="当前曲目"> <br> 播放控制: <input type="button" onclick="mp.play()" value="播放"> <input type="button" onclick="mp.pause()" value="暂停"> <input type="button" onclick="mp.pause();mp.CurrentPosition=0" value="停止"> <br> 声道控制: <input type="button" onclick="mp.Balance=9640" value="左声道"> <input type="button" onclick="mp.Balance=0" value="立体声"> <input type="button" onclick="mp.Balance=-9640" value="右声道"> <input type="button" onclick="alert(mp.Balance)" value="当前状态"> <br> 进度控制: <input type="button" onclick="mp.CurrentPosition=0" value="回到开始"> <input type="button" onclick="mp.CurrentPosition+=60" value="快进一分钟"> <input type="button" onclick="mp.CurrentPosition-=60" value="快退一分钟"> <input type="button" onclick="alert(mp.Duration)" value="总长度"> <input type="button" onclick="alert(mp.CurrentPosition)" value="当前进度"> <br> 音量控制: <script language="javascript"> function setVolume(num) { var mp=document.getElementById("mp") tnum=mp.Volume+num if(tnum>0){tnum=0} if(tnum<-10000){tnum=-10000} mp.Volume=tnum } </script> <input type="button" onclick="setVolume(200)" value="音量+"> <input type="button" onclick="setVolume(-200)" value="音量-"> <input type="button" onclick="mp.Volume=0" value="最大"> <input type="button" onclick="mp.Volume=-10000" value="最小"> <input type="button" onclick="mp.Mute=-1" value="静音"> <input type="button" onclick="mp.Mute=0" value="取消静音"> <input type="button" onclick="alert(mp.Volume)" value="当前音量"> <br> 速度控制: <input type="button" onclick="if(mp.Rate<2){mp.Rate+=0.1}" value="加速"> <input type="button" onclick="if(mp.Rate>0.2){mp.Rate-=0.1}" value="减速"> <input type="button" onclick="mp.Rate=1" value="正常"> <input type="button" onclick="alert(mp.Rate)" value="当前速度"> <br><b>界面控制:</b><br> 字幕控制: <input type="button" onclick="mp.ShowCaptioning=-1" value="显示"> <input type="button" onclick="mp.ShowCaptioning=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowCaptioning)" value="当前状态"> <br> 音量控制: <input type="button" onclick="mp.ShowAudioControls=-1" value="显示"> <input type="button" onclick="mp.ShowAudioControls=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowAudioControls)" value="当前状态"> <br> 播放控制: <input type="button" onclick="mp.ShowControls=-1" value="显示"> <input type="button" onclick="mp.ShowControls=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowControls)" value="当前状态"> <br> 媒体信息: <input type="button" onclick="mp.ShowDisplay=-1" value="显示"> <input type="button" onclick="mp.ShowDisplay=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowDisplay)" value="当前状态"> <br> GotoBar : <input type="button" onclick="mp.ShowGotoBar=-1" value="显示"> <input type="button" onclick="mp.ShowGotoBar=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowGotoBar)" value="当前状态"> <br> 状 态 栏: <input type="button" onclick="mp.ShowStatusBar=-1" value="显示"> <input type="button" onclick="mp.ShowStatusBar=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowStatusBar)" value="当前状态"> <br> 跟 踪 条: <input type="button" onclick="mp.ShowTracker=-1" value="显示"> <input type="button" onclick="mp.ShowTracker=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowTracker)" value="当前状态"> <br> 位置控制: <input type="button" onclick="mp.ShowPositionControls=-1" value="显示"> <input type="button" onclick="mp.ShowPositionControls=0" value="隐藏"> <input type="button" onclick="alert(mp.ShowPositionControls)" value="当前状态"> <br> 窗口缩放: <input type="button" onclick="mp.DisplaySize=1" value="50%"> <input type="button" onclick="mp.DisplaySize=0" value="100%"> <input type="button" onclick="mp.DisplaySize=2" value="200%"> <input type="button" onclick="mp.DisplaySize=3" value="全屏"> <input type="button" onclick="alert(mp.DisplaySize)" value="当前状态">
12.鼠标滚轮事件
function handleMouseWheel(e){ if (!e) e = window.event; if (e.wheelDelta <= 0 || e.detail > 0) {document.getElementById('t').innerHTML='滚轮向下滚?'} else {document.getElementById('t').innerHTML='滚轮向上滚?'} } if(document.attachEvent||/(?:ie|webkit)/i.test(navigator.appVersion)){ document.onmousewheel = handleMouseWheel; }else{ window.addEventListener("DOMMouseScroll", handleMouseWheel, false); }
13.清除节点中的空白节点
<div id="test" style="border:1px solid buttonface;"> <p>p1 test</p> <p>test 2</p> <p>p2 test</p> </div> <script type="text/javascript"> function resetChildNodes(_elm){ var _cn = _elm.childNodes,_nd = null; for(var i=0;i<_cn.length;i++){ _nd = _cn[i]; if(_nd.nodeType==3&&!(_nd.nodeValue.replace(/\s/g,''))){ _elm.removeChild(_nd); } } } var obj = document.getElementById("test"); resetChildNodes(obj); document.write('<p>test childNodes[iIndex]:<br/>'); document.write(obj.childNodes[0].innerHTML+'<br/>'); document.write(obj.childNodes[1].innerHTML+'<br/>'); document.write(obj.childNodes[2].innerHTML+'<br/>'); document.write('</p>'); document.write('<p>test firstChild & lastChild:<br/>'); document.write(obj.firstChild.innerHTML+'<br/>'); document.write(obj.lastChild.innerHTML+'<br/>'); document.write('</p>'); </script>
14.左右方向无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>来自web developer navigator!的dhScroll Ver2.0.0 左右横向无缝滚动</title> <style type="text/css"> /*块1样式*/ #scroll {width:600px;height:250px;overflow:hidden;} /*块2样式*/ .mqdemoa {width:6000px!important;width:3000px;margin:0;padding:0;} /*块2子元素样式*/ .mqdemoa li {width:148px;margin:0 1px;height:250px;background:red;float:left;list-style:none;} /*其他样式,与scroll对象无关联*/ #prenext {width:600px;height:20px;overflow:hidden;} #prenext span {display:block;font:12px "宋体";width:50%;height:20px;line-height:20px;text-align:center;cursor:pointer;color:#fff;background:#000;} #prenext .pre {float:left;} #prenext .next {float:right;} </style> <script type="text/javascript"> function dhscroll(){ //author:dh20156 var dh = this; this.autoid = null; //块1 this.scrollDOM = null; //块2 this.scrollCDOM = null; //展示宽度(和块1宽度一致) this.showwidth = 0; //每次滚动长度,这个值要能被this.showwidth整除才行 this.steplength = 20; var oldlength = this.steplength; //滚动时间间隔 this.steptime = 1; //停顿时间 this.resttime = 3000; //滚动长度 this.uvwidth = 0; //无缝设置过程 this.getsw = function(){ var tempw = this.scrollCDOM.offsetWidth; var temps = this.scrollCDOM.innerHTML; this.scrollCDOM.innerHTML = [temps,temps].join(""); this.scrollCDOM.style.width = tempw*2+"px"; if(document.attachEvent){ this.scrollDOM.attachEvent("onmouseover",dh.pause); this.scrollDOM.attachEvent("onmouseout",dh.goon); }else{ this.scrollDOM.addEventListener("mouseover",dh.pause,true); this.scrollDOM.addEventListener("mouseout",dh.goon,true); } this.uvwidth = Math.ceil(this.scrollDOM.scrollWidth / 2); } //从右到左 this.scrollleft = function(){ if(this.autoid!=null){ window.clearTimeout(this.autoid); } var uvleft = this.scrollDOM.scrollLeft; uvleft += this.steplength; this.scrollDOM.scrollLeft = uvleft; if(uvleft>=this.uvwidth){ this.scrollDOM.scrollLeft = 0; } if(uvleft % this.showwidth == 0){ if(this.autostart){this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.resttime);} }else{ this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.steptime); } document.getElementById("s").innerHTML = this.uvwidth+","+uvleft; } //从左到右 this.scrollright = function(){ if(this.autoid!=null){ window.clearTimeout(this.autoid); } var uvleft = this.scrollDOM.scrollLeft; uvleft -= this.steplength; this.scrollDOM.scrollLeft = uvleft; if(uvleft <= 0){ this.scrollDOM.scrollLeft = this.uvwidth; } if(uvleft % this.showwidth == 0){ if(this.autostart){this.autoid = window.setTimeout(function(){dh.scrollright()},dh.resttime);} }else{ this.autoid = window.setTimeout(function(){dh.scrollright()},dh.steptime); } document.getElementById("s").innerHTML = this.uvwidth+","+uvleft; } //开始滚动,参数为方向,首屏是否停顿 this.go = function(direction,rest){ this.autostart = true; if(this.autoid!=null){ window.clearTimeout(this.autoid); } if(direction=="left"){ if(rest){ this.autoid = window.setTimeout(function(){dh.scrollleft()},5000); }else{ dh.scrollleft(); } }else{ if(rest){ this.autoid = window.setTimeout(function(){dh.scrollright()},5000); }else{ dh.scrollright(); } } } //往右 this.pre = function(){ this.scrollright(); } //往左 this.next = function(){ this.scrollleft(); } //暂停 this.pause = function(){ dh.oldlength = dh.steplength; dh.steplength = 0; } //继续 this.goon = function(){ dh.steplength = dh.oldlength; } } </script> </head> <body> <p id="s">scrollWidth, scrollLeft</p> <div id="scroll"> <ul id="scroll2" class="mqdemoa"> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4</li> <li>测试5</li> <li>测试6</li> <li>测试7</li> <li>测试8</li> <li>测试9</li> <li>测试10</li> <li>测试11</li> <li>测试12</li> <li>测试13</li> <li>测试14</li> <li>测试15</li> <li>测试16</li> <li>测试17</li> <li>测试18</li> <li>测试19</li> <li>测试20</li> </ul> </div> <div id="prenext"> <span class="pre" onmouseover="this.style.background='#eee';this.style.color='#000'" onmouseout="this.style.background='#000';this.style.color='#fff'" onclick="dhs.pre();">上一页</span> <span class="next" onmouseover="this.style.background='#eee';this.style.color='#000'" onmouseout="this.style.background='#000';this.style.color='#fff'" onclick="dhs.next();">下一页</span> </div> <dl> <dt><h1>dhScroll Ver2.0.0 左右横向无缝滚动</h1></dt> <dd>支持从左到右,从右到左两个方向的无缝滚动;</dd> <dd>支持手动更改滚动方向;</dd> <dd>支持连续/停顿方式滚动;</dd> <dd>鼠标指向暂停滚动,移开继续;</dd> <dt><h1>滚动对象模型</h1></dt> <dd><块1><块2><块2的子元素>内容</块2的子元素></块2></块1></dd> <dt><h1>滚动模型设置样式要点</h1></dt> <dd>块1设置的宽度为展示宽度;overflow:hidden;</dd> <dd>块2设置的宽度为块2子元素累计宽度(确保块2所有子元素排在一排);</dd> <dd>由于脚本中无缝部分采用innerHTML重写块2子元素,导致IE和FF在样式渲染上有所区别,FF下块2的宽度应设置为块2宽度的两倍;</dd> <dd>块2子元素必须确保排在一排,非表格的话最好float:left;</dd> </dl> <script type="text/javascript"> var dhs = new dhscroll(); dhs.scrollDOM = document.getElementById("scroll"); dhs.scrollCDOM = document.getElementById("scroll2"); dhs.showwidth = 600; dhs.getsw(); dhs.go("left",true); </script> </body> </html>
15.Scroll到底部只触发一次事件
<script> var timer = 0; function test(obj){ if (timer) window.clearTimeout(timer); timer = window.setTimeout(function () { timer = 0; var osh = parseInt(obj.scrollHeight); var ost = parseInt(obj.scrollTop); var ooh = parseInt(obj.offsetHeight); if(osh-ost==ooh){ alert('do something'); } }, 0); } </script> <div style="background-color:gray;width:200px;height:200px;overflow:auto;" onscroll="test(this);"> <div style="width:100px;height:600px;overflow:auto;"> </div> </div>
16.在textarea光标位置插入字符
var strlen = function(str){ return (/ie/i.test(navigator.appVersion) && str.indexOf('\n') != -1) ? str.replace(/\r?\n/g, '_').length : str.length; }; var insertContent = function(obj,text){ selection = document.selection; obj.focus(); if(obj.selectionStart) { var opn = obj.selectionStart + 0; obj.value = obj.value.substr(0, obj.selectionStart) + text + obj.value.substr(obj.selectionEnd); } else if(selection && selection.createRange) { var sel = selection.createRange(); sel.text = text; sel.moveStart('character', -strlen(text)); } else { obj.value += text; } }; var dtxt = document.getElementsByTagName('textarea')[0],dbtn = document.getElementsByTagName('button')[0]; dbtn.onclick = function(){insertContent(dtxt,'STRING');};
17.浏览器窗体宽高集合
//如果使用DTD申明,请注意document.documentElement与document.body的兼容处理 - dh20156 var s=""; s+="\r\n网页整体区域宽:"+document.body.clientWidth; s+="\r\n网页可见区域高:"+document.documentElement.clientHeight;//window.innerWidth -firefox; s+="\r\n网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)"; s+="\r\n网页可见区域高:"+document.body.offsetHeight+"(包括边线的高)"; s+="\r\n网页正文全文宽:"+document.body.scrollWidth; s+="\r\n网页正文全文高:"+document.body.scrollHeight; s+="\r\n网页被卷去的高:"+document.body.scrollTop; s+="\r\n网页被卷去的左:"+document.body.scrollLeft; s+="\r\n网页正文部分上:"+window.screenTop; s+="\r\n网页正文部分左:"+window.screenLeft; s+="\r\n屏幕分辨率的高:"+window.screen.height; s+="\r\n屏幕分辨率的宽:"+window.screen.width; s+="\r\n屏幕可用工作区高度:"+window.screen.availHeight; s+="\r\n屏幕可用工作区宽度:"+window.screen.availWidth; alert(s);
发表评论
-
ubuntu14.04下编译安装Tora
2015-08-11 16:19 1199需预先安装oracle客户端;以下类库,有的可能需要提前安 ... -
ubuntu14.04下oracle客户端最小化安装
2015-08-11 16:04 1048在Oracle官网下载Oracle Instant Clien ... -
ubuntu14.04下编译安装QT
2015-08-11 16:03 14941. 首先配置一些编译Qt ... -
55种开源可视化数据分析工具
2015-07-22 14:50 0http://mp.weixin.qq.com/s?__bi ... -
响应式设计理念
2013-09-29 10:00 0概念 响应式Web设计(Responsive Web desi ... -
Liferay 使用随笔
2010-04-19 14:18 01.如何根据权限去除每一个portlet中右上角的选项。 关于 ... -
Liferay中ajax应用用户session超时
2010-03-26 09:31 3906基于Liferay Portal开发ajax应用时,如果长时间 ... -
Liferay portlet实例化配置
2009-11-10 09:06 4364在默认的情况下,一个p ... -
带checkbox的dhtmlxtree菜单树异步加载时的问题解决
2009-10-24 11:27 5955最近一直很忙,自己负责几个模块的设计开发,还有和其他服务接口的 ... -
dhtmlxtree异步加载时的一个bug修正
2009-09-15 10:00 3803前面已经对dhtmlx的东西有所介绍,使用中也发现了不少bug ... -
WEB Page to PDF
2009-06-17 11:10 2521现在有很多网页页面转换成PDF文档的支持项目,我使用的是pd4 ... -
Liferay中使用dhtmlxlayout在IE下的问题
2009-06-12 13:43 2088Liferay 中使用dhemtlx系列UI的时候,dhtml ... -
Liferay相关配置
2009-06-10 13:35 1250修改liferay中portlet的加载目录 前面 ... -
Spring JDBC对Oracle10g数据库操作时RowSet的问题
2009-05-19 08:56 3435使用Spring JDBC对Oracle10g进行数据库分页的 ... -
Dynamic Tables In JavaScript for IE and Firefox
2009-05-06 14:03 1704http://www.sweetvision.com/2007 ... -
liferay中对struts桥接处理后的response
2009-04-18 14:29 1828对于在liferay开发平台中 ... -
liferay开发小记---Struts,Spring,Hibernate架构
2009-04-07 11:11 6249liferay有自己的struts和spring扩展,有兴趣的 ... -
liferay开发小记---portlet文件构造
2009-04-03 17:09 3277书接上回,说说portlet的开发,每一个portlet就是对 ... -
liferay开发小记---开发环境的搭建
2009-04-02 13:42 3797用惯了MyEclipse,我的环境也是在它上面搭建的,试用过M ... -
跨域访问解决办法之java网络编程
2008-10-11 22:35 9194颓废了很长时间,还是心态问题! 项目中有不少地方需要跨域访 ...
相关推荐
仿写百度官网首页:一个简单的 HTML、CSS 和 JavaScript 代码示例.zip 仿写百度官网首页:一个简单的 HTML、CSS 和 JavaScript 代码示例.zip 仿写百度官网首页:一个简单的 HTML、CSS 和 JavaScript 代码示例.zip ...
示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript ...
一个以前端处理业务的JS代码示例[lbs_location] 这是我以前曾经做过的一个项目的部分JS代码,记住过去,展望未来。
在学习这些JavaScript代码示例时,你可以关注以下几个重要的知识点: - **变量与数据类型**:了解如何声明和使用不同类型的变量,以及它们的动态类型特性。 - **流程控制**:学习条件语句和循环结构,以及如何控制...
六一儿童节快乐- vue+js代码示例.zip Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run ...
HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的...
下面是一个简单的示例,展示了如何使用 PyV8 来执行一段 JavaScript 代码: ```python import PyV8 class Test(): def js(self): with PyV8.JSContext() as ctxt: func = ctxt.eval(''' (function() { return...
【前端页面文件拖拽上传模块js代码示例】是一个实用的前端开发技术,它允许用户通过拖放操作在网页上上传文件。这个技术基于JavaScript,主要用于提升用户体验,简化上传流程。下面将详细介绍其中的关键知识点: 1....
这个名为"D3.js的大量代码示例"的资源来源于Scott Murray的著作《Interactive Data Visualization for the Web》。这本书是D3.js学习者的经典教材,它深入浅出地讲解了如何利用D3.js来构建交互式的数据可视化应用。 ...
示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码...
描述中的"js-例子"和"我的 JavaScript 代码示例"进一步确认了这个项目的目的,即提供一系列JavaScript代码片段,供人们学习、参考或测试。"公开访问以进行演示"意味着任何人都可以访问这些示例,无论是新手开发者想...
该存储库包含JavaScript代码示例。 剧本 功能编程 筛选,映射,减少,关闭,组成,承诺,蹦床,递归 面向对象编程 类,继承,组成 API调用,JSON,提取,Axios 异步呼叫 演算法 设计模式 依赖注入,观察者,迭代器...
其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码,其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码,其中包含...
前端js防抖代码示例
javascript callApply代码示例
综上所述,这个“JS&AJAX代码示例”压缩包很可能是包含了多个使用JavaScript和AJAX技术的实战代码,涵盖了基础操作、异步请求、数据处理等多个方面。通过研究这些示例,开发者能够更好地掌握这两种技术,提升Web开发...
本文将围绕“动态为事件添加JS代码示例”这一主题展开讨论,重点分析动态添加事件的实现方法及其实现代码。通过深入理解提供的代码片段,我们将探索JavaScript中事件处理机制的基本原理,包括事件绑定、触发顺序等...
首先,代码示例可能包含基础编程语言,如Python、Java、C++或JavaScript。这些语言是软件开发的基础,涵盖了变量、数据类型、控制结构(如循环和条件语句)、函数等核心概念。学习者可以通过代码示例来了解这些语言...