传入起始年份和起始月份

得到

插件的标准格式放到

效果

  1. let getAllDatas = (stime, etime) => {
  2.     //接收传进来的参数月份
  3.     var data_M = etime;
  4.     //接收传进来的参数年份
  5.     var data_Y = stime;
  6.     //每年总月数
  7.     var countM = 12;
  8.     //在MobileSelect时间插件使用的格式data：{}
  9.     var data = [];
  10.     //写死一个满月份的数组
  11.     var ourM = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
  12.     var datas = null;
  13.     var data_list = [];
  14.     //处理每个月份
  15.     var every_m = [];
  16.     //定义key
  17.     var keys = '';
  18.     //当前年
  19.     var nowYear = new Date().getFullYear();
  20.     //当前月
  21.     var nowDay = new Date().getMonth() + 1;
  22.     if (stime >= nowYear) {
  23.         console.log('输入有错，不准大于当前年份')
  24.         return
  25.     }
  26.     if (etime > countM) {
  27.         console.log('输入有错，每年只有12个月')
  28.         return
  29.     }
  30.     //先处理第一个月份
  31.     every_m.push(etime + '')
  32.     for (let j = 0; j < countM - data_M; j++) {
  33.         etime += 1;
  34.         every_m.push(etime + '')
  35.     }
  36.     //=---处理   年份key：数据 every_m月份的数组
  37.     keys = stime + '';
  38.     datas = {
  39.         [keys]: every_m
  40.     };
  41.     data_list.push(datas)
  42.     console.log(nowYear)
  43.     if (nowYear - stime >= 2) {
  44.         var cha = nowYear - stime;
  45.         for (let i = 1; i < cha; i++) {
  46.             data_Y += 1;
  47.             keys = data_Y + '';
  48.             datas = {
  49.                 [keys]: ourM
  50.             };
  51.             data_list.push(datas)
  52.         }
  53.     }
  54.     every_m = []
  55.     //处理当前的年份和月份
  56.     for (let k = 1; k <= nowDay; k++) {
  57.         every_m.push(k + '')
  58.     }
  59.     keys = new Date().getFullYear() + '';
  60.     datas = {
  61.         [keys]: every_m
  62.     };
  63.     data_list.push(datas)
  64.  
  65.     console.log(data_list)
  66.     //数据格式封装完毕  封装//在MobileSelect时间插件使用
  67.     for (var t = 0; t < data_list.length; t++) {
  68.         var newJson = {};
  69.         var child = [];
  70.         for (var key in data_list[t]) {
  71.             for (var v = 0; v < data_list[t][key].length; v++) {
  72.                 child.push({
  73.                     id: data_list[t][key][v],
  74.                     value: data_list[t][key][v]
  75.                 })
  76.             }
  77.             newJson = {
  78.                 id: key,
  79.                 value: key,
  80.                 childs: child
  81.             }
  82.         }
  83.         data.push(newJson)
  84.     }
  85.     console.log(data)
  86.     return data;
  87. }

插件源码

  1. /*!
  2.  * mobileSelect.js
  3.  * (c) 2017-present onlyhom
  4.  * Released under the MIT License.
  5.  */
  6. (function() {
  7.     function getClass(dom, string) {
  8.         return dom.getElementsByClassName(string)
  9.     }
  10.  
  11.     function MobileSelect(config) {
  12.         this.mobileSelect;
  13.         this.wheelsData = config.wheels;
  14.         this.jsonType = false;
  15.         this.cascadeJsonData = [];
  16.         this.displayJson = [];
  17.         this.curValue = null;
  18.         this.curIndexArr = [];
  19.         this.cascade = false;
  20.         this.startY;
  21.         this.moveEndY;
  22.         this.moveY;
  23.         this.oldMoveY;
  24.         this.offset = 0;
  25.         this.offsetSum = 0;
  26.         this.oversizeBorder;
  27.         this.curDistance = [];
  28.         this.clickStatus = false;
  29.         this.isPC = true;
  30.         this.init(config)
  31.     }
  32.     MobileSelect.prototype = {
  33.         constructor: MobileSelect,
  34.         init: function(config) {
  35.             var _this = this;
  36.             _this.keyMap = config.keyMap ? config.keyMap : {
  37.                 id: "id",
  38.                 value: "value",
  39.                 childs: "childs"
  40.             };
  41.             _this.checkDataType();
  42.             _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
  43.             _this.trigger = document.querySelector(config.trigger);
  44.             if (!_this.trigger) {
  45.                 console.error("mobileSelect has been successfully installed, but no trigger found on your page.");
  46.                 return false
  47.             }
  48.             _this.wheel = getClass(_this.mobileSelect, "wheel");
  49.             _this.slider = getClass(_this.mobileSelect, "selectContainer");
  50.             _this.wheels = _this.mobileSelect.querySelector(".wheels");
  51.             _this.liHeight = _this.mobileSelect.querySelector("li").offsetHeight;
  52.             _this.ensureBtn = _this.mobileSelect.querySelector(".ensure");
  53.             _this.cancelBtn = _this.mobileSelect.querySelector(".cancel");
  54.             _this.grayLayer = _this.mobileSelect.querySelector(".grayLayer");
  55.             _this.popUp = _this.mobileSelect.querySelector(".content");
  56.             _this.callback = config.callback || function() {};
  57.             _this.transitionEnd = config.transitionEnd || function() {};
  58.             _this.onShow = config.onShow || function() {};
  59.             _this.onHide = config.onHide || function() {};
  60.             _this.initPosition = config.position || [];
  61.             _this.titleText = config.title || "";
  62.             _this.connector = config.connector || " ";
  63.             _this.triggerDisplayData = !(typeof(config.triggerDisplayData) == "undefined") ? config.triggerDisplayData : true;
  64.             _this.trigger.style.cursor = "pointer";
  65.             _this.setStyle(config);
  66.             _this.setTitle(_this.titleText);
  67.             _this.checkIsPC();
  68.             _this.checkCascade();
  69.             _this.addListenerAll();
  70.             if (_this.cascade) {
  71.                 _this.initCascade()
  72.             }
  73.             if (_this.initPosition.length < _this.slider.length) {
  74.                 var diff = _this.slider.length - _this.initPosition.length;
  75.                 for (var i = 0; i < diff; i++) {
  76.                     _this.initPosition.push(0)
  77.                 }
  78.             }
  79.             _this.setCurDistance(_this.initPosition);
  80.             _this.cancelBtn.addEventListener("click", function() {
  81.                 _this.hide()
  82.             });
  83.             _this.ensureBtn.addEventListener("click", function() {
  84.                 _this.hide();
  85.                 if (!_this.liHeight) {
  86.                     _this.liHeight = _this.mobileSelect.querySelector("li").offsetHeight
  87.                 }
  88.                 var tempValue = "";
  89.                 for (var i = 0; i < _this.wheel.length; i++) {
  90.                     i == _this.wheel.length - 1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this
  91.                         .connector
  92.                 }
  93.                 if (_this.triggerDisplayData) {
  94.                     _this.trigger.innerHTML = tempValue
  95.                 }
  96.                 _this.curIndexArr = _this.getIndexArr();
  97.                 _this.curValue = _this.getCurValue();
  98.                 _this.callback(_this.curIndexArr, _this.curValue)
  99.             });
  100.             _this.trigger.addEventListener("click", function() {
  101.                 _this.show()
  102.             });
  103.             _this.grayLayer.addEventListener("click", function() {
  104.                 _this.hide()
  105.             });
  106.             _this.popUp.addEventListener("click", function() {
  107.                 event.stopPropagation()
  108.             });
  109.             _this.fixRowStyle()
  110.         },
  111.         setTitle: function(string) {
  112.             var _this = this;
  113.             _this.titleText = string;
  114.             _this.mobileSelect.querySelector(".title").innerHTML = _this.titleText
  115.         },
  116.         setStyle: function(config) {
  117.             var _this = this;
  118.             if (config.ensureBtnColor) {
  119.                 _this.ensureBtn.style.color = config.ensureBtnColor
  120.             }
  121.             if (config.cancelBtnColor) {
  122.                 _this.cancelBtn.style.color = config.cancelBtnColor
  123.             }
  124.             if (config.titleColor) {
  125.                 _this.title = _this.mobileSelect.querySelector(".title");
  126.                 _this.title.style.color = config.titleColor
  127.             }
  128.             if (config.textColor) {
  129.                 _this.panel = _this.mobileSelect.querySelector(".panel");
  130.                 _this.panel.style.color = config.textColor
  131.             }
  132.             if (config.titleBgColor) {
  133.                 _this.btnBar = _this.mobileSelect.querySelector(".btnBar");
  134.                 _this.btnBar.style.backgroundColor = config.titleBgColor
  135.             }
  136.             if (config.bgColor) {
  137.                 _this.panel = _this.mobileSelect.querySelector(".panel");
  138.                 _this.shadowMask = _this.mobileSelect.querySelector(".shadowMask");
  139.                 _this.panel.style.backgroundColor = config.bgColor;
  140.                 _this.shadowMask.style.background = "linear-gradient(to bottom, " + config.bgColor +
  141.                     ", rgba(255, 255, 255, 0), " + config.bgColor + ")"
  142.             }
  143.             if (!isNaN(config.maskOpacity)) {
  144.                 _this.grayMask = _this.mobileSelect.querySelector(".grayLayer");
  145.                 _this.grayMask.style.background = "rgba(0, 0, 0, " + config.maskOpacity + ")"
  146.             }
  147.         },
  148.         checkIsPC: function() {
  149.             var _this = this;
  150.             var sUserAgent = navigator.userAgent.toLowerCase();
  151.             var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  152.             var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  153.             var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  154.             var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  155.             var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  156.             var bIsAndroid = sUserAgent.match(/android/i) == "android";
  157.             var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  158.             var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  159.             if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
  160.                 _this.isPC = false
  161.             }
  162.         },
  163.         show: function() {
  164.             this.mobileSelect.classList.add("mobileSelect-show");
  165.             if (typeof this.onShow === "function") {
  166.                 this.onShow(this)
  167.             }
  168.         },
  169.         hide: function() {
  170.             this.mobileSelect.classList.remove("mobileSelect-show");
  171.             if (typeof this.onHide === "function") {
  172.                 this.onHide(this)
  173.             }
  174.         },
  175.         renderWheels: function(wheelsData, cancelBtnText, ensureBtnText) {
  176.             var _this = this;
  177.             var cancelText = cancelBtnText ? cancelBtnText : "{:w:sld_shop_cancel}";
  178.             var ensureText = ensureBtnText ? ensureBtnText : "{:w:sld_confirm2}";
  179.             _this.mobileSelect = document.createElement("div");
  180.             _this.mobileSelect.className = "mobileSelect";
  181.             _this.mobileSelect.innerHTML = '<div class="grayLayer"></div>' + '<div class="content">' + '<div class="btnBar">' +
  182.                 '<div class="fixWidth">' + '<div class="cancel">' + cancelText + "</div>" + '<div class="title"></div>' +
  183.                 '<div class="ensure">' + ensureText + "</div>" + "</div>" + "</div>" + '<div class="panel">' +
  184.                 '<div class="fixWidth">' + '<div class="wheels">' + "</div>" + '<div class="selectLine"></div>' +
  185.                 '<div class="shadowMask"></div>' + "</div>" + "</div>" + "</div>";
  186.             document.body.appendChild(_this.mobileSelect);
  187.             var tempHTML = "";
  188.             for (var i = 0; i < wheelsData.length; i++) {
  189.                 tempHTML += '<div class="wheel"><ul class="selectContainer">';
  190.                 if (_this.jsonType) {
  191.                     for (var j = 0; j < wheelsData[i].data.length; j++) {
  192.                         tempHTML += '<li data-id="' + wheelsData[i].data[j][_this.keyMap.id] + '">' + wheelsData[i].data[j][_this.keyMap
  193.                             .value
  194.                         ] + "</li>"
  195.                     }
  196.                 } else {
  197.                     for (var j = 0; j < wheelsData[i].data.length; j++) {
  198.                         tempHTML += "<li>" + wheelsData[i].data[j] + "</li>"
  199.                     }
  200.                 }
  201.                 tempHTML += "</ul></div>"
  202.             }
  203.             _this.mobileSelect.querySelector(".wheels").innerHTML = tempHTML
  204.         },
  205.         addListenerAll: function() {
  206.             var _this = this;
  207.             for (var i = 0; i < _this.slider.length; i++) {
  208.                 (function(i) {
  209.                     _this.addListenerWheel(_this.wheel[i], i)
  210.                 })(i)
  211.             }
  212.         },
  213.         addListenerWheel: function(theWheel, index) {
  214.             var _this = this;
  215.             theWheel.addEventListener("touchstart", function() {
  216.                 _this.touch(event, this.firstChild, index)
  217.             }, false);
  218.             theWheel.addEventListener("touchend", function() {
  219.                 _this.touch(event, this.firstChild, index)
  220.             }, false);
  221.             theWheel.addEventListener("touchmove", function() {
  222.                 _this.touch(event, this.firstChild, index)
  223.             }, false);
  224.             if (_this.isPC) {
  225.                 theWheel.addEventListener("mousedown", function() {
  226.                     _this.dragClick(event, this.firstChild, index)
  227.                 }, false);
  228.                 theWheel.addEventListener("mousemove", function() {
  229.                     _this.dragClick(event, this.firstChild, index)
  230.                 }, false);
  231.                 theWheel.addEventListener("mouseup", function() {
  232.                     _this.dragClick(event, this.firstChild, index)
  233.                 }, true)
  234.             }
  235.         },
  236.         checkDataType: function() {
  237.             var _this = this;
  238.             if (typeof(_this.wheelsData[0].data[0]) == "object") {
  239.                 _this.jsonType = true
  240.             }
  241.         },
  242.         checkCascade: function() {
  243.             var _this = this;
  244.             if (_this.jsonType) {
  245.                 var node = _this.wheelsData[0].data;
  246.                 for (var i = 0; i < node.length; i++) {
  247.                     if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
  248.                         _this.cascade = true;
  249.                         _this.cascadeJsonData = _this.wheelsData[0].data;
  250.                         break
  251.                     }
  252.                 }
  253.             } else {
  254.                 _this.cascade = false
  255.             }
  256.         },
  257.         generateArrData: function(targetArr) {
  258.             var tempArr = [];
  259.             var keyMap_id = this.keyMap.id;
  260.             var keyMap_value = this.keyMap.value;
  261.             for (var i = 0; i < targetArr.length; i++) {
  262.                 var tempObj = {};
  263.                 tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
  264.                 tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
  265.                 tempArr.push(tempObj)
  266.             }
  267.             return tempArr
  268.         },
  269.         initCascade: function() {
  270.             var _this = this;
  271.             _this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
  272.             if (_this.initPosition.length > 0) {
  273.                 _this.initDeepCount = 0;
  274.                 _this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]])
  275.             } else {
  276.                 _this.checkArrDeep(_this.cascadeJsonData[0])
  277.             }
  278.             _this.reRenderWheels()
  279.         },
  280.         initCheckArrDeep: function(parent) {
  281.             var _this = this;
  282.             if (parent) {
  283.                 if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
  284.                     _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
  285.                     _this.initDeepCount++;
  286.                     var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
  287.                     if (nextNode) {
  288.                         _this.initCheckArrDeep(nextNode)
  289.                     } else {
  290.                         _this.checkArrDeep(parent[_this.keyMap.childs][0])
  291.                     }
  292.                 }
  293.             }
  294.         },
  295.         checkArrDeep: function(parent) {
  296.             var _this = this;
  297.             if (parent) {
  298.                 if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
  299.                     _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
  300.                     _this.checkArrDeep(parent[_this.keyMap.childs][0])
  301.                 }
  302.             }
  303.         },
  304.         checkRange: function(index, posIndexArr) {
  305.             var _this = this;
  306.             var deleteNum = _this.displayJson.length - 1 - index;
  307.             for (var i = 0; i < deleteNum; i++) {
  308.                 _this.displayJson.pop()
  309.             }
  310.             var resultNode;
  311.             for (var i = 0; i <= index; i++) {
  312.                 if (i == 0) {
  313.                     resultNode = _this.cascadeJsonData[posIndexArr[0]]
  314.                 } else {
  315.                     resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]]
  316.                 }
  317.             }
  318.             _this.checkArrDeep(resultNode);
  319.             _this.reRenderWheels();
  320.             _this.fixRowStyle();
  321.             _this.setCurDistance(_this.resetPosition(index, posIndexArr))
  322.         },
  323.         resetPosition: function(index, posIndexArr) {
  324.             var _this = this;
  325.             var tempPosArr = posIndexArr;
  326.             var tempCount;
  327.             if (_this.slider.length > posIndexArr.length) {
  328.                 tempCount = _this.slider.length - posIndexArr.length;
  329.                 for (var i = 0; i < tempCount; i++) {
  330.                     tempPosArr.push(0)
  331.                 }
  332.             } else {
  333.                 if (_this.slider.length < posIndexArr.length) {
  334.                     tempCount = posIndexArr.length - _this.slider.length;
  335.                     for (var i = 0; i < tempCount; i++) {
  336.                         tempPosArr.pop()
  337.                     }
  338.                 }
  339.             }
  340.             for (var i = index + 1; i < tempPosArr.length; i++) {
  341.                 tempPosArr[i] = 0
  342.             }
  343.             return tempPosArr
  344.         },
  345.         reRenderWheels: function() {
  346.             var _this = this;
  347.             if (_this.wheel.length > _this.displayJson.length) {
  348.                 var count = _this.wheel.length - _this.displayJson.length;
  349.                 for (var i = 0; i < count; i++) {
  350.                     _this.wheels.removeChild(_this.wheel[_this.wheel.length - 1])
  351.                 }
  352.             }
  353.             for (var i = 0; i < _this.displayJson.length; i++) {
  354.                 (function(i) {
  355.                     var tempHTML = "";
  356.                     if (_this.wheel[i]) {
  357.                         for (var j = 0; j < _this.displayJson[i].length; j++) {
  358.                             tempHTML += '<li data-id="' + _this.displayJson[i][j][_this.keyMap.id] + '">' + _this.displayJson[i][j][
  359.                                 _this.keyMap.value
  360.                             ] + "</li>"
  361.                         }
  362.                         _this.slider[i].innerHTML = tempHTML
  363.                     } else {
  364.                         var tempWheel = document.createElement("div");
  365.                         tempWheel.className = "wheel";
  366.                         tempHTML = '<ul class="selectContainer">';
  367.                         for (var j = 0; j < _this.displayJson[i].length; j++) {
  368.                             tempHTML += '<li data-id="' + _this.displayJson[i][j][_this.keyMap.id] + '">' + _this.displayJson[i][j][
  369.                                 _this.keyMap.value
  370.                             ] + "</li>"
  371.                         }
  372.                         tempHTML += "</ul>";
  373.                         tempWheel.innerHTML = tempHTML;
  374.                         _this.addListenerWheel(tempWheel, i);
  375.                         _this.wheels.appendChild(tempWheel)
  376.                     }
  377.                 })(i)
  378.             }
  379.         },
  380.         updateWheels: function(data) {
  381.             var _this = this;
  382.             if (_this.cascade) {
  383.                 _this.cascadeJsonData = data;
  384.                 _this.displayJson = [];
  385.                 _this.initCascade();
  386.                 if (_this.initPosition.length < _this.slider.length) {
  387.                     var diff = _this.slider.length - _this.initPosition.length;
  388.                     for (var i = 0; i < diff; i++) {
  389.                         _this.initPosition.push(0)
  390.                     }
  391.                 }
  392.                 _this.setCurDistance(_this.initPosition);
  393.                 _this.fixRowStyle()
  394.             }
  395.         },
  396.         updateWheel: function(sliderIndex, data) {
  397.             var _this = this;
  398.             var tempHTML = "";
  399.             if (_this.cascade) {
  400.                 console.error("级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源");
  401.                 return false
  402.             } else {
  403.                 if (_this.jsonType) {
  404.                     for (var j = 0; j < data.length; j++) {
  405.                         tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + "</li>"
  406.                     }
  407.                     _this.wheelsData[sliderIndex] = {
  408.                         data: data
  409.                     }
  410.                 } else {
  411.                     for (var j = 0; j < data.length; j++) {
  412.                         tempHTML += "<li>" + data[j] + "</li>"
  413.                     }
  414.                     _this.wheelsData[sliderIndex] = data
  415.                 }
  416.             }
  417.             _this.slider[sliderIndex].innerHTML = tempHTML
  418.         },
  419.         fixRowStyle: function() {
  420.             var _this = this;
  421.             var width = (100 / _this.wheel.length).toFixed(2);
  422.             for (var i = 0; i < _this.wheel.length; i++) {
  423.                 _this.wheel[i].style.width = width + "%"
  424.             }
  425.         },
  426.         getIndex: function(distance) {
  427.             return Math.round((2 * this.liHeight - distance) / this.liHeight)
  428.         },
  429.         getIndexArr: function() {
  430.             var _this = this;
  431.             var temp = [];
  432.             for (var i = 0; i < _this.curDistance.length; i++) {
  433.                 temp.push(_this.getIndex(_this.curDistance[i]))
  434.             }
  435.             return temp
  436.         },
  437.         getCurValue: function() {
  438.             var _this = this;
  439.             var temp = [];
  440.             var positionArr = _this.getIndexArr();
  441.             if (_this.cascade) {
  442.                 for (var i = 0; i < _this.wheel.length; i++) {
  443.                     temp.push(_this.displayJson[i][positionArr[i]])
  444.                 }
  445.             } else {
  446.                 if (_this.jsonType) {
  447.                     for (var i = 0; i < _this.curDistance.length; i++) {
  448.                         temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])])
  449.                     }
  450.                 } else {
  451.                     for (var i = 0; i < _this.curDistance.length; i++) {
  452.                         temp.push(_this.getInnerHtml(i))
  453.                     }
  454.                 }
  455.             }
  456.             return temp
  457.         },
  458.         getValue: function() {
  459.             return this.curValue
  460.         },
  461.         calcDistance: function(index) {
  462.             return 2 * this.liHeight - index * this.liHeight
  463.         },
  464.         setCurDistance: function(indexArr) {
  465.             var _this = this;
  466.             var temp = [];
  467.             for (var i = 0; i < _this.slider.length; i++) {
  468.                 temp.push(_this.calcDistance(indexArr[i]));
  469.                 _this.movePosition(_this.slider[i], temp[i])
  470.             }
  471.             _this.curDistance = temp
  472.         },
  473.         fixPosition: function(distance) {
  474.             return -(this.getIndex(distance) - 2) * this.liHeight
  475.         },
  476.         movePosition: function(theSlider, distance) {
  477.             theSlider.style.webkitTransform = "translate3d(0," + distance + "px, 0)";
  478.             theSlider.style.transform = "translate3d(0," + distance + "px, 0)"
  479.         },
  480.         locatePosition: function(index, posIndex) {
  481.             var _this = this;
  482.             this.curDistance[index] = this.calcDistance(posIndex);
  483.             this.movePosition(this.slider[index], this.curDistance[index]);
  484.             if (_this.cascade) {
  485.                 _this.checkRange(index, _this.getIndexArr())
  486.             }
  487.         },
  488.         updateCurDistance: function(theSlider, index) {
  489.             if (theSlider.style.transform) {
  490.                 this.curDistance[index] = parseInt(theSlider.style.transform.split(",")[1])
  491.             } else {
  492.                 this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(",")[1])
  493.             }
  494.         },
  495.         getDistance: function(theSlider) {
  496.             if (theSlider.style.transform) {
  497.                 return parseInt(theSlider.style.transform.split(",")[1])
  498.             } else {
  499.                 return parseInt(theSlider.style.webkitTransform.split(",")[1])
  500.             }
  501.         },
  502.         getInnerHtml: function(sliderIndex) {
  503.             var _this = this;
  504.             var index = _this.getIndex(_this.curDistance[sliderIndex]);
  505.             return _this.slider[sliderIndex].getElementsByTagName("li")[index].innerHTML
  506.         },
  507.         touch: function(event, theSlider, index) {
  508.             var _this = this;
  509.             event = event || window.event;
  510.             switch (event.type) {
  511.                 case "touchstart":
  512.                     _this.startY = event.touches[0].clientY;
  513.                     _this.startY = parseInt(_this.startY);
  514.                     _this.oldMoveY = _this.startY;
  515.                     break;
  516.                 case "touchend":
  517.                     _this.moveEndY = parseInt(event.changedTouches[0].clientY);
  518.                     _this.offsetSum = _this.moveEndY - _this.startY;
  519.                     _this.oversizeBorder = -(theSlider.getElementsByTagName("li").length - 3) * _this.liHeight;
  520.                     if (_this.offsetSum == 0) {
  521.                         var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40);
  522.                         if (clickOffetNum != 2) {
  523.                             var offset = clickOffetNum - 2;
  524.                             var newDistance = _this.curDistance[index] + (offset * _this.liHeight);
  525.                             if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) {
  526.                                 _this.curDistance[index] = newDistance;
  527.                                 _this.movePosition(theSlider, _this.curDistance[index]);
  528.                                 _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
  529.                             }
  530.                         }
  531.                     } else {
  532.                         _this.updateCurDistance(theSlider, index);
  533.                         _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
  534.                         _this.movePosition(theSlider, _this.curDistance[index]);
  535.                         if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
  536.                             _this.curDistance[index] = 2 * _this.liHeight;
  537.                             setTimeout(function() {
  538.                                 _this.movePosition(theSlider, _this.curDistance[index])
  539.                             }, 100)
  540.                         } else {
  541.                             if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
  542.                                 _this.curDistance[index] = _this.oversizeBorder;
  543.                                 setTimeout(function() {
  544.                                     _this.movePosition(theSlider, _this.curDistance[index])
  545.                                 }, 100)
  546.                             }
  547.                         }
  548.                         _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
  549.                     }
  550.                     if (_this.cascade) {
  551.                         _this.checkRange(index, _this.getIndexArr())
  552.                     }
  553.                     break;
  554.                 case "touchmove":
  555.                     event.preventDefault();
  556.                     _this.moveY = event.touches[0].clientY;
  557.                     _this.offset = _this.moveY - _this.oldMoveY;
  558.                     _this.updateCurDistance(theSlider, index);
  559.                     _this.curDistance[index] = _this.curDistance[index] + _this.offset;
  560.                     _this.movePosition(theSlider, _this.curDistance[index]);
  561.                     _this.oldMoveY = _this.moveY;
  562.                     break
  563.             }
  564.         },
  565.         dragClick: function(event, theSlider, index) {
  566.             var _this = this;
  567.             event = event || window.event;
  568.             switch (event.type) {
  569.                 case "mousedown":
  570.                     _this.startY = event.clientY;
  571.                     _this.oldMoveY = _this.startY;
  572.                     _this.clickStatus = true;
  573.                     break;
  574.                 case "mouseup":
  575.                     _this.moveEndY = event.clientY;
  576.                     _this.offsetSum = _this.moveEndY - _this.startY;
  577.                     _this.oversizeBorder = -(theSlider.getElementsByTagName("li").length - 3) * _this.liHeight;
  578.                     if (_this.offsetSum == 0) {
  579.                         var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40);
  580.                         if (clickOffetNum != 2) {
  581.                             var offset = clickOffetNum - 2;
  582.                             var newDistance = _this.curDistance[index] + (offset * _this.liHeight);
  583.                             if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) {
  584.                                 _this.curDistance[index] = newDistance;
  585.                                 _this.movePosition(theSlider, _this.curDistance[index]);
  586.                                 _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
  587.                             }
  588.                         }
  589.                     } else {
  590.                         _this.updateCurDistance(theSlider, index);
  591.                         _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
  592.                         _this.movePosition(theSlider, _this.curDistance[index]);
  593.                         if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
  594.                             _this.curDistance[index] = 2 * _this.liHeight;
  595.                             setTimeout(function() {
  596.                                 _this.movePosition(theSlider, _this.curDistance[index])
  597.                             }, 100)
  598.                         } else {
  599.                             if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
  600.                                 _this.curDistance[index] = _this.oversizeBorder;
  601.                                 setTimeout(function() {
  602.                                     _this.movePosition(theSlider, _this.curDistance[index])
  603.                                 }, 100)
  604.                             }
  605.                         }
  606.                         _this.transitionEnd(_this.getIndexArr(), _this.getCurValue())
  607.                     }
  608.                     _this.clickStatus = false;
  609.                     if (_this.cascade) {
  610.                         _this.checkRange(index, _this.getIndexArr())
  611.                     }
  612.                     break;
  613.                 case "mousemove":
  614.                     event.preventDefault();
  615.                     if (_this.clickStatus) {
  616.                         _this.moveY = event.clientY;
  617.                         _this.offset = _this.moveY - _this.oldMoveY;
  618.                         _this.updateCurDistance(theSlider, index);
  619.                         _this.curDistance[index] = _this.curDistance[index] + _this.offset;
  620.                         _this.movePosition(theSlider, _this.curDistance[index]);
  621.                         _this.oldMoveY = _this.moveY
  622.                     }
  623.                     break
  624.             }
  625.         }
  626.     };
  627.     if (typeof exports == "object") {
  628.         module.exports = MobileSelect
  629.     } else {
  630.         if (typeof define == "function" && define.amd) {
  631.             define([], function() {
  632.                 return MobileSelect
  633.             })
  634.         } else {
  635.             window.MobileSelect = MobileSelect
  636.         }
  637.     }
  638. })();

关于mobileSelect.js日期数据获取封装，动态时间，封装的更多相关文章

  1. Js 日期转换函数(UTC时间转换及日期想加减)

    IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...

  2. 【JS 日期】获取当前日期时间

    获取当前日期时间 <!DOCTYPE html> <html> <head></head> <body> <script> wi ...

  3. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  4. JS获取当前日期时间及JS日期格式化

    Js获取当前日期时间: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份( ...

  5. js日期时间比较函数

    转自:http://www.cnblogs.com/zxjyuan/archive/2010/09/07/1820708.html js日期比较(yyyy-mm-dd) function duibi( ...

  6. 根据日期字符串获取星期几，日期获取星期，时间获取星期，js获取星期

    根据日期字符串获取星期几,日期获取星期,时间获取星期,js获取星期 >>>>>>>>>>>>>>>>&g ...

  7. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  8. js字符串转日期，js字符串解析成日期，js日期解析， Date.parse小时是8点，Date.parse时间多了8小时

    js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...

  9. 关于日期的一些常用方法的封装——dates.js

    针对自己在日常用到的一些日期方法,整理成一个js日期插件,插件定义了一个dates全局对象,继承了Date函数,相当于在Date函数上做了一些扩展. 这个插件会不断更新,所有我之后用到的关于日期的自定 ...

随机推荐

  1. Frame Relay Voice Traffic Shaping and Frament

    本文全称应该是:Frame Relay Voice-Adaptive Traffic Shaping and Fragmentation,标题限制字数,没办法了   帧中继的流量整型向来是个头疼的地方 ...

  2. #if 和#ifdef的区别

    转自:https://blog.csdn.net/zhangchiytu/article/details/7563329 先看个例子:#define TARGET_LITTLE_ENDINA 1#de ...

  3. Semaphores

    信号量和P,V原语的使用可归纳为三种情形: 把信号量视为加锁标志位,其目的是为了实现对某个唯一的共享数据的互斥访问,如各个进程间的某共享变量,数据库中的某个记录. 共享数据的值与信号量本身的值没有直接 ...

  4. java基础篇 之 集合概述（List）

    list,有序集合,元素可重复 LinkedList:底层用链表实现,查找慢,增删快.为什么?? ArrayList:底层用数组实现,查找看,增删慢.为什么?? Vector:跟ArrayList一样 ...

  5. jQuery中val() text()和html()的区别

    2020年4月21日 16:48:11 jQuery 学习 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.text() 它可以设置和获取起始标 ...

  6. Go实战面试备忘录

    原文地址:https://blog.likeli.top/posts/面试/go面试备忘录/ 一个小厂的面试,记录一下,答案不对的,请帮忙更正下 go部分 map底层实现 map底层通过哈希表实现 s ...

  7. 转载-git使用之忽略不需要上传的文件的几种方式

    在我们使用git 的时候通常会遇到一些问题,一些文件我创建了但是我并不想上传或者有些文件我修改了但是并不想上传(为了适应个自己的开发环境),但是在每次git status的时候总能看到它,不仅感到很心 ...

  8. Excel+Python：分组名单

    各部门的社保.公积金.全勤奖.工衣.工龄奖.罚款等名单,要统计出来,A4纸横向排版.要么发群里通知,要么打印给相应主管.部门放一列,相应部门名单放一个cell里面. 公开透明后,人头不对.人名不对,各 ...

  9. SQLserver分库分表

    https://blog.csdn.net/ExceptionalBoy/article/details/78851327

  10. Java UDP小结

    UDP: * 发送端                                                                                           ...