JavaScript实例集合

最新推荐文章于 2024-04-18 20:01:43 发布

Laney1206

最新推荐文章于 2024-04-18 20:01:43 发布

阅读量869

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/laney1206/article/details/8782884

版权

前端开发专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1．进入主页以后自动播放声音

2．进入主页后自动最大化,省的去在自己单击了

3．显示现在时间的脚本

4．显示最后修改时间的脚本

5．设为首页,加为收藏，加入频道,启动outlook发信

6．状态栏动态显示现在时间

7．关闭窗口的脚本

8．后退、刷新、前进

9．设定时间弹出窗口，4000=4秒，当然你可以自定义

10．鼠标旁边的提示信息

//***********默认设置定义.*********************

tPopWait=50;//停留tWait豪秒后显示提示。

tPopShow=5000;//显示tShow豪秒后关闭提示

showPopStep=20;

popOpacity=99;

//***************内部变量定义*****************

sPop=null;

curShow=null;

tFadeOut=null;

tFadeIn=null;

tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");

document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");

document.write("</style>");

document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showPopupText(){

var o=event.srcElement;

MouseX=event.x;

MouseY=event.y;

if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

if(o.dypop!=sPop) {

sPop=o.dypop;

clearTimeout(curShow);

clearTimeout(tFadeOut);

clearTimeout(tFadeIn);

clearTimeout(tFadeWaiting);

if(sPop==null || sPop=="") {

dypopLayer.innerHTML="";

dypopLayer.style.filter="Alpha()";

dypopLayer.filters.Alpha.opacity=0;

}

else {

if(o.dyclass!=null) popStyle=o.dyclass

else popStyle="cPopText";

curShow=setTimeout("showIt()",tPopWait);

}

function showIt(){

dypopLayer.className=popStyle;

dypopLayer.innerHTML=sPop;

popWidth=dypopLayer.clientWidth;

popHeight=dypopLayer.clientHeight;

if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24

else popLeftAdjust=0;

if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24

else popTopAdjust=0;

dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;

dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;

dypopLayer.style.filter="Alpha(Opacity=0)";

fadeOut();

}

function fadeOut(){

if(dypopLayer.filters.Alpha.opacity<popOpacity) {

dypopLayer.filters.Alpha.opacity+=showPopStep;

tFadeOut=setTimeout("fadeOut()",1);

}

else {

dypopLayer.filters.Alpha.opacity=popOpacity;

tFadeWaiting=setTimeout("fadeIn()",tPopShow);

}

function fadeIn(){

if(dypopLayer.filters.Alpha.opacity>0) {

dypopLayer.filters.Alpha.opacity-=1;

tFadeIn=setTimeout("fadeIn()",1);

}

document.οnmοuseοver=showPopupText;

</script>

11．如果文字过长,则将过长的部分变成省略号显示

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;

overflow: hidden; text-overflow:ellipsis">

<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

</DIV>

12．滚动的图片

imgArr=new Array()

imgArr[0]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"

imgArr[1]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"

imgArr[2]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"

imgArr[3]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"

imgArr[4]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"

var moveStep=4 //步长，单位：pixel

var moveRelax=100 //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayImgAmount=4 //视区窗口可显示个数

var divWidth=220 //每块图片占位宽

var divHeight=145 //每块图片占位高

var startDnum=0

var nextDnum=startDnum+displayImgAmount

var timeID

var outHover=false

var startDivClipLeft

var nextDivClipRight

function initDivPlace(){

if (ns4){

for (i=0;i<displayImgAmount;i++){

eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)

}

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)

}

}else{

for (i=0;i<displayImgAmount;i++){

eval("document.all.divAds"+i+".style.left="+divWidth*i)

}

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)

}

function mvStart(){

timeID=setTimeout(moveLeftDiv,moveRelax)

}

function mvStop(){

clearTimeout(timeID)

}

function moveLeftDiv(){

if (ns4){

for (i=0;i<=displayImgAmount;i++){

eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")

}

startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))

nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

if (startDivClipLeft+moveStep>divWidth){

eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)

eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)

eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)

eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)

nextDivClipRight=moveStep-(divWidth-nextDivClipRight)

}else{

eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)

eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)

}else{

for (i=0;i<=displayImgAmount;i++){

eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")

}

startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))

nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))

if (startDivClipLeft+moveStep>divWidth){

eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")

eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)

eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)

nextDivClipRight=moveStep-(divWidth-nextDivClipRight)

}else{

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")

eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")

}

if (outHover){

mvStop()

}else{

mvStart()

}

function writeDivs(){

if (ns4){

document.write("<ilayer name=divOuter width=750 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){

document.write("<layer name=divAds"+i+">")

document.write(imgArr[i]+" ")

document.write("</layer>")

}

document.write("</ilayer>")

document.close()

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.divOuter.document.divAds"+i+".clip.right=0")

}

}else{

document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){

document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")

document.write(imgArr[i]+" ")

document.write("</div>")

}

document.write("</div>")

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")

}

</script>

<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>

13．让你的文本链接渐隐渐显

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

startColor = "#671700"; // 定义链接颜色

endColor = "#D8D1C5"; // 定义要渐变到最后的颜色

stepIn = 17;

stepOut = 23;

定义是否让所有的文本链接自动渐变，true为是，false为否

autoFade = true;

在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式

sloppyClass = false;

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a"; hexa[11]="b"; hexa[12]="c";

hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;

document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());

endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){

var colorArr = new makearray(3);

for (i=1; i<7; i++){

for (j=0; j<16; j++){

if (Color.charAt(i) == hexa[j]){

if (i%2 !=0)

colorArr[Math.floor((i-1)/2)]=eval(j)*16;

else

colorArr[Math.floor((i-1)/2)]+=eval(j);

}

return colorArr;

}

function domouseover() {

if(document.all){

var srcElement = event.srcElement;

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))

fade(startColor,endColor,srcElement.uniqueID,stepIn);

}

function domouseout() {

if (document.all){

var srcElement = event.srcElement;

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))

fade(endColor,startColor,srcElement.uniqueID,stepOut);

}

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this[i] = 0;

return this;

}

function hex(i) {

if (i < 0)

return "00";

else if (i > 255)

return "ff";

else

return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {

var hr = hex(r); var hg = hex(g); var hb = hex(b);

element.style.color = "#"+hr+hg+hb;

}

function fade(s,e, element,step){

var sr = s[0]; var sg = s[1]; var sb = s[2];

var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){

setColor(sr,sg,sb,eval(fadeId[0]));

var i = 1;

while(i < fadeId.length){

clearTimeout(fadeId[i]);

i++;

}

for(var i = 0; i <= step; i++) {

fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +

step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+

")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);

}

fadeId[0] = element;

}

</script>

</BODY>

</HTML>

<A HREF="http://www.wawaqin.com">让你的文本链接渐隐渐显</A>

14．树型菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

if (!document.getElementById)

document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {

var menu = document.getElementById(menuId);

var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I'm too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";

actuator.onclick = function() {

var display = menu.style.display;

this.parentNode.style.backgroundImage =

(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";

menu.style.display = (display == "block") ? "none" : "block";

return false;

}

window.onload = function() {

initializeMenu("productsMenu", "productsActuator");

initializeMenu("newPhonesMenu", "newPhonesActuator");

initializeMenu("compareMenu", "compareActuator");

}

</script>

<style>

body {

font-family: verdana, helvetica, arial, sans-serif;

}

#mainMenu {

background-color: #EEE;

border: 1px solid #CCC;

color: #000;

width: 203px;

}

#menuList {

margin: 0px;

padding: 10px 0px 10px 15px;

}

li.menubar {

background: url(/images/plus.gif) no-repeat 0em 0.3em;

font-size: 12px;

line-height: 1.5em;

list-style: none outside;

}

.menu, .submenu {

display: none;

margin-left: 15px;

padding: 0px;

}

.menu li, .submenu li {

background: url(/images/square.gif) no-repeat 0em 0.3em;

list-style: none outside;

}

a.actuator {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

a.actuator:hover {

text-decoration: underline;

}

.menu li a, .submenu li a {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

.menu li a:hover, submenu li a:hover {

/*border-bottom: 1px dashed #000;*/

text-decoration: underline;

}

span.key {

text-decoration: underline;

}

</style>

</head>

<body>

<a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</BODY>

</HTML>

Laney1206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录