1.倒计时效果
一、简单的时钟效果
首先要熟悉日期函数date()以及其常用的方法
getFullYear() 返回完整的年份 比如：2016
getMonth() 返回月份（从0开始，需+1）
getDate() 返回日期
getHours() 返回小时数
getMinutes() 返回分钟数
getSeconds() 返回秒数
getDay() 返回星期几 （0-6,0是星期天，1是星期一）
写一个简单的html页面，用来展示时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>时钟效果</title> <meta charset="utf-8" /> <style> div{ color:white; margin:0 auto; text-align:center; font-size:40px; width:500px; height:200px; background:orangered; padding-top:10px; line-height:150%; } </style> </head> <body> <div id="htime">显示当前时间</div> </body> </html>
运行效果如下：
加入js代码：
<script> window.onload = function () { getTime(); } function getTime() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1;//月份要加一 var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); minute = minute > 10 ? minute : ("0" + minute); var second = now.getSeconds(); second = second > 10 ? second : ("0" + second) var w = now.getDay();//星期几 //星期 var week = new Array(7); week[0] = "星期日"; week[1] = "星期一"; week[2] = "星期二"; week[3] = "星期三"; week[4] = "星期四"; week[5] = "星期五"; week[6] = "星期六"; document.getElementById("htime").innerHTML = year + "年" + month + "月" + date + "日 " + "</br>" + hour + "时" + minute + "分" + second + "秒" + "</br>" + week[w]; setTimeout(getTime, 500);//500毫秒执行一次 } </script>
运行效果如下：
二、高考倒计时
//距离高考仅剩多少天
function gkLast() {
var curTime = new Date();
var gkTime = new Date(2016, 5, 6);//设置高考时间 月份是从0开始的奥，所以此处是5而非6
var lastTime = gkTime.getTime() - curTime.getTime();//getTime()获取毫秒数
//1天=24小时 1小时=60分钟 1分钟=60秒 1秒=1000毫秒
var days = Math.ceil(lastTime / (24 * 60 * 60 * 1000));//Math.ceil() 向上取整，比如1.1=2；2.0=2；3.7=4；
document.getElementById("htime").innerHTML = "距离高考仅有"+days+"天";
}
三、抢购活动倒计时
function QiangGou() { var now = new Date();//获取当前时间 var endTime = new Date(2016, 5, 1);//抢购结束时间2016/6/1 此处注意月份 var lastTime = (endTime.getTime() - now.getTime())/1000;//剩余的秒数 var day = Math.floor(lastTime / (60 * 60 * 24));//天数 var hour = Math.floor(lastTime / (60 * 60) % 24);//小时 var minute = Math.floor(lastTime / 60 % 60);//分钟 var sencond = Math.floor(lastTime % 60);//秒数 document.getElementById("htime").innerHTML = "距离活动结束还有" + day + "天" + hour + "小时" + minute + "分钟" + sencond + "秒"; if (lastTime<=0) { document.getElementById("htime").innerHTML = "活动已结束"; } setTimeout(QiangGou, 500);//500毫秒执行一次 }
