javascript代码大全 js基础代码大全

编程之家2026-05-161142次浏览

这篇文章给大家聊聊关于javascript代码大全，以及js基础代码大全对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

JavaScript语句分类大全

1、赋值语句:var

2.return语句

3、条件分支语句 if...else,switch

4、循环语句 for,for...in,while,break,continue.

5、对象操作语句with,new,delete,this

6、注释语句

7、函数定义语句：function,return

1、变量声明赋值语句:var

var语句声明了一个变量的名称，同时也可以让这个变量具有一个初始值。

如果var语句在一个函数中声明变量，则这个变量的有效区域只限于这个函数，叫局部变量;如果var语句在函数体外，则有效区为整个应用程序，叫全局变量。

在函函数体外声明一个变量可以不用var,给出变量的值就可以了。(但推荐使用var)

var的语法如下：

例：

word" bgColor=#f3f3f3>

varComputer=9//Computer是一个整数变量，初值为9

Computer=9//Computer是一个整数变量，初值为9

2.return语句

return语句指明将由函数返回的值。

语法如下：

return表达式;

如果这里省略了表达式，或者函数结束时根本没有return语句，这个函数就返回一个undefined类型的值。

3、条件分支语句 if...else,switch

1.if...else

1)基本格式

if(表述式)

语句段1;

......

else

语句段2;

......

2)功能：若表达式为true，则执行语句段1;否则执行语句段2。

3)说明：

·if-else语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。

·表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。

·它将零和非零的数分别转化成false和true。

·若if后的语句有多行，则必须使用花括号将其括起来。

4)if语句的嵌套

if(布尔值)语句1;

else(布尔值)语句2;

else if(布尔值)语句3;

else语句4;

在这种情况下，每一级的布尔表述式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。

示例：

script

functionabcd()

{

vard=confirm("请选择确定或者取消");

if(d==1){

alert("你选择的是确定");

}

else{

alert("你选择的是取消");

}

/script

5).switch语句

分支语句switch可以根据一个变量的不同取值而采取不同的处理方法。

switch的语法如下：

switch(表达式){

case label 1:

执行语句;

case label 2:

执行语句;

default:

执行语句;

}

示例：

script

vard=newDate();

switch(d.getDate()){

case0:document.write("星期一");break;

case1:document.write("星期二");break;

case2:document.write("星期三");break;

case3:document.write("星期四");break;

case4:document.write("星期五");break;

case5:document.write("星期六");break;

case6:document.write("星期日");break;

}

/script

4、循环语句 for,for...in,while,break,continue.

1.for

1)基本格式

for(初始化;条件;增量)

语句集;

2)功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。

3)说明：

·初始化参数告诉循环的开始位置，必须赋予变量的初值;

·条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。

·增量：主要定义循环控制变量在每次循环时按什么方式变化。

·三个主要语句之间，必须使用逗号分隔。

2.for...in

这个语句与for语句有一点不同。它循环的范围是一个对象所有的属性或者是一个数组的所有元素。

语法如下：

for(变量in对象或数组){

执行语句......

}

4).while语句

1)基本格式

while(条件)

语句集;

该语句与For语句一样，当条件为真时，重复循环，否则退出循环。

2)For与while语句

两种语句都是循环语句，使用For语句在处理有关数字时更易看懂，也较紧凑;而while循环对复杂的语句效果更特别。

示例：

这是1级标题

这是2级标题

这是3级标题

script

i=1;

while(i=3){

document.write("h"+i+"这是"+i+"级标题"+"/h"+i+"");

i++;

}

/script

4、break和continue语句

与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。

5、对象操作语句with,new,delete,this

1).with

使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with object{

...}

所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

2).this关键字

this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。

3).New运算符

虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象，以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式：

Newobject=NEW Object(Parameters table);

其中Newobject创建的新对象：object是已经存在的对象; parameters table参数表;new是JavaScript中的命令语句。

如创建一个日期新对象

newData=New Data()

birthday=New Data(December 12.1998)

之后就可使NewData、birthday作为一个新的日期对象了。

4.delete

同new相反，可以删除一个对象的实例。

6、注释语句(只是给人看的，浏览器不执行的语句)

//这是一个单行的注释

/*这样的注释可以是多行的

......

7、函数定义语句：function,return

1.function

function用来定义一个函数，让济浏览器知道有这样一个函数，但只有当函数被调用时才会执行。

定义方法如下：

function函数名(参数表)

{

函数执行部分

}

下面举下个简单的例了来看看吧：

html

head

title欢迎光临/title

scriptlanguage="javascript"

functiongo()//定义一个函名为go的函数

{

alert("欢迎光临")

}

/script

/head

body

inputtype="button"onclick="go()"value="请点击"

!--单击按钮调用上面定义的函数--

/body

/html

说明：

当调用函数时,所用变量或字面量均可作为变量传递。

函数由关键字Function定义。

函数名：定义自己函数的名字。

参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

通过指定函数名(实参)来调用一个函数。

必须使用Return将值返回。

函数名对大小写是敏感的。

求个简单javascript代码谢谢,网站菜单功能

不用说自己菜不菜的，能有这个学习的精神已经很值得鼓励了

呵呵，下面，我来给你介绍几个网站常见的菜单

第一个：仿网易的滑动门导航菜单

<head>

<title>仿网易的滑动门技术，用DIV+CSS技术实现</title>

<!--

#header{

background-color:#F8F4EF;

height: 200px;

width: 400px;

margin: 0px;

padding: 0px;

border: 1px solid#ECE1D5;

font-family:"宋体";

font-size: 12px;

}

#menu{

margin: 0px;

padding: 0px;

list-style-type: none;

}

#menu li{

display: block;

width: 100px;

text-align: center;

float: left;

margin: 0px;

padding-top: 0.2em;

padding-right: 0px;

padding-bottom: 0.2em;

padding-left: 0px;

cursor: hand;

}

.sec1{ background-color:#FFFFCC;}

.sec2{ background-color:#00CCFF;}

.block{ display: block;}

.unblock{ display: none;}

-->

</style>

</head>

<body>

function secBoard(n)

{

for(i=0;i<menu.childNodes.length;i++)

menu.childNodes[i].className="sec1";

menu.childNodes[n].className="sec2";

for(i=0;i<main.childNodes.length;i++)

main.childNodes[i].style.display="none";

main.childNodes[n].style.display="block";

}

</script>

</ul>

<li class="block">第一个内容</li>

<li class="unblock">第二个内容</li>

<li class="unblock">第三个内容</li>

<li class="unblock">第四个内容</li>

</ul>

</div>

</body>

</html>

这里基本上是使用Css与Div的结合，在整个布局中已层为单位，实行滑动菜单的是一个javascript脚本函数，调用就可以了，看不懂不要紧，日渐积累才是重要

第二个：经典实用的触发型导航（这是鼠标单击事件控制）

<html>

<head>

<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

</head>

<body>

<STYLE type=text/css>.sec1{

BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; BORDER-LEFT:#ffffff 1px

solid; CURSOR: hand; COLOR:#000000; BORDER-

BOTTOM:#ffffff 1px solid; BACKGROUND-COLOR:

#eeeeee

}

.sec2{

BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

LEFT:#ffffff 1px solid; CURSOR: hand; COLOR:

#000000; BACKGROUND-COLOR:#d4d0c8

}

.main_tab{

BORDER-RIGHT: gray 1px solid; BORDER-

LEFT:#ffffff 1px solid; COLOR:#000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR:#d4d0c8

}

</STYLE>

function secBoard(n)

{

for(i=0;i<secTable.cells.length;i++)

secTable.cells

[i].className="sec1";

secTable.cells[n].className="sec2";

for(i=0;i<mainTable.tBodies.length;i++)

mainTable.tBodies

[i].style.display="none";

mainTable.tBodies

[n].style.display="block";

}

</SCRIPT>

<TBODY>

<TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>

<TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>

<TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>

<TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>

<TR>

<TBODY>

<TR>

<TD>指定行做为表体。

<BR>注释：TBODY要素是块要素，并且需要结束标

签。<BR>即使如果表格没有显式定义TBODY

要素，该要素也提供给所有表。<BR><BR>

参考：《动态HTML参考和开发应用大全》（人民邮电出

版社

Microsoft Corporation著

北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

<TBODY style="DISPLAY:

none">

<TR>

<TD vAlign=top

align=middle><BR><BR>

<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>

<TBODY>

<TR>

<TD>检索表行或者整个

表中所有单元格的集合。<BR>应用于TR、TABLE。

<BR><BR>参考：《动态HTML参考和开发应

用大全》（人民邮电出版社

Microsoft Corporation著

北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

<TBODY style="DISPLAY:

none">

<TR>

<TD vAlign=top

align=middle><BR><BR>

<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>

<TBODY>

<TR>

<TD>检索表中所有TBODY

对象的集合。对象在该集合中按照HTML源顺序排列。

<BR>应用于TABLE。<BR><BR>参考：

《动态HTML参考和开发应用大全》（人民邮电出版社

Microsoft Corporation著

北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

<TBODY style="DISPLAY:

none">

<TR>

<TD vAlign=top

align=middle><BR><BR>

<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>

<TBODY>

<TR>

<TD>设置或者检索对象

是否被提供。<BR>可能的值为block、none、

inline、list-item、table-header-group、table-

footer-group。<BR>该特性可读写，块要素默认

值为block，内联要素默认值为inline；层叠样式表

（CSS）属性不可继承。<BR><BR>参考：《

动态HTML参考和开发应用大全》（人民邮电出版社

Microsoft Corporation著

北京华中兴业科技发展有限公司译）

<BR><BR><A

rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target=_blank>点击此处

</A>可参阅微软<A rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

t;</body>

</html>

这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别！

第三个：仿拍拍的切换效果菜单（里面的图片是我放上去的，所以会看不到图片的，呵呵继续）

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<head>

<title>网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果</title><style>

body{font-size:12px}

img{border:0px}

#sale{right:206px;top:0;width:260px;background:#fff}

#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitle.gif") no-repeat}

#saleList{margin-top:5px}

#saleList.saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}

#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}

#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y;}

#saleList a img{margin:5px 0}

#saleList a:hover{background-color:#EBFFC5}

</style>

rnd.today=new Date();

rnd.seed=rnd.today.getTime();

function rnd(){

rnd.seed=(rnd.seed*9301+49297)% 233280;

return rnd.seed/(233280.0);

}

function rand(number){

return Math.ceil(rnd()*number)-1;

}

function nextSale(order){

if(order=="up") saleNum--;

else saleNum++;

if(saleNum>2) saleNum=0

else if(saleNum<0) saleNum=2;

//alert(saleNum);

for(i=0;i<3;i++)

document.getElementById("saleList"+i).style.display="none";

document.getElementById("saleList"+saleNum).style.display="";

}

</script>

</head>

<body>

<div>

<div>

圣诞浪漫饰品<br/>

超级大促</div>

</a>

<div>

<div>

摄像头集结号<br/>

给你新的感觉</div>

</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="" target="_blank">

<div>

<div>

好感度提升<br/>

韩版娃娃装</div>

</a></div>

<div>

<div>

复古牛仔外套<br/>

特惠119元起</div>

</a>

<div>

<div>

圣诞拍拍特供<br/>

运动服3折</div>

<div>

<div>

摄像头集结号<br/>

给你新的感觉</div>

</a></div>

<div>

<div>

圣诞拍拍特供<br/>

电脑周边4折</div>

</a>

<div>

<div>

party扮靓<br/>

甜美腮红</div>

<div>

<div>

好感度提升<br/>

韩版娃娃装</div>

</a></div>

</div>

<div>

<div>

新奇好玩便宜<br/>

尽在网游频道</div>

</a>

<div>

<div>

展现高贵气质<br/>

骑士系马靴</div>

<div>

<div>

摄像头集结号<br/>

给你新的感觉</div>

</a></div>

<div>

<div>

永不过时<br/>

条纹毛衣</div>

</a>

<div>

<div>

圣诞拍拍特供<br/>

运动鞋2折</div>

<div>

<div>

好感度提升<br/>

韩版娃娃装</div>

</a></div>

<div>

<div>

精简唯美<br/>

索爱K630</div>

</a>

<div>

<div>

原装瑞士军刀<br/>

精选</div>

<div>

<div>

超薄机身<br/>

索爱W880</div>

</a></div>

</div>

<div>

<div>

各就各味<br/>

秋冬饮食计划</div>

<div>

<div>

好感度提升<br/>

韩版娃娃装</div>

</a></div>

<div>

<div>

圣诞拍拍特供<br/>

随身视听5折</div>

<div>

<div>

超薄机身<br/>

索爱W880</div>

</a></div>

<div>

<div>

我爱我家<br/>

家居大抢购</div>

<div>

<div>

超值彩妆套装<br/>

变身派对女王</div>

</a></div>

</div>

<p></p>

<p>更多网页特效代码尽在<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">网页特效代码</a></p>

</body>

</html>

这个仿拍拍基本上就是2层放图片，但用起来的效果还是可以的，如果不喜欢我还有下面呢，慢慢学，总会看懂的(最重要的还是Css哦)

这个主要就是让层实现隐藏我觉得这个在层使用方面还是好的

从总体上看，在实现层与层之间的交互，在其代码我觉得你有必要去认真看下！

以上是我介绍额度菜单，虽然不是很强大，但是却很使用，而且在J2EE中

菜单基本上是一个假象，都是用层与Css之间的特效做出来的！

学会了层的具体应用，我相信你也可以有自己特色的菜单的

那我祝你好运咯！！加油！！

qq空间风格代码大全免费

qq空间免费漂浮物代码:

下雪了

javascript:window.top.space_addItem(16,23699,330,80,600,600,0);

鼠迎新岁

javascript:window.top.space_addItem(16,23727,330,80,600,600,0);

下雪FLASH挂件

javascript:window.top.space_addItem(16,23232,50,80,620,350,0);

LOVE HOME

javascript:window.top.space_addItem(16,23212,330,80,600,600,0);

蝶影

javascript:window.top.space_addItem(16,23216,330,80,600,600,0);

love you

javascript:window.top.space_addItem(16,23226,330,80,600,600,0);

纯纯爱恋

javascript:window.top.space_addItem(16,23228,330,80,600,600,0);

冬夜息乐园

javascript:window.top.space_addItem(16,23230,330,80,600,600,0);

记忆心音

javascript:window.top.space_addItem(16,23232,330,80,600,600,0);

圣殿的烛光

javascript:window.top.space_addItem(16,23236,330,80,600,600,0);

悠扬芭蕾舞

javascript:window.top.space_addItem(16,23238,330,80,600,600,0);

爱情天使（单个）

javascript:window.top.space_addItem(5,1097,0,0,1,1,0);

爱情天使（多个）

javascript:window.top.space_addItem(5,1097,0,0,4,1,0);

一只黑色蝴蝶在飞。全空间显示：

javascript:window.top.space_addItem(16,23234,50,80,620,350,0);

FLASH透明特效代码，烟花效果闪亮，迷人。不仅主页显示，其他页面也会显示：

javascript:window.top.space_addItem(16,23736,150,80,620,350,0);

梦之希望

绿色：javascript:window.top.space_addItem(5,609,0,0,1,1,0);

彩色：javascript:window.top.space_addItem(5,609,0,0,7,1,0);

HAPPY

javascript:window.top.space_addItem(5,1816,0,0,1,1,0);

飘雪

javascript:window.top.space_addItem(16,23214,350,80,500,600,0);

彩色小圆点

javascript:window.top.space_addItem(16,23734,350,80,500,600,0);

焰火

javascript:window.top.space_addItem(16,23725,350,80,500,600,0);

粉红雪花

javascript:window.top.space_addItem(16,23732,350,80,500,600,0);

浪漫满屋

javascript:window.top.space_addItem(16,22101,300,80,500,500,0);

菊花台

javascript:window.top.space_addItem(16,22099,300,80,500,500,0);

奇幻的花园

javascript:window.top.space_addItem(16,22103,300,80,500,500,0);

做wo自己

javascript:window.top.space_addItem(16,22105,300,80,500,500,0);

个性de公主

javascript:window.top.space_addItem(16,22097,50,80,250,250,0);

文章到此结束，如果本次分享的javascript代码大全和js基础代码大全的问题解决了您的问题，那么我们由衷的感到高兴！

免费建网站的平台？建站系统哪个好c++青少年编程课？c++编程软件

javascript代码大全 js基础代码大全

JavaScript语句分类大全

求个简单javascript代码 谢谢,网站菜单功能

qq空间风格代码大全免费

求个简单javascript代码谢谢,网站菜单功能