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

<!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. nyoj_176_整数划分（二）_201404261715

    整数划分(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 把一个正整数m分成n个正整数的和,有多少种分法? 例:把5分成3个正正数的和,有两种分法: 1 1 3 ...

  2. Redis持久化方式--RDB和AOF

    转载于:https://www.cnblogs.com/xingzc/p/5988080.html Redis提供了RDB持久化和AOF持久化 RDB机制的优势和略施 RDB持久化是指在指定的时间间隔 ...

  3. 洛谷 P1166 打保龄球

    P1166 打保龄球 题目描述 打保龄球是用一个滚球去打击十个站立的柱,将柱击倒.一局分十轮,每轮可滚球一次或多次,以击倒的柱数为依据计分.一局得分为十轮得分之和,而每轮的得分不仅与本轮滚球情况有关, ...

  4. JDBC实例代码

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/sample-code.html: 前提: 1.在MySQL中创建数据表和增加模拟数据: DROP TA ...

  5. Spring Boot为我们准备了最佳的数据库连接池方案，只需要在属性文件（例如application.properties）中配置需要的连接池参数即可。

    Spring Boot为我们准备了最佳的数据库连接池方案,只需要在属性文件(例如application.properties)中配置需要的连接池参数即可.

  6. mysql的时间戳说白了就俩问题，自动更新问题和不自动更新问题

    mysql的时间戳timestamp说白了就俩问题,自动更新问题和不自动更新问题

  7. 基于cocos2d-x-3.2学习Box2D（一）

    cocos版本号:cocos2d-x-3.2 环境:Win7+VS2013 因为一些太底层的实现我如今的能力学习不到,仅仅能做一些简单的笔记,供以后翻阅.假设别人可以得到帮助,莫大的荣幸. 一.创建世 ...

  8. mybatis中批量插入数据

    <insert id="insertIntoDevAct" parameterType="java.util.List"><foreach c ...

  9. C语言之基本算法25—牛顿迭代法求方程近似根

    //牛顿迭代法! /* ============================================================ 题目:用牛顿迭代法求解3*x*x*x-2*x*x-16 ...

  10. Nginx + FastCgi + Spawn-fcgi + C 架构的server环境搭建

    1.Nginx 1.1.安装 Nginx 的中文维基 http://wiki.codemongers.com/NginxChs 下载 Nginx 0.6.26(开发版)(请下载最新版本号) tar z ...