问题场景：假设某个活动截止时间给定了，现在需要开发一个页面可以自动刷新距离活动截止时间还剩多少天？

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <!--<meta http-equiv="refresh" content="2">-->

    <title></title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

    $(function(){

        //参考：可以通过跨域方式获取其他服务器的当前时间作为服务器当前时间

        var oCity="北京"; //设置城市

        $.ajax({

            type:"GET", //默认是GET

            url:"http://api.map.baidu.com/telematics/v3/weather?location=" + oCity + "&output=json&ak=ohA7QHfg0BBrpiY4kyuIAAsD",

            dataType:"jsonp",

            success:function(data){

              //alert(data.date);

            },

            error:function(jqXHR){

              //alert("信息错误" + jqXHR.status);

            }

        })

    })

    </script>

</head>

<body id="bodyId" onload="setTimer()">

    <div>

        <table>

            <tr>

                <td width="120px;"><label title="系统当前时间">系统当前时间：</label></td>

                <td><input id="start" /></td>

            </tr>

            <tr>

                <td width="120px;"><label title="活动截止时间">活动截止时间：</label></td>

                <td><input id="end" disabled="disabled" value="2018-01-01 00:00:00" /></td>

            </tr>

            <tr>

                <td colspan="2"><p id="p"></p></td>

            </tr>

        </table>

    </div>

    <script>

    //时间为一位数时显示格式为："0X"

    function checkTime(i) {

        if (i < 10) {

            i = "0" + i;

        }

        return i;

    }

    //显示浏览器现在的时间

    function formatTime(timeVal) {

        var datePara = new Date(timeVal);//定义日期对象

        var yyyy = datePara.getFullYear();//通过日期对象的getFullYear()方法返回年

        var MM = datePara.getMonth() + 1;//通过日期对象的getMonth()方法返回月

        var dd = datePara.getDate();//通过日期对象的getDate()方法返回日

        var hh = datePara.getHours();//通过日期对象的getHours方法返回时

        var mm = datePara.getMinutes();//通过日期对象的getMinutes方法返回分

        var ss = datePara.getSeconds();//通过日期对象的getSeconds方法返回秒

        // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09

        MM = checkTime(MM);

        dd = checkTime(dd);

        hh = checkTime(hh);

        mm = checkTime(mm);

        ss = checkTime(ss);

        //用于保存星期（getDay()方法得到星期编号）

        var day;

        if (datePara.getDay() == 0) day = "星期日 "

        if (datePara.getDay() == 1) day = "星期一 "

        if (datePara.getDay() == 2) day = "星期二 "

        if (datePara.getDay() == 3) day = "星期三 "

        if (datePara.getDay() == 4) day = "星期四 "

        if (datePara.getDay() == 5) day = "星期五 "

        if (datePara.getDay() == 6) day = "星期六 "

        //document.getElementById('start').value = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + day;

        //setTimeout('formatTime()', 1000);//每一秒中重新加载formatTime()方法

        return yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss; //+ " " + day;

    }

    //服务器现在的时间（这里只是测试，就用浏览器时间代替）

    var startTime = '';

    //活动截止时间endTime（以服务器时间为标准，即给定的时间）

    var end = '';

    var endTime = '';

    //活动截止时间（以浏览器时间为标准）

    var browserEndTime = '';

    //距离活动结束还剩余的时间（以浏览器为标准）

    var plus = '';

    //倒计时

    function setTimer() {

        if (!plus) {

            //服务器现在的时间（这里只是测试，就用浏览器时间代替）

            startTime = new Date();

            $("#start").val(formatTime(startTime));

            //活动截止时间endTime（预先给定的值）

            end = document.getElementById("end").value;

            endTime = new Date(end);

            //活动截止时间与当前时间的时间差

            plus = endTime - startTime;

        }

        else {

            //距离活动结束还剩余的时间，第二次以后就不需要再计算，直接自减即可

            plus -= 1000;

            //更新当前时间(getTime()获取时间转化成毫秒后的数值)

            startTime = new Date(startTime.getTime() + 1000);

            $("#start").val(formatTime(startTime));

        }

        var day = parseInt(plus / 1000 / 60 / 60 / 24);

        var hour = parseInt(plus / 1000 / 60 / 60) - day * 24;

        var minute = parseInt(plus / 1000 / 60) - parseInt(plus / 1000 / 60 / 60) * 60;

        var second = parseInt(plus / 1000) - parseInt(plus / 1000 / 60) * 60;

        // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09

        day = checkTime(day);

        hour = checkTime(hour);

        minute = checkTime(minute);

        second = checkTime(second);

        document.getElementById("p").innerHTML = "距离活动截止，还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";

        if (plus <= 1) {

            clearInterval(id);

        }

    }

    //每秒循环一次，刷新活动截止时间与当前时间的时间差

    var id = setInterval(setTimer, 1000);

    </script>

</body>

</html>

注意：实际应用时，当前系统当前时间应该从服务器取（因为客户端时间可以随意被修改），然后依次减少！

如可以用C#和webservice实现从返回服务器时间的功能：

using System;

using System.Web;

namespace WebApplication

{

    /// <summary>

    /// Handler 的摘要说明

    /// </summary>

    public class Handler : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write(DateTime.Now);

        }

    }

}

运行效果：

获取时间的免费API：

http://cgi.im.qq.com/cgi-bin/cgi_svrtime

http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp

参考：

Ajax调取百度天气API：http://www.chijianfeng.com/web/Jquery/144.html

利用gihub搭建免费主页：http://blog.csdn.net/hitwhylz/article/details/42646197

外服页面参考：http://www.chinavisa.org.cn/chinavisaremind

附：JavaScript 格式化日期参考：

<!DOCTYPE html>

<html>

<head></head>

<body>

<div data-icon-lin="dicon" id = "tt">

    <span>日期格式：</span>

    <input id="timeVal" value =""  placeholder="yyyy-MM-dd hh:mm:ss" class="i1" /><br/>

    <span>格式化后：</span>

    <input id="formatVal" value = "" class="i1" />

</div>

<div data-pic="picon">

    <input type="button" value="格式化" onclick="textTime()" />

</div>

<script type="text/javascript">

//时间格式化

Date.prototype.format = function (format) {

    /*

    * eg:format="yyyy-MM-dd hh:mm:ss";

    */

    if (!format) {

        format = "yyyy-MM-dd hh:mm:ss";

    }

    var o = {

        "M+": this.getMonth() + 1, // month

        "d+": this.getDate(), // day

        "h+": this.getHours(), // hour

        "m+": this.getMinutes(), // minute

        "s+": this.getSeconds(), // second

        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter

        "S": this.getMilliseconds()

        // millisecond

    };

    if (/(y+)/.test(format)) {

        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    }

    for (var k in o) {

        if (new RegExp("(" + k + ")").test(format)) {

            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));

        }

    }

    return format;

};

function textTime(){

    var valTime = document.getElementById("timeVal");

    var dt = new Date();

    var formatVal = document.getElementById("formatVal");

    formatVal.value = dt.format(valTime.value);

}

</script>

</body>

</html>

页面输出：

附加：

jQuery 实现：根据 Url 路由信息给当前菜单添加选中样式

注意：如果url被重写或被隐藏就无法读取到正确到页面地址信息，此方法就无效

$(function () {

    var url = window.location;

    var element = $('ul.sub-menu a').filter(function () {

        return this.href == url || url.href.indexOf(this.href) == 0;

    }).parent().addClass('active').parent().parent();

    if (element.is('li')) {

        element.addClass('active');

        element.siblings('li.start').removeClass('active');

    }

});

用 jQuery 实现简单倒计时功能的更多相关文章

  1. jquery实现简单抽奖功能

    一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:

  2. 使用javaScript实现简单倒计时功能

    效果如下: <div class="warp"> <p id="txt">距离”十一“国庆放假还有:</p><br&g ...

  3. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  4. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  5. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  6. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  7. jQuery实现简单前端搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  9. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

随机推荐

  1. Redis事务【十二】

    一.概述: 和众多其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中,MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基石.相信对有关系型数据 ...

  2. codevs——1742 爬楼梯

    1742 爬楼梯  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的 ...

  3. Kettle循环删除数据

    1.问题描述: 某个系统原库的数据同步到备份库.但是由于原库的的数据会物理删除,此时需要删除备份库的数据. 2.不理想的解决1: 1)首先从备份库获取该表的所有ID: 2)循环备份库的ID,去原库检测 ...

  4. 程序员之---C语言细节18（一些奇怪表达式）

    主要内容:一些奇怪表达式 #include <stdio.h> #define N 10 int main() { int a = 1; int *q = &a; int p = ...

  5. [React] Use Prop Collections with Render Props

    Sometimes you have common use cases that require common props to be applied to certain elements. You ...

  6. hdu oj 1285 确定比赛名次

    hdu oj 1285 确定比赛名次 题目: 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  7. C#高级编程五十二天----有序列表

    有序列表 假设须要基于对全部集合排序,就能够使用SortedList<TKey,TValue>类.这个类依照键给元素排序.这个集合中的值和键都能够使用随意类型. 以下的样例创建了一个有序列 ...

  8. jmeter获取时间_time 函数

    原始时间戳13位精确到毫秒:${__time(,)} 时间戳精确到秒10位:${__time(/1000,)} 时间日期到年月日2019-04-21:${__time(yyyy-MM-dd,)} 时间 ...

  9. please get a license from www.texturepacker.com

    我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...

  10. Rational 最新软件试用下载地址

    看到非常多 TX 都在问老版本号 Raitonal 软件相关的问题,可是因为产品升级的时候有非常多名字都发生了更改(比方说 Rational Rose 最新的版本号变成了 Rational Softw ...