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

下面是代码。

 <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. 使用JHChart勾勒你想要的图表

    前言 从2016年4月14日开始,本人着手开发了JHChart图表工具库.经过断断续续的开发,截止到现在,已经实现了折线图.柱状图.饼状图.环形图和表格样式的图表功能.为了方便使用,我已经将一个简单的 ...

  2. Django框架-目录文件简介

    Rhel6.5 Django1.10 Python3.5 Django框架-目录文件简介 1.介绍Django Django:一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django, ...

  3. git pull push 不用输入用户名和密码的方法

    1.在计算机的安装盘下找到 '用户' 这个文件夹打开. 2.找到'用户' 文件夹下面你当前的用户. 3.新建'.gitconfig' 文件 4. [user] email =  name = [pus ...

  4. 恶意软件伪装“正规军”,撕开Booster Cleaner“画皮”下的真相

    经常使用手机浏览器阅读小说的用户都知道,在浏览器页面经常会出现一些推广游戏应用.手机清理应用等应用的弹窗广告.有时出于方便,我们也会选择直接点开这些弹窗广告进行应用下载.但这种行为并不安全,部分恶意应 ...

  5. C#中的隐式类型var——详细示例解析

    从 Visual C# 3.0 开始,在方法范围中声明的变量可以具有隐式类型var.隐式类型可以替代任何类型,它的具体类型由编译器根据上下文推断而出. 下面就让我来总结下隐式类型的一些特点: 1.va ...

  6. 行为型模式之Observer模式

    观察者模式(又被称为发布-订阅模式.模型-视图模式.源-收听者模式或从属者模式) 观察者模式中,一个目标对象管理所有依赖于它的观察者对象,并且在它本身的状态改变时主动发出通知. 应用场景 拍卖会可以认 ...

  7. Oracle并发与多版本控制

    1.什么是并发 2.事务隔离级别    2.1 READ UNCOMMITTED    2.2 READ COMMITTED    2.3 REPETABLE READ    2.4 SERIALIZ ...

  8. 消息中间件MetaQ高性能原因分析-转自阿里中间件

    简介 MetaQ是一款高性能的消息中间件,经过几年的发展,已经非常成熟稳定,历经多年双11的零点峰值压测,表现堪称完美. MetaQ当前最新最稳定的稳本是3.x系统,MetaQ 3.x重新设计和实现, ...

  9. 关于linux服务器上搭建ftp服务的流程

    小龙最近折腾了一个阿里云的服务器,买完了就要开始做那么多那么多的功课,小龙对ssh也是一知半解的状态,做个小笔记,发布下整个ftp服务的搭建过程,大神勿喷:) 一.aliyun Linux(Redha ...

  10. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...