data.chinahighlights.com/js/train-mobile/train.js

/* flatpickr v4.6.9,, @license MIT */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).flatpickr=t()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var a=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],r=0,l=o.length;r<l;r++,i++)a[i]=o[r];return a}var n=["onChange","onClose","onDayCreate","onDestroy","onKeyDown","onMonthChange","onOpen","onParseConfig","onReady","onValueUpdate","onYearChange","onPreCalendarPosition"],a={_disable:[],allowInput:!1,allowInvalidPreload:!1,altFormat:"F j, Y",altInput:!1,altInputClass:"form-control input",animate:"object"==typeof window&&-1===window.navigator.userAgent.indexOf("MSIE"),ariaDateFormat:"F j, Y",autoFillDefaultTime:!0,clickOpens:!0,closeOnSelect:!0,conjunction:", ",dateFormat:"Y-m-d",defaultHour:12,defaultMinute:0,defaultSeconds:0,disable:[],disableMobile:!1,enableSeconds:!1,enableTime:!1,errorHandler:function(e){return"undefined"!=typeof console&&console.warn(e)},getWeek:function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var n=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-n.getTime())/864e5-3+(n.getDay()+6)%7)/7)},hourIncrement:1,ignoredFocusElements:[],inline:!1,locale:"default",minuteIncrement:5,mode:"single",monthSelectorType:"dropdown",nextArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",noCalendar:!1,now:new Date,onChange:[],onClose:[],onDayCreate:[],onDestroy:[],onKeyDown:[],onMonthChange:[],onOpen:[],onParseConfig:[],onReady:[],onValueUpdate:[],onYearChange:[],onPreCalendarPosition:[],plugins:[],position:"auto",positionElement:void 0,prevArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",shorthandCurrentMonth:!1,showMonths:1,static:!1,time_24hr:!1,weekNumbers:!1,wrap:!1},i={weekdays:{shorthand:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],longhand:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},months:{shorthand:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],longhand:["January","February","March","April","May","June","July","August","September","October","November","December"]},daysInMonth:[31,28,31,30,31,30,31,31,30,31,30,31],firstDayOfWeek:0,ordinal:function(e){var t=e%100;if(t>3&&t<21)return"th";switch(t%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}},rangeSeparator:" to ",weekAbbreviation:"Wk",scrollTitle:"Scroll to increment",toggleTitle:"Click to toggle",amPM:["AM","PM"],yearAriaLabel:"Year",monthAriaLabel:"Month",hourAriaLabel:"Hour",minuteAriaLabel:"Minute",time_24hr:!1},o=function(e,t){return void 0===t&&(t=2),("000"+e).slice(-1*t)},r=function(e){return!0===e?1:0};function l(e,t){var n;return function(){var a=this;clearTimeout(n),n=setTimeout((function(){return e.apply(a,arguments)}),t)}}var c=function(e){return e instanceof Array?e:[e]};function d(e,t,n){if(!0===n)return e.classList.add(t);e.classList.remove(t)}function s(e,t,n){var a=window.document.createElement(e);return t=t||"",n=n||"",a.className=t,void 0!==n&&(a.textContent=n),a}function u(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function f(e,t){return t(e)?e:e.parentNode?f(e.parentNode,t):void 0}function m(e,t){var n=s("div","numInputWrapper"),a=s("input","numInput "+e),i=s("span","arrowUp"),o=s("span","arrowDown");if(-1===navigator.userAgent.indexOf("MSIE 9.0")?a.type="number":(a.type="text",a.pattern="\\d
/** unfetch */
self.fetch||(self.fetch=function(e,n){return n=n||{},new Promise(function(t,s){var r=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(r.status/100|0),statusText:r.statusText,status:r.status,url:r.responseURL,text:function(){return Promise.resolve(r.responseText)},json:function(){return Promise.resolve(JSON.parse(r.responseText))},blob:function(){return Promise.resolve(new Blob([r.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var c in r.open(n.method||"get",e,!0),r.onload=function(){r.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t}),t(a())},r.onerror=s,r.withCredentials="include"==n.credentials,n.headers)r.setRequestHeader(c,n.headers[c]);r.send(n.body||null)})});
/** ------------CH火车信息详细页配套js--------------*/
function ready(fn) {
    if (document.addEventListener) {
        //标准浏览器
        document.addEventListener(
            "DOMContentLoaded",
            function () {
                //注销事件，避免反复触发
                document.removeEventListener(
                    "DOMContentLoaded",
                    arguments.callee,
                    false
                );
                //执行函数
                fn();
            },
            false
        );
    } else if (document.attachEvent) {
        //IE浏览器
        document.attachEvent("onreadystatechange", function () {
            if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                //执行函数
                fn();
            }
        });
    }
}

ready(function () {

    let searchbox = document.getElementById('searchbox');
    if (searchbox){
        window.TrainFrom={w:searchbox.offsetWidth,h:searchbox.offsetHeight,l:searchbox.offsetLeft,t:searchbox.offsetTop}; //搜索框的大小
    }  

    //国内火车站数据
    window.stationArr = new Array();
    if (typeof StationInfo == "string") {
        var station_names_Arr_tmp = StationInfo.split("@");
        for (var i = 0; i < station_names_Arr_tmp.length; i++) {
            var tmp = station_names_Arr_tmp[i].split("|");
            //station_names_Arr.push(tmp);
            stationArr.push(Array(tmp[1], tmp[2], tmp[3], tmp[4], tmp[5])); //code,name,cnName,group,province
        }
    }
    

    //搜索框智能补全
    if (typeof autocomplete == "function") {
        autocomplete(document.getElementById("Txt_FZ_1"), stationArr);
        autocomplete(document.getElementById("Txt_DZ_1"), stationArr);
    }

    //日历
    let stationDate_1 = document.getElementById('stationDate_1');
    if (stationDate_1){
        initDatepicker(stationDate_1);
    }
    let stationDate_IT_1 = document.getElementById('stationDate_IT_1');
    if (stationDate_IT_1){
        initDatepicker(stationDate_IT_1);
    }

    //切换
    let navtraintop = document.getElementById("navtraintop");
    if (navtraintop) {
        let navli = navtraintop.querySelectorAll("li");
        let searchbox = document.getElementById("searchbox");
        let navbox = searchbox.querySelectorAll(".jsbox");
        for (let i = 0; i < navli.length; i++) {
            navli[i].index = i;
            navli[i].onclick = function () {
                for (let j = 0; j < navli.length; j++) {
                    navli[j].className = "";
                    removeClass(navbox[j], "hidden");
                    addClass(navbox[j], "hidden");
                }
                removeClass(navbox[i], "hidden");
                this.className = "active";
            };
        }
    }

    //国际火车
    BindInterTrain(1);

    //购物车
    let shoppingnum = document.getElementById("shoppingnum");
    if (shoppingnum){
      //cart
      fetch("https://biz.chinahighlights.com/china-trains/api/api.asp?method=cht.order.userCart",{credentials:'include'})
      .then(function(response){
        //console.log(response.json());	
        if (response.ok) {
          return response.json();
        } else {
          var error = new Error(response.statusText);
          error.response = response;
          return Promise.reject(error);
        }
      }).then(function(data){
        var num = data.DataCount;
        document.getElementById("shoppingnum").innerHTML=num;
        if (num>0){
          document.getElementById("shoppingnum").classList.remove("default");
        }else{
          document.getElementById("shoppingnum").classList.add("default");
        }
        
      });
    }

});

//日历
function initDatepicker(ele){
    flatpickr(ele, {
        altInput: true,
        altInputClass: "",
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        disableMobile: true,
        minDate: (new Date()).fp_incr(0),
        maxDate: (new Date()).fp_incr(360)
    });
}

/**
 * 国际火车
 */

 function BindInterTrain(index) {
   let FromS = document.getElementById("IT_Txt_FZ_" + index);
   let ToS = document.getElementById("IT_Txt_DZ_" + index);
   let ItelMsg = document.getElementById("ItelMsg_" + index);

   fetch(
     "https://www.chinahighlights.com/guide-use.php/intel_train/get_rulejson/"
   )
     .then(function (response) {
       //console.log(response.json());
       if (response.ok) {
         return response.json();
       } else {
         var error = new Error(response.statusText);
         error.response = response;
         return Promise.reject(error);
       }
     })
     .then(function (json) {
       let html = "";
       for (let key in json.TrainList) {
         html +=
           '<option value="' +
           json.TrainList[key].FromStation +
           '">' +
           json.TrainList[key].FromStation +
           "</option>";
       }
       //设置第二个select默认值
       let html2 = '<option value="">Please Select</option>';
       for (let key3 in json.TrainList[0].ToStations) {
         html2 +=
           '<option value="' +
           json.TrainList[0].ToStations[key3].Station +
           '" data="' +
           json.TrainList[0].ToStations[key3].Message +
           '">' +
           json.TrainList[0].ToStations[key3].Station +
           "</option>";
       }
       ToS.options.length = 0;
       ToS.appendHTML(html2);

       FromS.options.length = 0;
       FromS.appendHTML(html);
       FromS.addEventListener("change", function (e) {
         var n = this.selectedIndex;
         var html3 = '<option value="">Please Select</option>';
         for (let key2 in json.TrainList[n].ToStations) {
           html3 +=
             '<option value="' +
             json.TrainList[n].ToStations[key2].Station +
             '" data="' +
             json.TrainList[n].ToStations[key2].Message +
             '">' +
             json.TrainList[n].ToStations[key2].Station +
             "</option>";
         }

         ToS.options.length = 0;
         ToS.appendHTML(html3);
         ToS.addEventListener("change", function (e) {
            ItelMsg.innerHTML = "";
           let index = this.selectedIndex;
           let Msg = this.options[index].getAttribute("data"); 
           if (Msg != "" && typeof Msg != "undefined" && Msg!=null) {
             ItelMsg.appendHTML(Msg);
           } 
         });
         ItelMsg.innerHTML = "";
       });
     });
 }

/** HotCity弹出框 */
function strHot(str){
	var rStr = "";
	var ary = Array(
        ['Hong Kong West Kowloon|XJA','Hong Kong West Kowloon(香港西九龙)'],['Beijing|BJP','Beijing(北京)'],['Shanghai|SHH','Shanghai(上海)'],['Xian|XAY','Xian(西安)'],
        ['Guangzhou|GZQ','Guangzhou(广州)'],['Hangzhou|HZH','Hangzhou(杭州)'],['Pingyao|PYV','Pingyao(平遥)'],
        ['Shenzhen|SZQ','Shenzhen(深圳)'],['Guilin|GLZ','Guilin(桂林)'],['Kunming|KMM','Kunming(昆明)'],
        ['Suzhou(Jiangsu province)|SZH','Suzhou(苏州)'],['Datong Railway Station|DTV','Datong(大同)'],
        ['Changsha|CSQ','Changsha(长沙)'],['Nanjing|NJH','Nanjing(南京)'],['Ningbo|NGH','Ningbo(宁波)'],
        ['Chengdu|CDW','Chendu(成都)'],['Taiyuan|TYV','Taiyuan(太原)'],['Nanning|NNZ','Nanning(南宁)'],
        ['Zhangjiajie|DIQ','Zhangjiajie(张家界)'],['Huangshan|HKH','Huangshan(黄山)']
        );

	array = ary;

	var celLineHeight = '';
	if(window.TrainFrom.w<450){
		rStr = '<div style="font-size:12px;display:block;position:absolute;background-color:#FFF;line-height:25px;border:1px solid #CCCCCC;z-index:444" id="hotStation" class="hidden-xs hidden-sm">';
		celLineHeight = 'line-height: 15px;';
	}else{
		rStr = '<div style="font-size:12px;display:block;position:absolute;background-color:#FFF;line-height:25px;border:1px solid #CCCCCC;z-index:444" id="hotStation" class="hidden-xs hidden-sm">';
	}

	for(var j=0;j<array.length;j++) {
		rStr += '<div style="float: left; '+celLineHeight+' margin: 2px; padding:5px;" data="'+array[j][0]+'" onclick="setDv(\''+str+'\',this)">'+array[j][1]+'</div>';
	}
	rStr += '<div style="clear:both"></div></div>';
	return rStr;
}


function showDv(id){	

    let eLeft =  document.getElementById(id).offsetLeft;
    let eTop = document.getElementById(id).offsetTop;    
    let eWidth = document.getElementById(id).offsetWidth;    
    let eHeight = document.getElementById(id).offsetHeight;

    hideDv(); //先清理一次
   
    document.getElementById('searchbox').appendHTML(strHot(id)); //由于原生js不能直接添加字符串，加了个方法。

    hotStation = document.getElementById('hotStation');
	if(window.TrainFrom.w<450){		
        hotStation.style.top = eTop+eHeight+'px';
        hotStation.style.left =  eLeft+'px';
        hotStation.style.width = window.TrainFrom.w-40+'px';
	}else{
        hotStation.style.top = eTop+eHeight+'px';
        hotStation.style.left = eLeft+'px';
        hotStation.style.width = window.TrainFrom.w-40+'px';
	}
}

function hideDv(){ 
    let hotStation = document.getElementById('hotStation');
    if (hotStation){
        hotStation.parentNode.removeChild(hotStation);
    }
 
}
function setDv(o1,o2)
{
    // console.log(o2.getAttribute('data'));
    // console.log(o1);
    let data = o2.getAttribute('data').split('|');
    document.getElementById(o1).value = data[0];
    let CHid = 'Code_'+o1;
    let objectCH = document.getElementById(CHid);
    let objectO1 = document.getElementById(o1);
    if (!objectCH){
        let strCH = '<input type="hidden" name="'+CHid+'" value="'+data[1]+'" id="'+CHid+'" />';
        objectO1.afterHTML(strCH);
    }else {
        objectCH.value = data[1];
    }  
    hideDv();
}

/*----Hotcity end-----*/


/** loader */
function loaderOn() {
    document.getElementById("loader").style.display = "block";
}

function loaderOff() {
    document.getElementById("loader").style.display = "none";
}

/** * 一些扩展方法  */

/**
 * 
 * 添加字符串内容的html到指定dom中。
 */
HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段，一次性append，提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};

/**
 * 
 * 添加字符串内容的html到指定dom中。
 */
 HTMLElement.prototype.afterHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段，一次性append，提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.parentNode.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};



/*给元素添加指定的class */
function addClass(obj, classname) {
    if (obj.className == "") {
        obj.className = classname;
    } else {
        let classArr = obj.className.split(" ");
        if (classArr.indexOf(classname) == -1) {
            obj.className += " " + classname;
        }
    }
}

/* 删除指定元素的指定class */
function removeClass(obj, classname) {
    let classArr = obj.className.split(" ");
    let _index = classArr.indexOf(classname);
    if (_index != -1) {
        classArr.splice(_index, 1);
        obj.className = classArr.join(" ");
    }
}


/***--------智能补全----------- */
function autocomplete(inp, arr) {
    /*函数主要有两个参数：文本框元素和自动补齐的完整数据*/
    let currentFocus;
  
    //输入框点击，焦点事件。弹出热点城市
    ['focus', 'click'].forEach(function (item, i) {
      inp.addEventListener(item, function (e) {
        let val = this.value;
        if (!val || val == "") {
          showDv(this.id);
          closeAllLists();
          e.stopPropagation();
          //return false;
        } 
      })
    });
  
    /* 监听 - 在写入时触发 */
    inp.addEventListener("input", function (e) {
      let a, b, i, val = this.value;
      /*关闭已经打开的自动完成值列表*/
      closeAllLists();
      hideDv(); //隐掉热点
      if (!val) {
        showDv(this.id);
        return false;
      }
      currentFocus = -1;
      /*创建列表*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      // a.style.left = inp.offsetLeft;
      //a.style.top = inp.offsetTop+20;
      a.style.width = (inp.offsetWidth - 3) + "px";
      /*添加 DIV 元素*/
      this.parentNode.appendChild(a);
      /*循环数组...*/
      let j = 0; //符合条件计数器，最多显示10条
      for (i = 0; i < arr.length; i++) {
        /*检查选项是否以与文本字段值相同的字母开头*/
        let sVal = arr[i][1].substr(0, val.length).toUpperCase();
        if (arr[i][3] == 1 || arr[i][3] == 2) { //数组组别为1,2的才显示
          if (sVal == val.toUpperCase()) {
            /*为匹配元素创建 DIV*/
            b = document.createElement("DIV");
            // /*使匹配字母变粗体*/
            // b.innerHTML = "<strong>" + arr[i][1].substr(0, val.length) + "</strong>";
            // b.innerHTML += arr[i][1].substr(val.length)+","+arr[i][2];
            b.innerHTML += arr[i][1] + "," + arr[i][2];
            /*值单独保存*/
            b.innerHTML += "<input type='hidden' value='" + arr[i][1] + "'>";
            b.setAttribute('data',arr[i][0]);
            /*点击事件*/
            b.addEventListener("click", function (e) {
              /*赋值*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /* 站点三字码赋值 */
              let CHid = "Code_"+inp.id;
             // console.log(arr[i][0]);
              let objectCH = document.getElementById(CHid);
              if (!objectCH){
                let strCH = '<input type="hidden" name="'+CHid+'" value="'+this.getAttribute('data')+'" id="'+CHid+'" />';
                inp.afterHTML(strCH);
              }else{
                objectCH.value = this.getAttribute('data');
              }           
  
              /*关闭*/
              closeAllLists();
            });
            a.appendChild(b);
            j += 1;
          }
        }
        if (j >= 10) break;
      }
    });
    /*键盘操作*/
    inp.addEventListener("keydown", function (e) {
      let x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) { //up
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
    });
  
    function addActive(x) {
      if (!x) return false;
      removeActive(x);
      if (currentFocus >= x.length) currentFocus = 0;
      if (currentFocus < 0) currentFocus = (x.length - 1);
      x[currentFocus].classList.add("autocomplete-active");
    }
  
    function removeActive(x) {
      for (var i = 0; i < x.length; i++) {
        x[i].classList.remove("autocomplete-active");
      }
    }
  
    function closeAllLists(elmnt) {
      let x = document.getElementsByClassName("autocomplete-items");
      for (let i = 0; i < x.length; i++) {
        if (elmnt != x[i] && elmnt != inp) {
          x[i].parentNode.removeChild(x[i]);
        }
      }
    }
    /*关闭弹出框*/
    document.addEventListener("click", function (e) {
      closeAllLists(e.target);
      hideDv();
    });
  
  }



/** 表单验证 */
function Chk_InnerTrainForm(){
  var Txt_FZ_1 = document.getElementById("Txt_FZ_1").value;
  var Txt_DZ_1 = document.getElementById("Txt_DZ_1").value;
  var stationDate_1 = document.getElementById("stationDate_1").value;
  if (Txt_FZ_1 === '') {
    alert("Please enter your departure city!");
    document.getElementById("Txt_FZ_1").focus();
    return false;
  }
  if (Txt_DZ_1 === '') {
    alert("Please enter your arrival city!");
    document.getElementById("Txt_DZ_1").focus();
    return false;
  }
  if (stationDate_1 === '') {
    alert("Please select a travel date!");
    document.getElementById("stationDate_1").focus();
    return false;
  }
  loaderOn();
  return true;
}

function Chk_IntelTrainForm(){
  var IT_Txt_FZ_1 = document.getElementById("IT_Txt_FZ_1").value;
  var IT_Txt_DZ_1 = document.getElementById("IT_Txt_DZ_1").value;
  var stationDate_IT_1 = document.getElementById("stationDate_IT_1").value;
  if (IT_Txt_FZ_1 === '') {
    alert("Please select your departure city!");
    return false;
  }
  if (IT_Txt_DZ_1 === '') {
    alert("Please select your arrival city!");
    return false;
  }
  if (stationDate_IT_1 === '') {
    alert("Please select a travel date!");
    return false;
  }
  loaderOn();
  return true;
}