daoger
- 浏览: 530568 次
- 性别:
- 来自: 山东济南
-
文章分类
最新评论
-
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 1204需预先安装oracle客户端；以下类库，有的可能需要提前安 ... -
ubuntu14.04下oracle客户端最小化安装
2015-08-11 16:04 1053在Oracle官网下载Oracle Instant Clien ... -
ubuntu14.04下编译安装QT
2015-08-11 16:03 14991. 首先配置一些编译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 3910基于Liferay Portal开发ajax应用时，如果长时间 ... -
Liferay portlet实例化配置
2009-11-10 09:06 4369在默认的情况下，一个p ... -
带checkbox的dhtmlxtree菜单树异步加载时的问题解决
2009-10-24 11:27 5965最近一直很忙，自己负责几个模块的设计开发，还有和其他服务接口的 ... -
dhtmlxtree异步加载时的一个bug修正
2009-09-15 10:00 3804前面已经对dhtmlx的东西有所介绍，使用中也发现了不少bug ... -
WEB Page to PDF
2009-06-17 11:10 2532现在有很多网页页面转换成PDF文档的支持项目，我使用的是pd4 ... -
Liferay中使用dhtmlxlayout在IE下的问题
2009-06-12 13:43 2092Liferay 中使用dhemtlx系列UI的时候，dhtml ... -
Liferay相关配置
2009-06-10 13:35 1253修改liferay中portlet的加载目录 前面 ... -
Spring JDBC对Oracle10g数据库操作时RowSet的问题
2009-05-19 08:56 3442使用Spring JDBC对Oracle10g进行数据库分页的 ... -
Dynamic Tables In JavaScript for IE and Firefox
2009-05-06 14:03 1708http://www.sweetvision.com/2007 ... -
liferay中对struts桥接处理后的response
2009-04-18 14:29 1831对于在liferay开发平台中 ... -
liferay开发小记---Struts，Spring，Hibernate架构
2009-04-07 11:11 6256liferay有自己的struts和spring扩展，有兴趣的 ... -
liferay开发小记---portlet文件构造
2009-04-03 17:09 3277书接上回，说说portlet的开发，每一个portlet就是对 ... -
liferay开发小记---开发环境的搭建
2009-04-02 13:42 3799用惯了MyEclipse，我的环境也是在它上面搭建的，试用过M ... -
跨域访问解决办法之java网络编程
2008-10-11 22:35 9197颓废了很长时间，还是心态问题！ 项目中有不少地方需要跨域访 ...
相关推荐
仿写百度官网首页：一个简单的 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中事件处理机制的基本原理，包括事件绑定、触发顺序等...
"code-in-js"项目显然是一系列JavaScript代码示例和实用工具脚本的集合，旨在帮助开发者理解和学习JavaScript的核心概念以及实际应用。 在"code-in-js-master"这个压缩包中，我们可以期待找到各种不同类型的...