JavaScript/DHTML代码

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>

</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是用来设置第一一运行的延时.

<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);
        }

</HEAD>
<FORM METHOD=POST ACTION="" name ="myForm">
<input type="button" οnclick="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" οnchange="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更新

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

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

下拉列表获得焦点的时候自动展开它 2005-10-27
http://www.51js.com/viewthread.php?tid=28253
有一个不好的地方就是需要服务器允许创建对象，拿回自己本机测试吧。
<SELECT id=cboSort οnfοcus="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>

客户端建立文件
<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>

客户端获得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" οnsubmit="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" οnclick="return getCbxByName()">
    <input type="button" name="buttun2" value="提交3" οnclick="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="">

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

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

<SCRIPTLANGUAGE="JavaScript">

<!--

functiongetCheckBoxValue()

{

varcbxs=document.getElementsByTagName("input");

varstrValue="";

for(vari=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>

<INPUTTYPE="checkbox"NAME="cbx1"value="1">

<INPUTTYPE="checkbox"NAME="cbx1"value="2">

<INPUTTYPE="checkbox"NAME="cbx1"value="3">

<INPUTTYPE="checkbox"NAME="cbx1"value="4">

<INPUTTYPE="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("<divid=AdLayer1style='position:absolute;visibility:hidden;z-index:1'><EMBEDsrc='http://ad4.sina.com.cn/200512/21/41477_58550news_guonei_ditong_1222.swf'quality=highWIDTH=100HEIGHT=280TYPE='application/x-shockwave-flash'id=EccoolAd></EMBED></div>"

+"<divid=AdLayer2style='position:absolute;visibility:hidden;z-index:1'><EMBEDsrc='http://ad4.sina.com.cn/200512/21/41477_58550news_guonei_ditong_1222.swf'quality=highWIDTH=100HEIGHT=280TYPE='application/x-shockwave-flash'id=EccoolAd></EMBED></div>");

initEcAd()

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

<html>

<head>

<styletype="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>

<scripttype="text/javascript">

vart_id=setInterval(animate,20);

varpos=0;

vardir=2;

varlen=0;

functionanimate()

{

varelem=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;

}

functionremove_loading()

{

this.clearInterval(t_id);

vartargelem=document.getElementById('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

}

</script>

</head>

<bodyonLoad="remove_loading();">

<divid="loader_container"onclick="this.style.display='none'"title="点击关闭">

<divid="loader">

<divalign="center">网页正在载入中

</div>

<divid="loader_bg"><divid="progress"></div></div>

</div>

<p>在Flickr找的</p>

<imgsrc="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg"/>

<imgsrc="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 直接定义的方法)；
利用原型扩展实现的方法中，无法调用私有成员和变量。
例子如下所示（把其中注释掉的两行恢复就可以看到区别）：

functionT(name) {
this.Name=name;
varx=5;

functionprivateFunc() {
        alert('inprivate method:dosometheing');
    }

this.PublicFunc=function() {
//可以调用私有方法，访问私有成员变量。 privateFunc();
        alert('x='+x);
        alert('inpublic method:dosomethingelse.');
    }
}

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

vart2=newT('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" οnkeydοwn="if(event.keyCode==13) return false;">
谢谢各位的响应！

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

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

</script>

转载于:https://www.cnblogs.com/xujiaci/archive/2007/11/15/960362.html

JavaScript/DHTML代码相关推荐

javascript 常用代码大全
javascript 常用代码大全 //打开模式对话框 function doSelectUser(txtId) { strFeatures="dialogWidth=500px;dialo ...
JavaScript常用代码
在这存一下JavaScript常用代码: 1.封装输出 1 var log = function() { 2 console.log.apply(console, arguments) 3 } 4 5 ...
javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio//如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
JavaScript单行代码
JavaScript单行代码 1.ID随机生成当你执行原型制作并且需要唯一的ID时,此功能可以成为你的首选项. const a = Math.random().toString(36).substr ...
JavaScript的代码编写注意事项，建议收藏！
在我们进行前端开发的过程中,需要遵循一定的代码编写规则,这样才能够让我们写出更合理的.易于阅读和维护的代码,那么你知道在JavaScript中有哪些需要注意的地方吗? 一.块级作用域let 取代 va ...
javascript两行代码按指定格式输出日期时间
javascript两行代码按指定格式输出日期时间,具体看代码: function date2str(x,y) {var z ={y:x.getFullYear(),M:x.getMonth()+1, ...
java 高性能代码_[Java教程]Javascript高性能代码(一)
[Java教程]Javascript高性能代码(一) 0 2013-03-09 22:00:11 分享说明: 1. 我先申明,我只是茫茫WEB前端开发人员中的一名普通的js程序员,我收集的和总结的代码 ...
写好 JavaScript 异步代码的几个技巧
今天给大家来推荐几个写好 JavaScript 异步代码的推荐做法,每种场景都有一个对应的 eslint 规则,大家可以选择去配置一下. no-async-promise-executor 不建议将 ...
JavaScript实用功能代码片段
JavaScript实用功能代码片段 1.原生JavaScript实现字符串长度截取1 function cutstr(str, len) {2 var temp;3 var icount = 0;4 ...
JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图二.准备文字素材文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...

JavaScript/DHTML代码

JavaScript/DHTML代码相关推荐

最新文章

热门文章