JS代码示例

最新推荐文章于 2024-04-08 13:03:22 发布
最新推荐文章于 2024-04-08 13:03:22 发布
阅读量165 收藏
点赞数
分类专栏： 技术研究 文章标签： JavaScript IE REST prototype webkit ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daoger/article/details/83481035
版权
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)"> </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);
daoger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js基础实例代码详细
12-22 1302
js:嵌入在html中，处理数据，其实和as差不多，个人理解是html展示界面，js处理数据 嵌入在html中使用script document.write 用于像页面输出语句 document.write("hello world"); 生成普通文件和标签 document.write("hello world");
100个JavaScript代码片段
GarfieldEr007的专栏
02-02 2744
实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { ...
《JavaScript》20个非常实用的JavaScript一行代码，持续更新中
2301_82244343的博客
04-08 1093
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取存中…(img-bboMrXkb-1712552556623)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
20个简洁的 JS 代码片段
小生方勤
08-05 254
1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。例如：constage=12; letag...
分享 25 个有用的 JS 单行代码
前端达人
07-24 734
英文 | https://medium.com/@daaaan翻译整理 | web前端开发（ID：web_qdkf)JavaScript 有很多单行代码的实用例子，它们可以做很多强大的事情，无论你是 JavaScript 新手还是经验丰富的开发人员，学习些新东西总是好的。在今天的文中，我们将分享一些JavaScript 单行代码，希望能帮助您解决一些日常开发中遇到的J...
js代码-一些简单的js代码示例
07-15
此压缩包"js代码-一些简单的js代码示例"包含两个文件：`main.js`和`README.txt`，显然是为了演示或教学目的。下面将详细介绍JS的一些核心概念和常见用法。 1. 变量与数据类型： JavaScript是动态类型语言，变量...
JavaScript BOM操作 示例代码
最新发布
07-01
示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码...
javascript-things:JavaScript代码示例
04-18
该存储库包含JavaScript代码示例。 剧本 功能编程 筛选，映射，减少，关闭，组成，承诺，蹦床，递归 面向对象编程 类，继承，组成 API调用，JSON，提取，Axios 异步呼叫 演算法 设计模式 依赖注入，观察者，迭代器...
JavaScript js运算符 示例代码
06-07
本资源文件是js运算符相关学习代码的示例 包含算术运算符、比较运算符、逻辑运算符等 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种轻量级、解释型、...
600个javascript经典实例（内含源码）
11-12
600个javascript经典实例（内含源码）,非常适合新手使用
js代码示例.rar
06-17
一些基本的js应用，下拉列表、DOM、事件流示例等等，共九十多个。
JavaScript贪吃蛇案例
11-26
一个简单js代码，，
webkit实例代码,实现JS和C++、HTML相互操作
10-07
webkit实例代码,实现JS和C++、HTML相互操作,已经经过测试，里面包含JS和HTML的测试网页
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript代码示例
qq_46156328的博客
08-04 985
01_hello.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //alert是JavaScript语言提供的一个警告框函数 //它可以接受任意类型的参数，这个参数就是警告框的提示信息
JS具体实例（一）
nabirt的博客
02-08 2989
JavaScript的一些实例记录
15个简洁的JS代码片段
qq_33828816的博客
08-06 540
15个简洁的JS代码片段1.单行If-Else语句2.从数组删除重复项3.较短的If-Else的空合并4. 防止崩溃链的可选链5.在没有第三个变量的情况下交换两个变量6.将任何值转换成布尔值7.扩展运算符8.传播解构9.使用&&进行短路评估10. 类固醇的字符串11.从数组中查找特定元素12.压缩for循环13.将对象的值收集到数组中14.检查一个项目是否存在于数组中15.解构语法详解 1.单行If-Else语句 使用三元运算符用一行代码编写整个语句 const age=18 let age
html读写txt文件,JS读写文本文件示例代码
weixin_32051661的博客
06-25 1991
MyNotevar originalPath="D:\\用户目录\\Documents\\";//文件路径,取 路径 文本框的值,默认为mynote.txt,可以存储为.docvar minuteAmount=15; //过多少分钟，键盘无响应，自动关闭窗口，默认为15分钟var ForReading = 1, ForWriting = 2, ForAppending = 8;var Trista...
js代码示例使用正则表达式获取url中的参数
04-21
以下是获取 URL 中的参数的 JavaScript 代码示例，使用了正则表达式进行匹配： ```javascript function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g,...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值