• jq实现竞拍倒计时


    1jq的效果代码

    //全局变量用于存储当前时间
    var nows;
    
    function rightZeroStr(v) {
        if (v < 10) {
            return "0" + v;
        }
        return v + "";
    }
    //计时  每10秒中为当前时间+10
    setInterval(function () {
        nows =parseInt(nows) + 10;
    }, 10);
    //ajax.post 向服务器请求得到当前的服务器时间
    function syncTime() {
        var url = "Handler/Seckil.ashx?t=" + new Date().getTime();
        $.post(url, { action: "now" }, function (response) {
            nows = response.nows || new Date().getTime();
        });
    }
    //倒计时  参数arg存放倒计时的标签名称 id 或者class
    function lxfEndtime(arg) {
        $(arg).each(function () {
            var lxfday = $(this).attr("lxfday"); //用来判断是否显示天数的变量
            var endtime = new Date($(this).attr("endtime")).getTime(); //取结束日期(毫秒值)
            var nowtime = nows;        //今天的日期(毫秒值)
            var starttime = new Date($(this).attr("starttime")).getTime();
             //开始时间和当时时间作比较 判断是开始 技术还是正在进行中
            if (starttime >= nowtime) {
                $(this).html("活动即将开始")
            }
            if (endtime <= nowtime) {
                $(this).html("活动已经结束"); //如果结束日期小于当前日期就提示过期啦
            }
            if (starttime < nowtime && endtime > nowtime) {
                var youtime = endtime - nowtime; //还有多久(毫秒值)
                var seconds = youtime / 1000;
                var minutes = Math.floor(seconds / 60);
                var hours = Math.floor(minutes / 60);
                var days = Math.floor(hours / 24);
                var CDay = days;
                var CHour = CDay * 12 + hours % 24;
                var CMinute = minutes % 60;
                var CSecond = Math.floor(seconds % 60); //"%"是取余运算,可以理解为60进一后取余数,然后只要余数。
    
    
                if ($(this).attr("lxfday") == "no") {
                    $(this).html('<span class="countdown" millseconds="1188163453"> <strong class="tcd-h">' + CHour + '</strong>时<strong class="tcd-m">' + CMinute + '</strong>分 <strong class="tcd-s">' + CSecond + '</strong>秒 </span>');          //输出没有天数的数据
                } else {
                    $(this).html('<span class="countdown" millseconds="1188163453"><strong class="tcd-d">' + days + '</strong><b>天</b> <strong class="tcd-h">' + CHour + '</strong> <i>:</i> <strong class="tcd-m">' + CMinute + '</strong><i>:</i> <strong class="tcd-s">' + CSecond + '</strong> </span>');          //输出有天数的数据
                }
            }
        });
        setTimeout("lxfEndtime('" + arg + "')", 1000);
    };

    2用到的handler

    <%@ WebHandler Language="C#" Class="Seckil" %>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Text;
    using System.Data;
    public class Seckil : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            string action = context.Request["action"];
            switch (action)
            {case "now":
                    now(context);
                    return;
    
            }
            context.Response.Write("Hello World");
        }public void now(HttpContext context)
        {
            Int64 retval = 0;
            DateTime st = new DateTime(1970, 1, 1);
            TimeSpan t = (DateTime.Now.ToUniversalTime() - st);
            retval = (Int64)(t.TotalMilliseconds + 0.5);
            context.Response.Write("{"nows":"" + retval + ""}");
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    
    }

    3前台页面代码

    <html>
    <script src="js/time.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { syncTime(); lxfEndtime(".box font"); }); </script>
    <body>
    <font color="#FF0000" endtime="' + dataitem.EndDate + '" starttime="' + dataitem.StartDate + '" lxfday="no"></font>
    </body>
    </html>
  • 相关阅读:
    javascript学习笔记-数据类型
    chrome console.log API
    Mysql下SELECT的结果集作为UPDATE的WHERE条件时的SQL语法
    Ajax、Comet、Websocket、SSE
    Model View Controller(MVC) in PHP
    区别Transform、Transition、Animation
    WAI-ARIA无障碍网页应用属性完全展示
    理解 PHP output buffer
    清除Jquery动画的队列
    git常用命令
  • 原文地址:https://www.cnblogs.com/liuchang/p/4342093.html
Copyright © 2020-2023  润新知