网页设计课程----------------javascript特效举例

来源：互联网发布：js 单位换算编辑：程序博客网时间：2024/05/21 14:40

一、日期星期的显示:

下面这段程序放在<body>与</body>之间

<!--
todayDate = new Date();
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
document.write("今天是")
document.write("<br>")
if(navigator.appName == "Netscape")
{
document.write(1900+year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日");
document.write("<br>")
}
if(navigator.appVersion.indexOf("MSIE") != -1)
{
document.write(year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日");
document.write("<br>") //表示换行
}
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("星期四")

//-->

</SCRIPT>

源程序讲解：更多请参考：http://www.hongen.com/pc/index.htm

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("<br>")	输出“今天是”
if(navigator.appName == "Netscape") { document.write(1900+year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("<br> ") }	如果浏览器是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("<br> ") }	如果浏览器是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输出今天是“星期几”。

二、表单验证代码：

<form name="form1" method="post" action="" onSubmit="javascript: return CheckForm();">

if(document.form1.key1.value=="")    //测试密码是否为空
{
    alert("请输入密码！");
document.form1.key1.focus();
    return false;
}

if((form1.key2.value=="" )|(form1.key1.value!=form1.key2.value)) //测试两次密码输入是否一致
{
alert("您两次输入的密码不一样！请重新输入.");
form1.password1.focus();
return false;
}
return true;
}

function cr(){
//捕获触发事件的对象，并设置为以下语句的默认对象
//当前事件的源，也就是用它可以获得正在触发事件的对像
//就像document.getElementById(”")这样的功能，例如(event.srcElement.styl.borderColor="Red";)
with(event.srcElement)
//如果当前值为默认值，则清空
if(value==defaultValue) value=""
}

</script>

</form>

三、教材p196页代码：

<body>
<script language="JavaScript">

var urodz=new Date("12/27/2008");
var now=new Date();
var ile=urodz.getTime()-now.getTime();
var dni=Math.floor(ile/(1000*60*60*24));

if(dni>1)

document.write("飞翔手机商城二周岁生日还有<font color=FF0000><strong>",dni,"</strong></font>天！为感谢广大支持我们的用户，在此特举办抽奖送礼活动，欢迎参加！")
else if(dni==1)
document.write("    只有2天啦!")
else if(dni==0)
document.write("     只有1天啦!")
else if(dni==-1)
document.write("    祝飞翔生日快乐!")
else
document.write("     好像已经过了哦!");
</script>
</body>
</html>

四、大家可以到百度上去搜索javascript特效，网上有大把例子的。

下面是其它时间特效例子

◆数字化的时钟

说明

数字化的时钟

代码

<span id="liveclock" style"=width: 109px; height: 15px"></span>
<SCRIPT language=javascript>
function www_helpor_net()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()

if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
myclock="现在时刻：<font size='5' face='Arial black'>"+hours+":"+minutes+":"+seconds+"</font>"
if(document.layers){document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}else if(document.all)
liveclock.innerHTML=myclock
setTimeout("www_helpor_net()",1000)
}
www_helpor_net();
//-->
</SCRIPT>

◆六种风格的时间

说明

六种风格时间显示,一定有你喜欢的！

代码

<SCRIPT language="javascript">
<!--
function initArray()
{
for(i=0;i<initArray.arguments.length;i++)
this[i]=initArray.arguments[i];
}
var isnMonths=new initArray
("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDays=new initArray
("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"下午":"上午";
var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d)
{
yr=d.getYear();if(yr<1000)
yr+=1900;return yr;}
document.write("<table>");

//下面各行分别是一种风格，把不需要的删掉即可
document.write("<TR><TD>风格一:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年");
document.write("<TR><TD>风格二:</TD><TD>"+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格三:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格四:</TD><TD>"+
(today.getMonth()+1)+"/"+today.getDate()+"/"+
(getFullYear(today)+"").substring(2,4)+"</TD></TR>");
document.write("<TR><TD>风格五:</TD><TD>"+hrs+":"+clckm+":"+clcks+"</TD></TR>");
document.write("<TR><TD VALIGN=TOP>风格六:</TD><TD>"+today+"</TD></TR>");

document.write("</table>");
//-->
</SCRIPT>

◆显示停留的时间
说明	显示他人在页面停留的时间，而且可以作出提醒
代码	您在本站逗留了<input type="text" name="helpor_net" size="15" style="border: 0 "> <SCRIPT language="javascript"> <!-- var sec=0; var min=0; var hou=0; flag=0; idt=window.setTimeout("www_helpor_net();",1000); function www_helpor_net() { sec++; if(sec==60){sec=0;min+=1;} if(min==60){min=0;hou+=1;} if((min>0)&&(flag==0)) { window.alert("您刚刚来了1分钟!可别急着走开，还有好多好东东等着您呢!--站长"); flag=1; } helpor_net.value=hou+"小时"+min+"分"+sec+"秒"; idt=window.setTimeout("www_helpor_net();",1000); } //--> </SCRIPT>

◆有影子的数字时钟

说明

这个时钟是有影子的，而且还在不停地走着呢

代码

<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#cccccc;font-size:20px;top:50px;left:173px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#000000;font-size:20px;top:48px;left:170px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
<script language=javaScript>
<!--
function www_helpor_net() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds

if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}

if(document.layers) {
document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:20px;top:10px;left:152px">'+thistime+'</div>')
document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:20px;top:8px;left:150px">'+thistime+'</div>')
document.close()
}
var timer=setTimeout("www_helpor_net()",200)
}
www_helpor_net();
//-->
</script>

◆全中文日期显示

说明

年月日都是用全中文显示。

代码

var today1 = new Date()
var month = today1.getMonth()+1
var date = today1.getDate()
var day = today1.getDay()

document.write("公元二零零三年")
number(month)
document.write("月")
number(date)
document.write("日")
//-->
</script>

请参考：http://wytd.66169.com/index.php