最近在弄一个倒计时抽奖的项目,由于是每天的某个时间段所以,网上也没有找到自己合适的。就自己写了一个留下来以供参考。其中最值得注意的一点是不同种类型的手机对自定义的时间支持方式是不一样的。苹果时间只能支持/ 不支持- 安卓都可行。
下面是代码。
<script type="text/javascript"> var flg = true; //苹果时间只能支持/ 不支持- var myDay = ["2016/02/24 10:00:00", "2016/02/24 11:00:00", "2016/02/24 12:00:00", "2016/02/24 14:00:00", "2016/02/24 15:00:00", "2016/02/25 10:00:00", "2016/02/25 11:00:00", "2016/02/25 12:00:00", "2016/02/25 14:00:00", "2016/02/25 15:00:00", "2016/02/26 10:00:00", "2016/02/26 11:00:00", "2016/02/26 12:00:00", "2016/02/26 14:00:00", "2016/02/26 15:00:00", ]; var hh = ""; var mm = ""; var ss = ""; var Day = ""; //开始时间 var starTime = ""; //持续时间 var continueTime = 30; //是否开始抽奖 默认不可以 var isStart = false; var flg = true; //第一次进入 var first = true; //服务器时间 var ServerTime = ""; //S刷新时间 var RefreshTime = false; //上一次刷新的时间 var UpTime = new Date().getTime(); var sTime = ""; window.onload = function () { $.ajax({ url: "/Handel/H_User.ashx?action=dataTime&t=" + new Date().getTime(), type: "get", success: function (data) { if (data != "") { ServerTime = data; //第一次加载 ,防止中间的那一秒空缺 D_Time(); } } }); setTimeout(function () { $.ajax({ url: "/Handel/H_User.ashx?action=dataTime&t=" + new Date().getTime(), type: "get", success: function (data) { if (data != "") { ServerTime = data; setInterval("D_Time()", 1000); } } }); }, 2000) //防止时间黑屏造成的时间误差 $("body").bind("touchmove", function () { if (new Date().getTime() - UpTime > 1000 * 10) { if (flg == false) { return; } flg = false; $.ajax({ url: "/Handel/H_User.ashx?action=dataTime&t=" + new Date().getTime(), type: "get", success: function (data) { flg = true; if (data != "") { sTime = data; UpTime = new Date().getTime(); RefreshTime = true; D_Time(); } } }); } }) function ChangeShowTime() { //累加服务器时间 ServerTime = new Date(ServerTime).getTime() + 1000; $.each(eval(myDay), function (i, item) { debugger if (new Date(item).getDate() > new Date(ServerTime).getDate()) { starTime = item; return false; } //当天 if (new Date(item).getDate() == new Date(ServerTime).getDate()) { //大于当前小时 if (new Date(item).getHours() > new Date(ServerTime).getHours()) { starTime = item; return false; } //等于当前小时 else if (new Date(item).getHours() == new Date(ServerTime).getHours()) { //3分钟内 if (new Date(ServerTime).getMinutes() <= continueTime) { starTime = item; isStart = true; return false; } else { isStart = false; } } } }); } function D_Time() { if (RefreshTime == true) { ServerTime = new Date(sTime); RefreshTime = false; } ChangeShowTime(); // var myDate = new Date(ServerTime); var leftTime = new Date(starTime).getTime() - ServerTime; var leftsecond = parseInt(leftTime / 1000); var seconds = leftTime / 1000; var minutes = Math.floor(leftsecond / 60); var hours = Math.floor(minutes / 60); var days = Math.floor(hours / 24); var CDay = days; var CHour = hours % 24 + CDay * 24; var CMinute = minutes % 60; var CSecond = Math.floor(seconds % 60); if (isStart == true) { //3分钟之后 if (new Date(ServerTime).getMinutes() > continueTime) { isStart = false; } $("#timer").empty(); $("#timer").append("<b>0<em></em></b><b>0<em></em></b> <span>小时</span> <b>0<em></em></b><b>0<em></em>" + "</b><span>分钟</span><b>0<em></em></b> <b>0<em></em></b><span>秒</span>"); } else { if (CHour < 10) { hh = "<b>0<em></em></b><b>" + CHour + "<em></em></b><span>"; } else { hh = "<b>" + CHour.toString().substr(0, 1) + "<em></em></b><b>" + CHour.toString().substr(1, 2) + "<em></em></b><span>"; } if (CMinute < 10) { mm = "</span><b>0<em></em></b><b>" + CMinute + "<em></em></b><span>"; } else { mm = "</span><b>" + CMinute.toString().substr(0, 1) + "<em></em></b><b>" + CMinute.toString().substr(1, 2) + "<em></em></b><span>"; } if (CSecond < 10) { ss = "</span><b>0<em></em></b><b>" + CSecond + "<em></em></b> <span>"; } else { ss = "</span><b>" + CSecond.toString().substr(0, 1) + "<em></em></b><b>" + CSecond.toString().substr(1, 2) + "<em></em></b> <span>"; } $("#timer").empty(); $("#timer").append("" + hh + "小时" + mm + "分钟" + ss + "秒</span>"); } } </script>