电子站牌项目知识点汇总

电子站牌项目知识点汇总

1.时间修改格式以及渲染

//时间
function mytime() {
    var date = new Date();
    var rt = formatDate(date, 'yyyy年MM月dd日 hh:mm:ss')
    document.getElementById("time1").innerHTML = rt;
}

/**
格式化时间显示方式、用法:format="yyyy-MM-dd hh:mm:ss";
*/
function formatDate(v, format) {
    if (!v) return "";
    var d = v;
    if (typeof v === 'string') {
        if (v.indexOf("/Date(") > -1)
            d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));
        else
            d = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));//.split(".")[0] 用来处理出现毫秒的情况，截取掉.xxx，否则会出错
    }
    var o = {
        "M+": d.getMonth() + 1,  //month
        "d+": d.getDate(),       //day
        "h+": d.getHours(),      //hour
        "m+": d.getMinutes(),    //minute
        "s+": d.getSeconds(),    //second
        "q+": Math.floor((d.getMonth() + 3) / 3),  //quarter
        "S": d.getMilliseconds() //millisecond
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (d.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;
};

2.接入后端数据

先理理同步和异步的概念和区别

同步：同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

异步：异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

通俗一点来说就是：ajax同步的话，则要等这个ajax请求有了返回值才会继续执行下面的代码。
异步则这个AJAX代码运行中的时候其他代码一样可以运行。

刚开始用的是异步加载，渲染页面的函数执行时无数据，每次都要刷新一次页面才能正常显示，异步加载这边好多搞不懂，最后没办法就改成同步加载，还有返回值这边也纠结了好久，不知道怎么返回，最后查阅资料让它先存下来，再返回给函数。

function reload2() {
    var station;
    var parm = { action: 'statios', strkey1: 'GetLineInfoBySite', strkey2: strA };
    $.ajaxSettings.async = false;
    $.get("ashx/BusDataHandler.ashx", parm, function (databus) {
        window.sessionStorage.setItem("test", JSON.stringify(databus));  //保存数据
    }, "json");
    station = JSON.parse(window.sessionStorage.getItem("test"));  //读取数据
    return station;
};

（1）一般Jquery默认为异步加载，

$.ajaxSettings.async = false;  //这段代码是将异步改成同步

（2）Window sessionStorage 属性

保存数据语法：

sessionStorage.setItem("key", "value");

读取数据语法：

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();

3.自动翻页函数

function initBusLine() {
    var busSite = reload1();
    var busLine = reload2();
    //判断busLine是否为空
    if (!!busLine) {
        pages = Math.ceil(busLine.length / 4);
        pageContent = [];
        $.each(busLine, function (i, val) {
            var html = "";
            var line = val;
            var LineID = line.LineID;
            var bus_num = 0;
            var bus_html = '<div class="text3">';
            for (var i in busSite.LineList) {
                if (!!busSite.LineList[i] && busSite.LineList[i].LineID == LineID) {
                    bus_num = busSite.LineList[i].m_NearCarList.length;
                    if (bus_num == 0) {
                        bus_html += '<div>无营运车辆</div>';
                    } else {
                        bus_html += '<div>' + (busSite.LineList[i].m_NearCarList[0].Site_Time == "0分" ? ' <font color="red">即将到站 </font>' : "距离本站:" + busSite.LineList[i].m_NearCarList[0].Site_Time) + '</div>';
                    }
                    break
                }
            }
            bus_html += '</div>';
            bus_hm = '<div class="li-center"></div><div class="li-bottom">';
            $.each(line.SiteList, function (t, bus) {
                bus_hm += '<span>' + (bus.SiteName == strC ? ' <font color="red">' + bus.SiteName + '</font>' : bus.SiteName) + '</span>';
            });
            bus_hm += '</div>';
            html += '<div class="li-top"><div class="text1"><span class="run">' + (line.LineName == null ? 'X' : line.LineName + "路") + '</span><img class="imgage" src="image/zhi.png"><img class="imgage" src="image/wei.png"><img class="imgage" src="image/ka.png"><p class="time">' + line.strRunTime + '</p></div><div class="text2">' + (line.EndStation +"方向")+'</div>';
            html += bus_html;
            html += '</div>';
            html += bus_hm;
            pageContent[i] = '<li>' + html + '</li>';
        });
        shuaping(); //自动翻页函数
    }
}

//自动翻页函数（每次四个）
var pages = 0;
var pages_number = 0;
var pageContent = [];
function shuaping() {
    $("#lines").empty();
    for (var s = pages_number * 4; s < (pages_number * 4 + 4); s++) {
        if (s < pageContent.length) {
            $("#lines").append(pageContent[s]);
        }
    }
    console.log("pages"+pages +"pages_number"+pages_number);
    if (pages_number < pages - 1) {
        pages_number++;
    } else {
        pages_number = 0;
    }
};

注意：自动翻页函数是套在上面函数的，所以在执行时，只需执行上面的函数就行，下面翻页函数会跟着执行。还有同时传入两个接口的数据放在一个div里面的，需要字符串拼接。

4.定时刷新

setInterval('函数名()', 时间);

总结就这么多吧，感觉自己太菜了，如果有大神看见里面可以优化的或者改的，可以在评论下方讲讲，让我借鉴借鉴！！