javascript - 如何从 sql server 数据库创建倒计时日期和时间？

Question

这是我第一次在 javascript 中使用倒计时，所以我对这个主题进行了一些研究，发现了一些有趣的链接：“how to countdown to a date”和“https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/”，但我的问题是我是否想获取数据和数据库中的时间，我该怎么做？例如：我有一个带有 ID、事件、开始日期、开始时间和结束时间的表事件。我该如何改变：“var end = new Date('02/19/2012 10:1 AM');”从第一个链接或此：“自动安排时钟”从第二个到倒计时时间，直到具有最近时间和日期的事件，依此类推。请记住，我完全是个菜鸟，所以请多多包涵。抱歉有任何拼写错误。谢谢！

更新：

这是控制器部分：[HttpGet] public JsonResult GetEvent(int Id) { BOL1.IMS2Entities db = new BOL1.IMS2Entities(); var ev = from e in db.tbl_Event where e.ID == Id select e; //return Json(ev.FirstOrDefault(), JsonRequestBehavior.AllowGet); return Json(Id, JsonRequestBehavior.AllowGet); }
这是脚本部分：

<script>
    function GetEvent() {
        debugger;
        $.ajax({
            type: "GET",
            url: "Home/GetEvent",
            data: { Id: ID },
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                debugger;
                alert(result)
            },
            error: function (response) {
                debugger;
                alert('error');
            }
        });
    }

    var tbl_Event.StartDate = 'yyyy-MM-dd hh:hh:hh';
    //var ServerDate_Time = '2017-02-17 10:45:00';
    //console.log(CompareDateTime(ServerDate_Time));
    console.log(CompareDateTime(tbl_Event.StartDate + tbl_Event.StartTime))

    //function CompareDateTime (ServerDateTime){
    function CompareDateTime (tbl_Event.StartDate + tbl_Event.StartTime){
        var dateString = new Date();
        var currentTime = new Date(parseInt(dateString));
        var month = ('0' + (currentTime.getMonth() + 1)).slice(-2)
        var day = ('0' + (currentTime.getDate())).slice(-2)
        var year = currentTime.getFullYear();
        var hours = ('0' + (currentTime.getHours())).slice(-2)
        var min = ('0' + (currentTime.getMinutes())).slice(-2)
        var sec = ('0' + (currentTime.getSeconds())).slice(-2)
        var date = year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + sec;

        if(ServerDateTime == date){
            return true;
        }else {
            return false;
        }

    }
    }
</script>

Answer 1

假设您的日期时间是 int tbl_Event.StartDate + tbl_Event.StartTime = 2017-02-17 10:45:00

这适合你的..

var ServerDate_Time = '2017-02-17 10:45:00';
console.log(CompareDateTime(ServerDate_Time));

function CompareDateTime (ServerDateTime){
    var dateString = new Date();
    var currentTime = new Date(parseInt(dateString));
    var month = ('0' + (currentTime.getMonth() + 1)).slice(-2)
    var day = ('0' + (currentTime.getDate())).slice(-2)
    var year = currentTime.getFullYear();
    var hours = ('0' + (currentTime.getHours())).slice(-2)
    var min = ('0' + (currentTime.getMinutes())).slice(-2)
    var sec = ('0' + (currentTime.getSeconds())).slice(-2)
    var date = year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + sec;

    if(ServerDateTime == date){
        return true;
    }else {
        return false;
    }

}

希望这会有所帮助....

编辑后编辑 ....

更新代码...

对于控制器 --

[HttpGet]
        public JsonResult GetEvent(int id)
        {
            using (IMS2Entities ObjEntities = new IMS2Entities())
            {
                var ev = from e in ObjEntities.tblEvents
                         where e.id == id
                         select e;
                return Json(ev.ToList(), JsonRequestBehavior.AllowGet);
            }
        }

JavaScript 代码

<script>

    $(function () {
        GetEvent(); // this will call GetEvent function once your DOM is ready, you can call this function on button click or anywhere as per your need.

        function GetEvent() {
            $.ajax({
                type: "GET",
                url: "/Home/GetEvent",
                data: { Id: '1' },  // '1' is id for my sql database record which is passing to controller to bring back record from server.
                success: function (result) {

                    // result will be collection of list return form server, since you are using id criteria it will always have only 1 record unless you have id as foreign key or something not primary/unique.

                    // I'm using only first instance of result for demo purpose, you can modify this as per your need.

                    alert(CompareDateTime(result[0].StartDateTime.substr(6))); // this will alert your true or false, as per I guess this will always return false, as your current date time will never match sql datetime. Still for your requirement.
                },
                error: function (response) {
                    alert(response);
                }
            });
        }


        function CompareDateTime (ServerDateTimeFormat){
            // Convert ServerDateTimeFormat for Comparision
            var ServerdateString = ServerDateTimeFormat;
            var ServerCurrentTime = new Date(parseInt(ServerdateString));
            var Servermonth = ('0' + (ServerCurrentTime.getMonth() + 1)).slice(-2)
            var Serverday = ('0' + (ServerCurrentTime.getDate())).slice(-2)
            var Serveryear = ServerCurrentTime.getFullYear();
            var Serverhours = ('0' + (ServerCurrentTime.getHours())).slice(-2)
            var Servermin = ('0' + (ServerCurrentTime.getMinutes())).slice(-2)
            var Serversec = ('0' + (ServerCurrentTime.getSeconds())).slice(-2)
            var Serverdate = Serveryear + "-" + Servermonth + "-" + Serverday + " " + Serverhours + ":" + Servermin + ":" + Serversec;

            // Current Date Time for Comparision
            var currentTime = new Date();
            var month = ('0' + (currentTime.getMonth() + 1)).slice(-2)
            var day = ('0' + (currentTime.getDate())).slice(-2)
            var year = currentTime.getFullYear();
            var hours = ('0' + (currentTime.getHours())).slice(-2)
            var min = ('0' + (currentTime.getMinutes())).slice(-2)
            var sec = ('0' + (currentTime.getSeconds())).slice(-2)
            var date = year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + sec;

            if (date == Serverdate) {
                return true;
            }else {
                return false;
            }
        }
    });
    </script>

请确保在 ... 标签之前放置 JQuery 的引用。

这是一个完整的例子.. :)