第十四章 利用js制作网页特效
本章介绍js制作事件特效,图像特效,窗口特效,鼠标特效和其他特效
14.1 时间特效
14.1.1 显示当前时间
getHours(),getMinutes(),getSeconds()
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示当前时间</title>
<script language="JavaScript">
function showTime() {
var nowTime=new Date();
var hours=nowTime.getHours();
var minutes=nowTime.getMinutes();
var seconds=nowTime.getSeconds();
var time=hours+"时";
time+=(minutes+"分");
time+=(seconds+"秒");
//直接用document取值 都不用getElementById()了
document.clock.show.value=time;//在名为clock的表单中输出变量timer的值
setTimeout("showTime()",1000);//每隔一秒自动调用一次showtime() 函数本身有周期性,不用写循环
}
</script>
<style type="text/css">
input{
font-size: 30px;
}
</style>
</head>
<body onload="showTime()">
<form name="clock" onsubmit="0">
<input type="text" name="show" size="10" style="background-color: lightyellow;border-width: 3;">
</form>
</body>
</html>运行结果:
14.1.2 显示当前日期
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示当前日期</title>
<script language="JavaScript">
function initArray() {
// this.length=initArray.arguments.length;
// for(var i=0;i<this.length;i++){
// this[i+1]=initArray.arguments[i];
// }
var today=new Date();
var d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
document.writeln(
"<font color='#fbae66' style='font-size: 9pt;font-family: 宋体;font-size: 30px'>",
today.getFullYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()],
"</font>"
);
}
</script>
</head>
<body onload="initArray()">
</body>
</html>运行结果:
14.1.3 显示网页停留时间
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示网页停留时间</title>
</head>
<body>
<form name="forms">
<div align="left">
<input type="text" name="input1" size="10">
<script language="JavaScript">
var sec=0;
var min=0;
var hou=0;
flag=0;
window.setTimeout("update();",1000);
function update() {
sec++;
if(sec==60){
sec=0;
min+=1;
}
if(min==60){
min=0;
hou+=1;
}
if(min>0&&flag==0){
window.alert("欢迎光临!再看一会儿嘛!");
flag=1;
}
document.forms.input1.value=hou+"时"+min+"分"+sec+"秒";
window.setTimeout("update();",1000);//递归调用
}
</script>
</div>
</form>
</body>
</html>运行结果:
14.1.4 制作倒计时特效
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作倒计时特效</title>
<script language="JavaScript">
var timedate=new Date("September 1,2018");
var times="开学";
var now=new Date();
var date=timedate.getTime()-now.getTime();//和java一样,ms
var time=Math.floor(date/(1000*60*60*24));//毫秒化为天
if(time>=0){
document.writeln("现在离"+times+"还有:<font color='red'><b>"+time+"</b></font>天");
}
</script>
</head>
<body>
</body>
</html>运行结果:
直接在script里写,不写成函数,自动解释执行