`
daoger
  • 浏览: 531605 次
  • 性别: Icon_minigender_1
  • 来自: 山东济南
社区版块
存档分类
最新评论

JS代码示例

阅读更多
1.数组操作时的push
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)">&nbsp;</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)+">&nbsp;</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>&lt;块1&gt;&lt;块2&gt;&lt;块2的子元素&gt;内容&lt;/块2的子元素&gt;&lt;/块2&gt;&lt;/块1&gt;</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;">&nbsp;</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);
分享到:
评论

相关推荐

    仿写百度官网首页:一个简单的 HTML、CSS 和 JavaScript 代码示例.zip

    仿写百度官网首页:一个简单的 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基础学习 示例代码JavaScript ...

    一个以前端处理业务的JS代码示例[lbs_location]

    一个以前端处理业务的JS代码示例[lbs_location] 这是我以前曾经做过的一个项目的部分JS代码,记住过去,展望未来。

    js代码-一些简单的js代码示例

    在学习这些JavaScript代码示例时,你可以关注以下几个重要的知识点: - **变量与数据类型**:了解如何声明和使用不同类型的变量,以及它们的动态类型特性。 - **流程控制**:学习条件语句和循环结构,以及如何控制...

    六一儿童节快乐- vue+js代码示例.zip

    六一儿童节快乐- 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的前端学习代码示例;HTML+CSS+JS的...

    python使用PyV8执行javascript代码示例分享.docx

    下面是一个简单的示例,展示了如何使用 PyV8 来执行一段 JavaScript 代码: ```python import PyV8 class Test(): def js(self): with PyV8.JSContext() as ctxt: func = ctxt.eval(''' (function() { return...

    前端页面文件拖拽上传模块js代码示例

    【前端页面文件拖拽上传模块js代码示例】是一个实用的前端开发技术,它允许用户通过拖放操作在网页上上传文件。这个技术基于JavaScript,主要用于提升用户体验,简化上传流程。下面将详细介绍其中的关键知识点: 1....

    D3.js的大量代码示例

    这个名为"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操作 示例代码JavaScript BOM操作 示例代码...

    js-examples:我的 JavaScript 代码示例

    描述中的"js-例子"和"我的 JavaScript 代码示例"进一步确认了这个项目的目的,即提供一系列JavaScript代码片段,供人们学习、参考或测试。"公开访问以进行演示"意味着任何人都可以访问这些示例,无论是新手开发者想...

    javascript-things:JavaScript代码示例

    该存储库包含JavaScript代码示例。 剧本 功能编程 筛选,映射,减少,关闭,组成,承诺,蹦床,递归 面向对象编程 类,继承,组成 API调用,JSON,提取,Axios 异步呼叫 演算法 设计模式 依赖注入,观察者,迭代器...

    JavaScript 复合类型 示例代码

    其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码,其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码,其中包含...

    前端的js防抖代码示例

    前端js防抖代码示例

    javascript callApply代码示例

    javascript callApply代码示例

    JS&AJAX代码示例

    综上所述,这个“JS&AJAX代码示例”压缩包很可能是包含了多个使用JavaScript和AJAX技术的实战代码,涵盖了基础操作、异步请求、数据处理等多个方面。通过研究这些示例,开发者能够更好地掌握这两种技术,提升Web开发...

    动态为事件添加js代码示例

    本文将围绕“动态为事件添加JS代码示例”这一主题展开讨论,重点分析动态添加事件的实现方法及其实现代码。通过深入理解提供的代码片段,我们将探索JavaScript中事件处理机制的基本原理,包括事件绑定、触发顺序等...

    code-in-js:JavaScript代码示例和实用程序脚本

    "code-in-js"项目显然是一系列JavaScript代码示例和实用工具脚本的集合,旨在帮助开发者理解和学习JavaScript的核心概念以及实际应用。 在"code-in-js-master"这个压缩包中,我们可以期待找到各种不同类型的...

Global site tag (gtag.js) - Google Analytics