设置一天中不同时段的倒计时

需求:获得一天5个不同阶段的倒计时,为期10天。

计数时段分比为:

第一时段9:00-11:59、第二时段12:00-17:59、第三时段18:00-20:59、第四时段21:00-23:59、第五时段次日0:00-8:59,共五个时段。

简单的写了如下:见第一部分。

当然真实肯定不是这样,稍微调整一下,要从服务器获取时间的,不要相信客户端时间,见第二部分。

DOM:

<div id="txt"></div>

JS:

-----------------------------第一部分--------------------------------------------

function ShowCountDown() {
    var now = new Date(),
        year = now.getFullYear(),
        month = now.getMonth(),
        day = now.getDate(),
        h = now.getHours(),
        endDate;
    if (h >= 0 && h < 9) {
        endDate = new Date(year, month, day, 8, 59, 59);
    } else if (h >= 9 && h < 12) {
        endDate = new Date(year, month, day, 11, 59, 59);
    } else if (h >= 12 && h < 18) {
        endDate = new Date(year, month, day, 17, 59, 59);
    } else if (h >= 18 && h < 21) {
        endDate = new Date(year, month, day, 20, 59, 59);
    } else {
        endDate = new Date(year, month, day, 23, 59, 59);
    }
    var leftsecond = parseInt((endDate.getTime() - now.getTime()) / 1000);
    var hour = Math.floor(leftsecond / 3600);
    var minute = Math.floor((leftsecond - hour * 3600) / 60);
    var second = Math.floor(leftsecond - hour * 3600 - minute * 60);

    document.getElementById(‘txt‘).innerHTML = "距离此时段结束还有:" + hour + "小时" + minute + "分" + second + "秒";
    countDowntimer = setTimeout(function() {
        ShowCountDown();
    }, 1000);
}
ShowCountDown();

----------------------------第二部分-------------------------------

上面只是简单的测试看看的,真实要熊服务器获取时间,这样才能保证不必要的错误,稍微改写一下

function ShowCountDown(ele, startTime, endTime) {
        var startTimeArr = startTime.split(":");
        var endTimeArr = endTime.split(":");
        var startH = +startTimeArr[0],
            startM = +startTimeArr[1],
            startS = +startTimeArr[2],
            startDate = new Date(2017, 03, 10, startH, startM, startS).getTime(),
            endH = +endTimeArr[0],
            endM = +endTimeArr[1],
            endS = +endTimeArr[2],
            endDate = new Date(2017, 03, 10, endH, endM, endS).getTime(),
            leftsecond = (endDate - startDate) / 1000;
        var st = setInterval(function() {
            leftsecond -= 1;
            if (leftsecond == 0) { clearInterval(st); }
            getEndTime(leftsecond,ele);
        }, 1000);

    }function getEndTime(arg, ele) {
        hour = Math.floor(arg / 3600),
        minute = Math.floor((arg - hour * 3600) / 60),
        second = Math.floor(arg - hour * 3600 - minute * 60);
        document.getElementById(ele).innerHTML = hour + "小时" + minute + "分" + second + "秒";
 }//参数一:dom元素; 参数二:用户访问页面服务器传回的时间; 参数三:服务器设置的各阶段截止时间。// 如:startTime = ‘10:23:45‘; endTime = ‘11:59:59‘
ShowCountDown(‘countdown‘, startTime, endTime);

  

时间: 2024-10-13 01:01:23

设置一天中不同时段的倒计时的相关文章

route-显示并设置Linux内核中的网络路由表

route命令 网络配置 route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 语法 route(选项)(参数) 选项 -A:设置地址类型: -C:打印将Linux核心的路由缓存: -v:详细信息模式: -n:不执行DNS反向查找,直接显示数字形式的IP地址: -e:netstat格式显示路由表: -net:到一个网络的路由表: -host:到一个主机的路

用Okhttp框架登录之后的Cookie设置到webView中(转)

用Okhttp框架登录之后的Cookie设置到webView中(正文) 1.webview中设置: [java] view plain copy @SuppressWarnings("deprecation") public void synCookies(Context context, String url) { CookieSyncManager.createInstance(context); CookieManager cookieManager = CookieManage

vi常用命令与设置(不断修改中)

注:前缀':'表示vim命令(命令模式),前缀'$'表示为shell命令,表示Ctrl + W,表示Ctrl + Shift+ 6,无前缀者均为普通模式下的键盘按键.基本的插入与修改:        a       光标下一个字符处插入:        i       在当前光标处插入:        A       行尾插入:        o       在光标下新建一行插入:        r       键入替换一个字符:        R       键入替换所有字符:        

苹果开发——设置iTunes Connect中的Contracts, Tax, and Banking

原地址:http://zengwu3915.blog.163.com/blog/static/2783489720137485857701?suggestedreading 如果要在苹果商城发布收费应用或在苹果应用中使用内购收费,首先需要设置你的iTunes Connect的Contracts, Tax, and Banking. 首先打开https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa 登录到iTunes Connect

设置VMware Player中的虚拟机和宿主机共享文件

设置VMware Player中的虚拟机和宿主机共享文件 试验环境: 虚拟机软件:VMware Player 6.0.3 宿主机os:windows7 虚拟机os:centos6.6(32位) 完成此任务的前提是要在虚拟机操作系统中安装vmware-tools,vmware-tools中有一个模块叫host-guest-file-system,通过这个hgfs可以实现在宿主机windows和虚拟机linux之间的文件共享. 首先,安装VMware-Tools 第一步,在虚拟机开机的时候,点击[p

#在FLAT模式下,需要设置flat子网,VM的IP从这个设置的子网中抓取,这时flat_injected需要设置为True,系统才能自动获得IP,如果flat

#在FLAT模式下,需要设置flat子网,VM的IP从这个设置的子网中抓取,这时flat_injected需要设置为True,系统才能自动获得IP,如果flat子网和主机网络是同一网络,网络管理员要注意手动配置主机IP,以免IP冲突. #在FLATDHCP模式下,系统将通过自己的服务为VM分配IP,这时不要将flat_injected设置为True,同时设置flat_network_dhcp_start以防止IP冲突,我想这个参数应该是区别主机IP和VM的IP的. 注: 可以使用下列方法来控制I

使用javax.script包实现Java设置JS脚本中的变量

下面例子中,我们通过javax.script包ScriptEngine.put()方法设置JS脚本中的变量,JS把所有在线用户输出. package ajava.code.javase; import javax.script.ScriptEngineManager; import javax.script.ScriptEngine; import javax.script.ScriptException; import java.util.Date; public class AjavaAcc

spinner 设置文本框中的字体颜色

onItemSelected(AdapterView parent, View v, int position, long id) { TextView v1 = (TextView)v; v1.setTextColor(Color.WHITE); //可以随意设置自己要的颜色值 } 本文转自:http://bbs.csdn.net/topics/350049938 spinner 设置文本框中的字体颜色

【转】如何使用代码动态设置水晶报表中的文本,字段等对象呢?

http://www.cnblogs.com/star250/archive/2008/12/22/1359810.html 如何使用代码动态设置水晶报表中的文本,字段等对象呢? //VB 首先,你必须要声明一个OBJECT变量(eg. TextObject, FieldObject, ......),当然不是一般的对象,而是:    Dim xObject As CrystalDecisions.CrystalReports.Engine.FieldObject(字段)    Dim xObj