代码改变世界

JavaScript/DHTML代码

2007-11-15 14:08  Jacky_Xu  阅读(485)  评论(0)  编辑  收藏  举报

1.删除一元素,如button,等表单元素.一种根据index,一种根据id

<HEAD>
<SCRIPT>
function removeElementById()
{
 var oChild=form1.children('txt1');
 if (oChild != null)
 {
  form1.removeChild(oChild);
 }
}
function removeElementByIndex()
{
 var oChild=form1.children(0);
 if (oChild != null)
 {
  form1.removeChild(oChild);
 }
}
</SCRIPT>
</HEAD>
<BODY>

<FORM METHOD=POST ACTION="" id="form1" id="form1">
<input type="text" value="aa" id="txt1"/>

<input type="button" onclick="removeElementByIndex()" value="删除Byindex"/>
<input type="button" onclick="removeElementById()" value="删除ByID"/>
</FORM>

</BODY>
2.循环显示数组的内容,各组显示的时间长度可以设置(以秒为单位)  2005-09-13

方法一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id="div1" ></div>
<div id="div2" ></div>
<script>
 var array1 = new Array();
 array1[0] = new Array();
 array1[1] = new Array();
 array1[2] = new Array();
 array1[0][0] = "内容1";
 array1[0][1] = "背景音乐1";
 array1[0][2] = 1000;//持续时间

 array1[1][0] = "内容2";
 array1[1][1] = "背景音乐2";
 array1[1][2] = 2000;//持续时间

 array1[2][0] = "内容3";
 array1[2][1] = "背景音乐3";
 array1[2][2] = 3000;//持续时间

 setTimeout("show(0)",0);//这里的0是用来设置第一一运行的延时.

 function show(index)
 {
  var tempIndex,tempTime; //tempIndex是当前一级数组的下标;tempTime是当前一级数组要持续的时间.
  if (index == array1.length) //3是一级数组个数.
  {
   index = -1;//因为这是一级数组最后一个,进行下一个一级数组的循环是下标应为0,但下面index++的,所以现在置为-1;
   tempTime =0;//一级数组循环完毕后进入第二次循环时候的延时.
   tempIndex =array1.length-1 //2是一级数组的倒数第二个数组.
  }
  else
  {
   tempTime = array1[index][2];
   tempIndex = index;
  }
  div1.innerHTML = array1[tempIndex][0];
  div2.innerHTML = array1[tempIndex][1];
  index++;
  //alert(index+"AA"+tempTime);
  setTimeout("show("+index+")",tempTime);
 }
</script>
</BODY>
</HTML>
----------------------------------------------------------------------------------------------------------------------
方法二(笨笨)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY onLoad="loadshow();">
<div id="div1" ></div>
<div id="div2" ></div>
<script>
 var array1 = new Array();
 array1[0] = new Array();
 array1[1] = new Array();
 array1[2] = new Array();
 array1[0][0] = "内容1";
 array1[0][1] = "背景音乐1";
 array1[0][2] = 1000;//持续时间

 array1[1][0] = "内容2";
 array1[1][1] = "背景音乐2";
 array1[1][2] = 1000;//持续时间

 array1[2][0] = "内容3";
 array1[2][1] = "背景音乐3";
 array1[2][2] = 1000;//持续时间

        function loadshow()
        {
         setTimeout("show(0)",0);
        }

 function show(index)
 {
  div1.innerHTML = array1[index][0];
  div2.innerHTML = array1[index][1];
  index++;
                if (index >= 3)
                {
                 setTimeout("loadshow()",array1[2][2]);
                }
                else
                {
                 setTimeout("show("+index+")",array1[index-1][2]);
                }
 }
</script>
</BODY>
</HTML>
-------------------------------------------------------------------------------------------------
资料收集,如此弹出窗口,form提交.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var previewWindow;
function doPreview(){
    if(previewWindow == null){
      previewWindow = window.open("","Preview","width=160,height=480,scrollbars=yes");
    }else if(previewWindow.closed == true){
      previewWindow = window.open("","Preview","width=160,height=480,scrollbars=yes");
    }
    var doc   = document.myForm;
    doc.target = previewWindow.name;
    doc.action = "Noname4.html";
    doc.submit();
    previewWindow.focus();
  }
//-->
</SCRIPT>

</HEAD>
<FORM METHOD=POST ACTION="" name ="myForm">
<input type="button" onclick="doPreview()" value= "preview">
</FORM>
<BODY>

</BODY>
</HTML>
display:none/block        不拉屎不占茅坑.
visibility:hidden/visible 拉不拉屎都占着茅坑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SELECT NAME="select1" id="select1" onchange="doChange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
<div id ="div1" style ="visibility:hidden"><p align="center">一、合同变更<BR></div>
<div id ="div2" style ="visibility:hidden"><p align="center">二、费用变更</p></div>
<div id ="div3" style ="visibility:hidden"><p align="center">三、其它变更</p></div>
<script>
 function doChange()
 { 
  var sel = select1.options[select1.selectedIndex].value
  if (sel == "1")
  {
   div1.style.visibility = "visible";
   div2.style.visibility = "hidden";
   div3.style.visibility = "hidden";
  }
  else if (sel =="2")
  {
   div1.style.visibility = "hidden";
   div2.style.visibility = "visible";
   div3.style.visibility = "hidden";
  }
  else
  {
   div1.style.visibility = "hidden";
   div2.style.visibility = "hidden";
   div3.style.visibility = "visible";
  }
 }
 doChange();
</script>
</BODY>
</HTML>
客户端实现剪贴板功能            2005-09-17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function JM_cc(ob)
{
 var obj=MM_findObj(ob);

 if (obj)
 {
  obj.select();js=obj.createTextRange();js.execCommand("Copy");}
  alert('复制成功，粘贴发给你好友一起听，谢谢!');
 }

function MM_findObj(n, d) { //v4.0
  var p,i,x;
  if(!d) d=document;
  if((p=n.indexOf("?"))>0&&parent.frames.length)
   {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
   }
  if(!(x=d[n])&&d.all) x=d.all[n];
  for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

//-->
</SCRIPT>
</HEAD>

<BODY>

<span class="style1"><strong>本专辑地址</strong></span>          <input name="textarea1" type="text" style="background-color:#F8F0DC" value="http://www.5c5t.com/MusicList/beed13602b9b0e6ecb5b568ff5058f077ting.htm?  崔健的专辑《新长征路上的摇滚 》，来听听，不错。"
 size="30" maxlength="100">
<input type="button" name="Button" value="点此复制给好友"style="background-color:#FFCC66"  onClick=JM_cc('textarea1')>
</BODY>
</HTML>
上传前客户端判断图片宽和高 2005-09-18更新

<html>
<head>
<title></title>
<script language="javascript">
<!--
function go()
{
   alert("宽度为："+mp.clientWidth+"高度为："+mp.clientHeight)
}
//-->
</script>
</head>
<body>
  <div  STYLE="width: 1px; height: 1px; overflow: hidden;">
  <img id="mp"    style="visibility:visible;" >
  </div>
  <input type="file" id="file1" onblur="mp.src=this.value">

  <input type="button" onclick="go()" value="picSize">
</body>
</html>
原来的有个问题，宽度很大的图片反复测试的时候不准确，好象有个延时问题。已经修改了。再不`行这：
  <input type="button" onclick="setTimeout('go()',1000);" value="picSize">

<tr onmouseover="????????">
<td><img src="images/red.gif" width="3" height="3"></td>
<td>asdfasdf</td>
</tr>
如上，该怎么写才能实现鼠标移到这行时改变第一个<td>里的图片，(收集)

<tr onmouseover="this.children[0].children[0].src='aaa.gif';">

下拉列表获得焦点的时候自动展开它   2005-10-27

http://www.51js.com/viewthread.php?tid=28253
有一个不好的地方就是需要服务器允许创建对象，拿回自己本机测试吧。
<SELECT id=cboSort  onfocus="demo()">
<OPTION value=None selected>None</OPTION>
<OPTION value=col1>序号</OPTION>
<OPTION value=col2>抄表册</OPTION>
<OPTION value=col3>抄表册名称</OPTION>
<OPTION value=col4>抄表册性质</OPTION>
<OPTION value=col5>抄表周期</OPTION>
<OPTION value=col6>管理部门</OPTION>
<OPTION value=col7>变压器组号</OPTION>
<OPTION value=col8>变压器性质</OPTION>
<OPTION value=col9>抄表员代码</OPTION>
<OPTION value=col10>抄表员姓名</OPTION>
<OPTION value=col11>抄表列日</OPTION>
<OPTION value=col12>浮动天数</OPTION>
<OPTION value=col13>初始化标志</OPTION>
<OPTION value=col14>缴费天数</OPTION>
<OPTION value=col15>抄表方式</OPTION>
</SELECT>

<script>
function demo(){
        cboSort.focus();
        var WshShell = new ActiveXObject("Wscript.Shell");
        try{
                WshShell.SendKeys("%{DOWN}");
        }
        catch(e){}        
        WshShell.Quit;        
}
</script>

客户端建立文件
<html>
<head>
<script language='javascript'>
function aa()
{
var fso, tf;
fso = new ActiveXObject("Scripting.FileSystemObject");

tf = fso.CreateTextFile("c:\\testfile.txt", true);

tf.WriteLine("Testing 1, 2, 3.") ;

tf.WriteBlankLines(3) ;

tf.Write ("This is a test.");

tf.Close();
}
</script>

</head>

<body>
  <form>
        <input type=button value='aa' onclick=aa() />
   </form>
</body>
</html>

客户端获得CheckBox的值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//通过getElementByTag
 function getCbxByTag()
 {
     var cbx = document.getElementsByTagName("input");
  var cbxValue="";
  for(var i=0;i<cbx.length;i++)
  {
  if(cbx[i].type =="checkbox")
  {
   if (cbx[i].checked)
   { 
    if (cbxValue.length>0)
    {

     cbxValue += ","+cbx[i].value;
    }
    else
    {
        cbxValue = cbx[i].value ;
    }
   }
  }
  } 
  alert(cbxValue);
  return false;
 }

//通过getElementsByName
 function getCbxByName()
 {
     var cbx = document.getElementsByName("ff");
  var cbxValue="";
  for(var i=0;i<cbx.length;i++)
  {
  if (cbx[i].checked)
  { 
   if (cbxValue.length>0)
   {

    cbxValue += ","+cbx[i].value;
   }
   else
   {
    cbxValue = cbx[i].value ;
   }
  }
  } 
  alert(cbxValue);
  return false;
 }

//使用了数组的getElementsByName
 function mm()
{
    var a = document.getElementsByName("ff");
    var s = [];
    for(var i=0; i<a.length; i++)
    {
        if(a[i].type=="checkbox" && a[i].checked)
        {
            s[s.length] = a[i].value;
        }
    }
    alert(s);
 
}

//-->
</SCRIPT>
<BODY>
<form name="form"  id="form" method="post" onsubmit="JavaScript:return getCbxByTag();">
  <input name="ff" type="checkbox" id="ff1" value="1">1
  <input name="ff" type="checkbox" id="ff2" value="2">2
  <input name="ff" type="checkbox" id="ff3" value="3">3
  <input name="ff" type="checkbox" id="ff4" value="4">4
  <input type="submit" name="Submit" value="提交">
  <input type="button" name="buttun2" value="提交2" onclick="return getCbxByName()">
    <input type="button" name="buttun2" value="提交3" onclick="mm()">
</form>
</BODY>
</HTML>
 获得ChexBox 的Text
  //通过getElementByTag
 function getCbxByTag()
 {
  var cbx = document.getElementsByTagName("input");
  var cbxValue="";
  var cbxText = "";
  for(var i=0;i<cbx.length;i++)
  {
  if(cbx[i].type =="checkbox")
  {
   if (cbx[i].checked)
   {
    if (cbxValue.length>0)
    {

     cbxValue += ","+cbx[i].value;
     cbxText += "," +cbx[i].nextSibling.innerText;
    }
    else
    {
        cbxValue = cbx[i].value ;
        cbxText = cbx[i].nextSibling.innerText;
    }
   }
  }
  }
  alert(cbxValue);
  alert(cbxText);
  return false;
 }


CSS样式里使用JavaScript(onmouseover/onmouseout)  2005-11-05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS样式里使用JavaScript(onmouseover/onmouseout)2</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
table
{
 border:1 blue  ;
 background-color:red;
 cursor:hand;
}
TR
{
 onmouseover: expression(onmouseover=function (){this.style.color='blue';this.style.bgcolor='yellow'});
 onmouseout: expression(onmouseout=function (){this.style.color='';this.style.bgcolor=''});
}
td
{
 background-color:#ffffff;
}
</style>
</HEAD>

<BODY>
<TABLE >
<TR >
 <TD  >风儿吹散了蒲公英......    </TD>
 <TD>风儿吹散了蒲公英......   </TD>
 <TD>风儿吹散了蒲公英......   </TD>
</TR>
<TR >
 <TD >风儿吹散了蒲公英......    </TD>
 <TD>风儿吹散了蒲公英......   </TD>
 <TD>风儿吹散了蒲公英......   </TD>
</TR>
</TABLE>
</BODY>
</HTML>

getElementsByTagName获得所有CheckBox值.加了一个属性value

<SCRIPT LANGUAGE="JavaScript">
<!--
    function getCheckBoxValue()
    {
        var cbxs = document.getElementsByTagName("input");
        var strValue = "";
        for(var i=0;i<cbxs.length;i++)
        {
            if(cbxs[i].type == "checkbox" && cbxs[i].checked == true)
            {
                if(strValue.length == 0)
                {
                    strValue = cbxs[i].value;
                }
                else
                {
                    strValue += ","+cbxs[i].value;
                }
            }
        }
        alert(strValue);
    }
//-->
</SCRIPT>
<INPUT TYPE="checkbox" NAME="cbx1" value="1">
<INPUT TYPE="checkbox" NAME="cbx1" value="2">
<INPUT TYPE="checkbox" NAME="cbx1" value="3">
<INPUT TYPE="checkbox" NAME="cbx1" value="4">
<INPUT TYPE="button" NAME="btnOk" value="获得CheckBoxValue" onclick="getCheckBoxValue()">

javascript实现网页对联广告
http://maxie.cnblogs.com/archive/2005/12/22/302475.html

function initEcAd() {
document.all.AdLayer1.style.posTop = -200;
document.all.AdLayer1.style.visibility = 'visible'
document.all.AdLayer2.style.posTop = -200;
document.all.AdLayer2.style.visibility = 'visible'
MoveLeftLayer('AdLayer1');
MoveRightLayer('AdLayer2');
}
function MoveLeftLayer(layerName) {
var x = 5;
var y = 100;
var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");
setTimeout("MoveLeftLayer('AdLayer1');", 20);
}
function MoveRightLayer(layerName) {
var x = 5;
var y = 100;
var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posRight = x");
setTimeout("MoveRightLayer('AdLayer2');", 20);
}
document.write("<div id=AdLayer1 style='position: absolute;visibility:hidden;z-index:1'><EMBED src='http://ad4.sina.com.cn/200512/21/41477_58550news_guonei_ditong_1222.swf' quality=high  WIDTH=100 HEIGHT=280 TYPE='application/x-shockwave-flash' id=EccoolAd></EMBED></div>"
    +"<div id=AdLayer2 style='position: absolute;visibility:hidden;z-index:1'><EMBED src='http://ad4.sina.com.cn/200512/21/41477_58550news_guonei_ditong_1222.swf' quality=high  WIDTH=100 HEIGHT=280 TYPE='application/x-shockwave-flash' id=EccoolAd></EMBED></div>");
initEcAd()

页面正在价载.....
http://www.iconcc.net/d/lbs/article.asp?id=422

<html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
  text-align:center;
  position:absolute;
  top:60%;
  width:100%;
  left: 0;
}

#loader {
  font-family:Tahoma, Helvetica, sans;
  font-size:11.5px;
  color: #abc;
  background-color:#000;
  padding:10px 0 16px 0;
  margin:0 auto;  
  display:block;
  width:130px;
  border:1px solid #abc;
  text-align:left;  
  z-index:2;
}
#loader_bg {background-color: #abc;
  position:relative;
  top:8px;
  left:8px;
  height:7px;
  width:113px;
  font-size:1px}
#progress {
  height:5px;
  font-size:1px;
  width:1px;
  position:relative;
  top:1px;
  left:0px;
  background-color: #fff;
}
 </style> 
<script type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body onLoad="remove_loading();">
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">网页正在载入中 </div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<p>在Flickr找的</p>
<img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" />
<img src="http://static.flickr.com/30/51733738_9f0ff4ca38_b_d.jpg" />
</body>
</html>

 定义方法的方式

//去掉左右空格
String.prototype.trim  =  function() 
{ 
return  this.replace(/(^\s*)|(\s*$)/g,  ""); 
} 
//去掉左空格
String.prototype.ltrim  =  function() 
{ 
return  this.replace(/(^\s*)/g,  ""); 
}
//去掉左右空格
String.prototype.rtrim  =  function() 
{ 
return  this.replace(/(\s*$)/g,  ""); 
} 
//使用方法:
var returntxt ="                      你好  我 好                                                            ";
alert(returntxt);
alert(returntxt.ltrim());
alert(returntxt.rtrim());
alert(returntxt.trim());

 重载(OverLoad)和覆盖(Override)
“参数必须不同”是指参数的个数或者类型不相同，和参数顺序无关。
http://www.cnblogs.com/Terrylee/archive/2006/03/09/346128.html

使用 this 指针和 prototype 实现 js 的 OO 时的一个区别  2006-04-26
利用 this 实现的公共方法中可以访问类的私有成员(用 var 声明的变量)，私有方法(用 function 直接定义的方法)；
利用原型扩展实现的方法中，无法调用私有成员和变量。
例子如下所示（把其中注释掉的两行恢复就可以看到区别）： 

function T(name) {
    this.Name = name;
    var x = 5;
    
    function privateFunc() {
        alert('in private method: do sometheing');
    }
    
    this.PublicFunc = function() {
        // 可以调用私有方法，访问私有成员变量。
        privateFunc();
        alert('x = ' + x);
        alert('in public method: do something else.');
    }
}

//var t = new T('t1');
//t.PublicFunc();

T.prototype.PublicFunc2 = function() {
    alert('in public method 2.');
    // 下面两行都会出错。在利用 prototype 扩展的方法里无法调用对象的私有方法，也访问不到通过 var 定义的私有成员。
    // alert(x);
    // privateFunc();
}

var t2 = new T('t2');
t2.PublicFunc();
t2.PublicFunc2();

我知道了，在html中加上下面语句
  function clickbutton()
  {
     if(event.keyCode==13)
     {
window.document.all.Button1.click(); //将Button1改为相应的Button就行了
     }
  }
  </script>
</HEAD>
<body MS_POSITIONING="GridLayout"  onkeydown="if(event.keyCode==13) return false;">
谢谢各位的响应！ 

去掉左右空格设置SELECT的选项目.

  <script language ="javascript">
    function SetAllWorkType(Value)
    {
          var cbx = document.getElementsByTagName("select");
         //var cbx = document.all.select;
          Value.trim();
         // alert(Value.length + Value);
          if(Value == "-1") return;
          for(var i=0;i<cbx.length;i++)
          {
              if(cbx[i].id !="DdlWork" &&  cbx[i].id !="DdlACCOUNTABILITY"
                    &&  cbx[i].id !="DdlABILITY"&&  cbx[i].id !="DdlTEAMWORK"&&  cbx[i].id !="DdlQUALITY"
                    &&  cbx[i].id !="DdlSATISFACTION" )
                   
              {
                    cbx[i].value = Value;
              }
          }
    }
    


    String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g,"")
};

    </script>