Javascript脚本特效示例：[25]时间交互提示

2025-11-02 09:53:14

1、在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。

<html>

<head>

<title>晓博JavaScript特效测试</title>

</head>

<body>

<ul>

<li><a href="#">七夕节传说</a></li>

<li><a href="#">七夕节习俗</a></li>

<li><a href="#">七夕节寄语</a></li>

</ul>

</div>

</body>

</html>

Javascript脚本特效示例：[25]时间交互提示

2、第一步：把如下代码加入<body>区域中,并重名文档为HTML文件

<!-----------

var enabled = 0; today = new Date();

var day; var date;

if(today.getDay()==0) day = "星期日"

if(today.getDay()==1) day = "星期一"

if(today.getDay()==2) day = "星期二"

if(today.getDay()==3) day = "星期三"

if(today.getDay()==4) day = "星期四"

if(today.getDay()==5) day = "星期五"

if(today.getDay()==6) day = "星期六"

document.fgColor = " FF0072";

date1 = "<font size=2 color=red>" + (today.getYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日 " + "</font>";

date2 = "<font size=1 color=red>" + day + "</font>";

document.write("<center>" + date1.fontsize(3) + date2.fontsize(3) + "</center>");

//----->

</SCRIPT>

<!--

document.write("<center><font color=#0066ff size=+1> ")

day = new Date()

hr = day.getHours()

if (hr ==1)

document.write("凌晨一点已过，别忘了休息喔！")

if (hr ==2)

document.write("该休息了，身体可是革命的本钱啊！")

if (hr ==3)

document.write("夜深人静，只有你敲击鼠标的声音...")

if (hr ==4)

document.write("四点过了，你明天不上班？？？")

if (hr ==5)

document.write("该去晨练了！！！")

if (hr ==6)

document.write("你知道吗，此时是国内网络速度最快的时候！")

if (hr ==7)

document.write("新的一天又开始了，祝你过得快乐！")

if ((hr ==8) || (hr == 9) || (hr ==10))

document.write("上午好！今天你看上去好精神哦！")

if (hr ==11)

document.write("十一点过了，快下班了吧？")

if (hr ==12)

document.write("十二点过了，还不下班？")

if ((hr==13) || (hr==14))

document.write("你不睡午觉？")

if ((hr==15) || (hr==16) || (hr==17))

document.write("下午好！")

if ((hr==18) || (hr==19))

document.write("吃晚饭了吧？")

if ((hr==20) || (hr==21) || (hr==22))

document.write("今晚又在这玩电脑了，没节目？")

if (hr==23)

document.write("真是越玩越精神，不打算睡了？")

if (hr==0)

document.write("凌晨了，还不睡？")

document.write("</font></center>")

//--->

</SCRIPT>

3、用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到随时间变化提示特效，如下图

Javascript脚本特效示例：[25]时间交互提示

4、接着，改变代码把提示放到网页上角改document.write("<center>" + date1.fontsize(3) + date2.fontsize(3) + "</center>");为

document.write("<div id=payrollHrInfo style='position:absolute;width:80;top:3;left:1000;visibility:visible;z-index: 1'><center>" + date1.fontsize(3) + date2.fontsize(3) + "</center></div>");

改第二个<SCRIPT language="JavaScript">里的document.write("<center><font color=#0066ff size=+1> ")为

document.write("<div id=payrollHrInfo style='position: absolute;width:180;top:38;left:1000;visibility:visible;z-index: 1'><font color=#0066ff size=+1> ")

document.write("</font></center>")加上</div>结束标记，运行效果如下图

Javascript脚本特效示例：[25]时间交互提示

5、把这段代码加入已经完成的网站，浏览运行效果，修改下相对位置达到最好效果，第一个改变width:180;top:3;left:1080;第二个改变width:180;top:20;left:1100;如下图变化，浏览效果

Javascript脚本特效示例：[25]时间交互提示

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。