最近在弄一个倒计时抽奖的项目,由于是每天的某个时间段所以,网上也没有找到自己合适的。就自己写了一个留下来以供参考。其中最值得注意的一点是不同种类型的手机对自定义的时间支持方式是不一样的。苹果时间只能支持/ 不支持- 安卓都可行。

下面是代码。

 <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 = ;
//是否开始抽奖 默认不可以
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()", );
}
}
});
}, )
//防止时间黑屏造成的时间误差 $("body").bind("touchmove", function () {
if (new Date().getTime() - UpTime > * ) { 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() + ;
$.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 / );
var seconds = leftTime / ;
var minutes = Math.floor(leftsecond / );
var hours = Math.floor(minutes / );
var days = Math.floor(hours / );
var CDay = days;
var CHour = hours % + CDay * ;
var CMinute = minutes % ;
var CSecond = Math.floor(seconds % ); 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 < ) {
hh = "<b>0<em></em></b><b>" + CHour + "<em></em></b><span>";
}
else {
hh = "<b>" + CHour.toString().substr(, ) + "<em></em></b><b>" + CHour.toString().substr(, ) + "<em></em></b><span>";
}
if (CMinute < ) {
mm = "</span><b>0<em></em></b><b>" + CMinute + "<em></em></b><span>";
}
else {
mm = "</span><b>" + CMinute.toString().substr(, ) + "<em></em></b><b>" + CMinute.toString().substr(, ) + "<em></em></b><span>";
}
if (CSecond < ) {
ss = "</span><b>0<em></em></b><b>" + CSecond + "<em></em></b> <span>";
}
else {
ss = "</span><b>" + CSecond.toString().substr(, ) + "<em></em></b><b>" + CSecond.toString().substr(, ) + "<em></em></b> <span>";
} $("#timer").empty();
$("#timer").append("" + hh + "小时" + mm + "分钟" + ss + "秒</span>");
} } </script>

工作总结_js倒计时的更多相关文章

  1. 工作总结_js

    工作至今已经有7个月了,虽然有进步,但是总感觉还是什么都不知道.可能这其中很大一部分还是与自己有关系,遇到自己不知道,问了人,或者百度到了,但是自己没有用心记.平时要用的时候,打开上一个项目,复制粘贴 ...

  2. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  3. 关于Java并发编程的总结和思考

    编写优质的并发代码是一件难度极高的事情.Java语言从第一版本开始内置了对多线程的支持,这一点在当年是非常了不起的,但是当我们对并发编程有了更深刻的认识和更多的实践后,实现并发编程就有了更多的方案和更 ...

  4. 【转】关于Java并发编程的总结和思考

    一.前言 就是想学习Java并发编程了,所以转载一下这篇认为还不错的博客~ 二.正文 编写优质的并发代码是一件难度极高的事情.Java语言从第一版本开始内置了对多线程的支持,这一点在当年是非常了不起的 ...

  5. 2020 倒计时 1 天,Python 工程师找工作更难了?

    Python 是最神奇的编程语言. 无意引战,我说的是"神奇",不是"最好",并不想去"撼动" PHP 的地位.               ...

  6. 使用系统自带的GCD的timer倒计时模板语句遇到的小坑。。

    今天折腾了下系统gcd的 但是如果不调用这句dispatch_source_cancel()那么这个timer根本不工作....解决方法如下: 实现一个倒计时用自带的gcd如此简洁.. 原因可能是如果 ...

  7. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  8. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  9. 使用js倒计时还有几天及计时过了几天

    公司主营业务是体育赛事为主的:尤其是足球赛事.现正值2016法国欧洲杯:之前忙于做欧洲杯专题没时间总结.现分享一个工作中需求带来的经历. 需求是:从现在开始倒计时欧洲杯还有多久开赛:当开赛之后开始计算 ...

随机推荐

  1. lvs+keepalived

    一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2.6.32-279.el6.i686 LVS版本:ipvsadm-1.26 keepalive ...

  2. Delphi中DBChart的数据库应用

    一:属性相关:Series选项: (1)Format页(数据柱的风格) 在Color Each中打勾,就可使用多种颜色显示,color按钮用于设置颜色,Style用于设置图表的风格(Rectangle ...

  3. OSG计时器与时间戳

    static osg::Timer* sendMsgTimer = new osg::Timer; if (sendMsgTimer->time_m()>100)//100ms {// d ...

  4. linux 如何查找io的进程

    [root@NB ok]# echo chenlin|base64;echo Y2hlbmxpbgo= [root@NB ok]# yum search iotop Loaded plugins: f ...

  5. Duilib源码分析(四)绘制管理器—CPaintManagerUI—(前期准备三)

    接下来,我们将继续分析UIlib.h文件中其他的文件, UIContainer.h, UIRender.h, WinImplBase.h, UIManager.h,以及其他布局.控件等: 1. UIR ...

  6. jsf初学数据表(DataTable)的绑定

    来看看简单的datatable例子: faces: <h:form> <h:dataTable value="#{tableData.names}" var=&q ...

  7. 【DWR系列06】- DWR日志及js压缩

    img { border: solid 1px } 一.日志 DWR依赖 Apache Commons Logging,可以使用log4j实现日志记录功能. 1.1 日志简介 和其他日志框架一样,当设 ...

  8. 谈谈SQL 语句的优化技术

    https://blogs.msdn.microsoft.com/apgcdsd/2011/01/10/sql-1/ 一.引言 一个凸现在很多开发者或数据库管理员面前的问题是数据库系统的性能问题.性能 ...

  9. SQL Server 系统数据库

    Sql Server的系统数据库分为:master.model.msdb,resouce和tempdb,这五个数据库在SQL Server中各司其职,作为研发人员,很有必要了解这几个数据库的职责,下面 ...

  10. C# DM5 32位加密

    using System.Security.Cryptography;using System.Text; public static string StringToMD5Hash(string in ...