工作总结_js倒计时
最近在弄一个倒计时抽奖的项目,由于是每天的某个时间段所以,网上也没有找到自己合适的。就自己写了一个留下来以供参考。其中最值得注意的一点是不同种类型的手机对自定义的时间支持方式是不一样的。苹果时间只能支持/ 不支持- 安卓都可行。
下面是代码。
<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倒计时的更多相关文章
- 工作总结_js
工作至今已经有7个月了,虽然有进步,但是总感觉还是什么都不知道.可能这其中很大一部分还是与自己有关系,遇到自己不知道,问了人,或者百度到了,但是自己没有用心记.平时要用的时候,打开上一个项目,复制粘贴 ...
- react native中的聊天气泡以及timer封装成的发送验证码倒计时
今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...
- 关于Java并发编程的总结和思考
编写优质的并发代码是一件难度极高的事情.Java语言从第一版本开始内置了对多线程的支持,这一点在当年是非常了不起的,但是当我们对并发编程有了更深刻的认识和更多的实践后,实现并发编程就有了更多的方案和更 ...
- 【转】关于Java并发编程的总结和思考
一.前言 就是想学习Java并发编程了,所以转载一下这篇认为还不错的博客~ 二.正文 编写优质的并发代码是一件难度极高的事情.Java语言从第一版本开始内置了对多线程的支持,这一点在当年是非常了不起的 ...
- 2020 倒计时 1 天,Python 工程师找工作更难了?
Python 是最神奇的编程语言. 无意引战,我说的是"神奇",不是"最好",并不想去"撼动" PHP 的地位. ...
- 使用系统自带的GCD的timer倒计时模板语句遇到的小坑。。
今天折腾了下系统gcd的 但是如果不调用这句dispatch_source_cancel()那么这个timer根本不工作....解决方法如下: 实现一个倒计时用自带的gcd如此简洁.. 原因可能是如果 ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
- jQuery倒计时插件
倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...
- 使用js倒计时还有几天及计时过了几天
公司主营业务是体育赛事为主的:尤其是足球赛事.现正值2016法国欧洲杯:之前忙于做欧洲杯专题没时间总结.现分享一个工作中需求带来的经历. 需求是:从现在开始倒计时欧洲杯还有多久开赛:当开赛之后开始计算 ...
随机推荐
- 【Django】--ModelForm组件
ModelForm a.class Meta: model,#对应Model的 fields=None,#字段 exclude=None,#排除字段 labels=None,#提示信息 help_te ...
- SQL Server删除重复行的6个方法
SQL Server删除重复行是我们最常见的操作之一,下面就为您介绍六种适合不同情况的SQL Server删除重复行的方法,供您参考. 1.如果有ID字段,就是具有唯一性的字段 delect ta ...
- Jquery-zTree的用法
[部分函数和属性介绍] 核心:zTree(setting, [zTreeNodes]) 这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 ...
- Linux正则表达式
正则表达示的组成: 一般字符:没有特殊意义的字符 特殊字符(meta字符):元字符,有在正则表达式中有特殊意义 正则表达式中常见的meta字符 POSIX BRE与ERE中都有的meta字符 \ 通常 ...
- JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId
针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...
- 移动端js知识总结
1.如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX, 获取touch ...
- 学习微信小程序之css9内边距
padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- iframe中positioin:fixed失效问题
页面中嵌套的iframe 内的 position:fixed元素定位失效fixed正常页面 此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角:以iframe形式嵌入后 此时p ...
- Spring事务
1.@Transactional 只能被应用到public方法上, 对于其它非public的方法,如果标记了@Transactional也不会报错,但方法没有事务功能.@Transactional 的 ...