TkPao's Blog - JavaScript

265天气预报

tkpao@163.com(tkpao) — Thu,19 Mar 2009 16:52:38 +0800

http://www.265.com/weather.htm" width="168" height="50" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" name="265">

无限级可刷新Js树型菜单

tkpao@163.com(tkpao) — Wed,18 Mar 2009 16:29:55 +0800

HTML代码

<html> 
<head> 
<title>无限级可刷新Js树型菜单</title> 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 
<style type="text/css">

#myid1{ 
position: absolute; 
top:30px; 
left:105px; 
height: 30px; 
width:150px; 
visibility:visible; 
cursor:hand; 
color:red; 
font-size:14px;
}

#myid2{ 
position:absolute; 
top:60px; 
left:110px; 
width:110px; 
background-color:green; 
color:yellow; 
border-color:red; 
filter:revealTrans(transition=23,duration=0.5); 
visibility:hidden 
}

a{ 
TEXT-DECORATION: none 
} 
a:hover{ 
color:yellow; 
TEXT-DECORATION: none 
} 
a:visited{ 
color:yellow; 
TEXT-DECORATION: none 
}

a:link{ 
color:yellow; 
TEXT-DECORATION: none 
} 
</style>

//定义用来处理鼠标点击菜单标题的函数 
function doclick() 
{ 
//如果不是IE浏览器 
if(!isIE) 
{ 
//弹出相应的提示信息 
alert("请使用IE浏览器浏览本页面!"); 
return true; 
} 
//否则,表示用户使用的是IE浏览器 
else{ 
//如果菜单已经显示 
if(isshow) 
{ 
//装备动态滤镜 
myid2.filters.revealTrans.apply(); 
//设置菜单为隐藏 
myid2.style.visibility = "hidden"; 
//启动滤镜 
myid2.filters.revealTrans.play(); 
//把isshow标记变量设置为false 
isshow=false; 
return true; 
} 
//否则,如果菜单不可见 
else if(!isshow) 
{ 
//装备动态滤镜 
myid2.filters.revealTrans.apply(); 
//设置菜单为可见 
myid2.style.visibility = "visible"; 
//启动滤镜 
myid2.filters.revealTrans.play(); 
//把isshow标记变量设置为true 
isshow=true; 
return true; 
} 
} 
} 
//定义处理鼠标点击页面空白处的函数 
function otherclick() 
{ 
var theobj; 
//取得鼠标点击的对象 
theobj=event.srcElement; 
//如果该对象不是菜单标题和菜单 
if(theobj.id!="myid1"&&theobj.id!="myid2") 
{ 
//如果菜单可见 
if(isshow) 
{ 
//装备动态滤镜 
myid2.filters.revealTrans.apply(); 
//设置菜单为不可见 
myid2.style.visibility = "hidden"; 
//启动滤镜 
myid2.filters.revealTrans.play(); 
//把isshow标记变量设置为false 
isshow=false; 
return; 
} 
//否则,直接返回 
else{ 
return; 
} 
} 
//否则,直接返回 
else{ 
return; 
} 
} 
// --> 
</script>

</head> 
<body> 
<div id="myid1" onclick="doclick()"> 大学主页 </div> 
<div id="myid2">南开大学 <br> 
天津大学<br> 
清华大学<br> 
北京大学</div> 
<script language=javascript> 
 
</script>

</body> 
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="keywords" content=""> 
<style type=text/css> 
body { 
background:#799AE1; 
margin:0px; 
font:normal 12px 宋体; 
background-color: #000; 
} 
table { border:0px; } 
td { font:normal 12px 宋体; } 
img { vertical-align:bottom; border:0px; } 
a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } 
a:hover { color:#FFFFFF } 
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; } 
.menu_title { } 
.menu_title span { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; } 
.menu_title2 { } 
.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; } 
</style> 
<script language=javascript> 
function menuShow(obj,maxh,obj2) 
{ 
if(obj.style.pixelHeight<maxh) 
{ 
obj.style.pixelHeight+=maxh/20; 
obj.filters.alpha.opacity+=5; 
obj2.background="image/menudown.gif"; 
if(obj.style.pixelHeight==maxh/10) 
obj.style.display='block'; 
myObj=obj; 
myMaxh=maxh; 
myObj2=obj2; 
setTimeout('menuShow(myObj,myMaxh,myObj2)','5'); 
} 
} 
function menuHide(obj,maxh,obj2) 
{ 
if(obj.style.pixelHeight>0) 
{ 
if(obj.style.pixelHeight==maxh/20) 
obj.style.display='none'; 
obj.style.pixelHeight-=maxh/20; 
obj.filters.alpha.opacity-=5; 
obj2.background="image/menuup.gif"; 
myObj=obj; 
myMaxh=maxh 
myObj2=obj2; 
setTimeout('menuHide(myObj,myMaxh,myObj2)','5'); 
} 
else 
if(whichContinue) 
whichContinue.click(); 
} 
function menuChange(obj,maxh,obj2) 
{ 
if(obj.style.pixelHeight) 
{ 
menuHide(obj,maxh,obj2); 
whichOpen=''; 
whichcontinue=''; 
} 
else 
if(whichOpen) 
{ 
whichContinue=obj2; 
whichOpen.click(); 
} 
else 
{ 
menuShow(obj,maxh,obj2); 
whichOpen=obj2; 
whichContinue=''; 
} 
} 
</script> 
<base target=main> 
</head>

<body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;"> 
<table width=158 border="0" align=center cellpadding=0 cellspacing=0> 
<tr style="cursor:hand;"> 
<td height=25 class=menu_title id=menuTitle1 onClick="menuChange(menu1,80,menuTitle1);"

onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';> 
<span>系统选项</span> 
</td> 
</tr> 
<tr> 
<td> 
<div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>安全选项</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>垃圾邮件选项</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>动态规则选项</a> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table> 
<script language=javascript> 
var whichOpen=menuTitle1; 
var whichContinue=''; 
</script>

<table width=158 border="0" align=center cellpadding=0 cellspacing=0> 
<tr style="cursor:hand;"> 
<td height=25 class=menu_title id=menuTitle2 onClick="menuChange(menu2,120,menuTitle2);"

onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';> 
<span>系统规则</span> 
</td> 
</tr> 
<tr> 
<td> 
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>IP过滤规则</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信封过滤规则</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信头过滤规则</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信体过滤规则</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>附件过滤规则</a> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table> 
<table width=158 border="0" align=center cellpadding=0 cellspacing=0> 
<tr style="cursor:hand;"> 
<td height=25 class=menu_title id=menuTitle3 onClick="menuChange(menu3,120,menuTitle3);"

onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';> 
<span>系统管理</span> 
</td> 
</tr> 
<tr> 
<td> 
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>用户管理</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>进程管理</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>主机运行状态</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>数据备份</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>垃圾目录管理</a> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table>

<table width=158 border="0" align=center cellpadding=0 cellspacing=0> 
<tr style="cursor:hand;"> 
<td height=25 class=menu_title id=menuTitle4 onClick="menuChange(menu4,140,menuTitle4);"

onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';> 
<span>系统统计</span> 
</td> 
</tr> 
<tr> 
<td> 
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();> 
IP过滤统计</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信封过滤统计</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信头过滤统计</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>信体过滤统计</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>附件过滤统计</a> 
</td> 
</tr> 
<tr> 
<td height=20> 
<a href=http://www.tkpao.com onfocus=this.blur();>动态规则统计</a> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS+JS菜单

tkpao@163.com(tkpao) — Wed,18 Mar 2009 16:08:24 +0800

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS菜单</title>
<style type="text/css">
body{margin:0 auto;width:800px;font-family:arial;font-size:12px; position:relative;background:url(<a href="http://bbs.blueidea.com/images/default/logo.gif" target="_blank" rel="external">http://bbs.blueidea.com/images/default/logo.gif</a>);}
ul{margin:0;padding:0;list-style:none;}
#navigation{background:#01214F;height:30px;}
	#navigation li{float:left;position:relative;width:150px;}
	#navigation a{color:#fff;display:block;text-indent:1em;height:30px;padding-left:10px;line-height:30px;}
	#navigation a:hover{background:#07172D;}
	#navigation li ul{position:absolute;top:30px;left:0;width:300px;background:#01214F;padding:10px;border-bottom:solid 4px #900;display:none;opacity:0.95;}
		#navigation li ul li{width:150px;float:left;position:static;}
	/*鼠标移上*/
	#navigation li.show ul{display:block;}
		#navigation li.show a{background:#07172D;}
		#navigation li.show ul li a{background:#01214F;}
		#navigation li.show ul li a:hover{background:#1B3962;}
</style>

</head>
<body>
<ul id="navigation">
	<li>
		<a href="#">Menu</a>
		<ul>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Menu</a>
		<ul>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Menu</a>
		<ul>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
		</ul>
	</li>
</ul>
</body>
</html>
<script type="text/javascript">
function init_navigation(){
	var obj=document.getElementById("navigation");
	var liObj=obj.getElementsByTagName("li");
	var okLiObj=new Array();
	var length=liObj.length;
	var currentObj=null;
	for(var i=0;i<length;i++){
		currentObj=liObj[i];
		if(currentObj.parentNode==obj){
			okLiObj.push(currentObj);
		}
	}
	length=okLiObj.length;
	for(var i=0;i<length;i++){
		okLiObj[i].onmouseover=function(){
			this.className+=" show";
		}
		okLiObj[i].onmouseout=function(){
			this.className=this.className.replace("show","");
		}
		okLiObj[i].onclick=function(){
			this.className=this.className.replace("show","");
		}
	}
}
init_navigation();
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

倒计时牌

tkpao@163.com(tkpao) — Tue,16 Oct 2007 18:04:16 +0800

HTML代码

document.write("<tr>");
document.write("<td height=\"30\" background=\"images/acds_bg03.gif\"><span class=\"font-white12\">　"+thisyear+"年"+thismonth+"月"+thisdate+"日</span><span class=\"font-black12\">距第29届奥运会开幕</span></td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td height=\"41\" background=\"images/acds_bg04.gif\"><table width=\"165\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">");
document.write("<tr>");
document.write("<td width=\"83\" rowspan=\"2\" align=\"center\" class=\"font-time1\"><span id=\"dd\"></span></td>");
document.write("<td width=\"27\" align=\"center\" valign=\"bottom\" class=\"font-white12\"><span id=\"hh\"></span></td>");
document.write("<td width=\"25\" align=\"center\" valign=\"bottom\" class=\"font-white12\"><span id=\"mm\"></span></td>");
document.write("<td width=\"30\" align=\"center\" valign=\"bottom\" class=\"font-white12\"><span id=\"ss\"></span></td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td class=\"font-white12\"> </td>");
document.write("<td class=\"font-white12\"> </td>");
document.write("<td class=\"font-white12\"> </td>");
document.write("</tr>");
document.write("</table></td>");
document.write("</tr>");

function show_daojishi()
{
	window.setTimeout("show_daojishi()", 1000);
	BirthDay=new Date("August 8, 2008, 20:00:00");//
	today=new Date();
	timeold=(BirthDay.getTime()-today.getTime());
	sectimeold=timeold/1000;
	secondsold=Math.floor(sectimeold);
	msPerDay=24*60*60*1000
	e_daysold=timeold/msPerDay
	daysold=Math.floor(e_daysold);
	e_hrsold=(e_daysold-daysold)*24;
	hrsold=Math.floor(e_hrsold);
	e_minsold=(e_hrsold-hrsold)*60;
	minsold=Math.floor((e_hrsold-hrsold)*60);
	seconds=Math.floor((e_minsold-minsold)*60);

//daojishi.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
  dd.innerHTML=daysold;
  hh.innerHTML=hrsold;
  mm.innerHTML=minsold;
  ss.innerHTML=seconds;
}
show_daojishi();
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

JavaScript实例:倒计时

tkpao@163.com(tkpao) — Thu,20 Sep 2007 16:07:21 +0800

　　　　　倒计时

效果演示：

今天离8月8日还有322天

源代码如下：

这段程序放在与之间

源程序讲解：

var deadline= new Date("7/30/2000");	定义“到期”变量。你可以随便设置。
var symbol="7月30日";	定义“日期性质”变量，可以随便设置。
var now = new Date();	设置“现在”的时间。
var leave =deadline.getTime() - now.getTime();	设置变量“leave”的值为到期时间减现在时间，返回的为毫秒数。
var day = Math.floor(leave / (1000 * 60 * 60 * 24)); ;	将毫秒数化为天数，并返回一个不大于天数的整数。
if (day > 0) document.write("今天离"+ symbol+"还有"+day +"天") )	如果日期不是今天到期，就输出“还有多少天”。
else if (day == 0) document.write("只有1天啦！")	如果到期日就是机器今天的系统日期，则输出“只有一天了”。
else document.write("唉呀！已经过了！")	否则，就是过期了。

JavaScript实例:导航条式菜单

tkpao@163.com(tkpao) — Thu,20 Sep 2007 15:59:03 +0800

　　　　导航条式菜单

效果演示：

源代码如下：

源程序讲解：

onChange="javascript:window.open
(this.options[this.selectedIndex].value)"
style="BACKGROUND-COLOR: #d9dcff; COLOR: rgb(0,0,128);

当选项有变化时，执行当前选项的值，同时设定背景色，字体颜色。

JavaScript实例:日期星期的显示

tkpao@163.com(tkpao) — Thu,20 Sep 2007 15:44:11 +0800

　　　　　日期星期的显示

效果演示：

今天是
2007年9月20日
星期四今天是
2007年9月20日
星期四

源代码如下：

这段程序放在与之间

源程序讲解：

todayDate = new Date();	当定义一个新的对象时，通常使用“new”操作符。在这里，就是创建了日期对象。
date = todayDate.getDate();	getDate()是Date对象的一种方法，其功能是获得当前的日期。
month= todayDate.getMonth() + 1 ; ;	getMonth()是Date对象的一种方法，其功能是获得当前的日期，由于月份是从0开始的，所以这里要“+1”。
year= todayDate.getYear()	getYear()是Date对象的一种方法，其功能是获得当前的年份。
document.write("今天是") document.write(" ")	输出“今天是”
if(navigator.appName == "Netscape") { document.write(1900+year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write(" ") }	如果浏览器是Netscape，输出今天是“year”+“年”+“month”+“月”+“date”+“日”，其中年要加1900。
if(navigator.appVersion.indexOf("MSIE") != -1) { document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write(" ") }	如果浏览器是IE，直接输出今天是“year”+“年”+“month”+“月”+“date”+“日”。
document.write("") ；	在“日期”与“星期”之间输入一个空格。
if (todayDate.getDay() == 5) document.write("星期五")； if (todayDate.getDay() == 6) document.write("星期六")； if (todayDate.getDay() == 0) document.write("星期日")； if (todayDate.getDay() == 1) document.write("星期一")； if (todayDate.getDay() == 2) document.write("星期二")； if (todayDate.getDay() == 3) document.write("星期三")； if (todayDate.getDay() == 4) document.write("星期四")	getDay()是Date对象的一种方法，其功能是获得当前是星期几。document.write输出今天是“星期几”。

JavaScript实例:显示最后修改日期

tkpao@163.com(tkpao) — Thu,20 Sep 2007 14:56:17 +0800

　　　　　显示最后修改日期

效果演示：

源代码如下：

这段程序放在与之间

源程序讲解：

hide script from old browsers	有些低版本的浏览器不支持javascript,写上这句代码，在低版本的浏览器中，javascript可被忽略。
function modified(){	用function语句定义一个函数以及它的参数。
document.form1.textfield.value= document.lastModified}	lastmodified是document对象的一个属性，可以自己输出上次修改该文件的时间。这句代码意思是把上次修改时间输出到名字为textfield的文本框中。
form name="form1" input type="text" name="textfield"	在页面中建立一个文本框，名字要为textfield。
onload=modified()	页面装载时，调用modified函数。

最简单的一段显示最后修改日期的代码：