javascript - Mobile date selection written in native js, how to adapt it to the page.

Question

How to adapt the mobile terminal date selection written in native js to the page side. . . The code below was not written by me. I found it from the Internet.

Date control address link: https://github.com/xfhxbb/lCa...

I downloaded it from here. .

//触摸开始
        function gearTouchStart(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            clearInterval(target["int_" + target.id]);
            target["old_" + target.id] = e.targetTouches[0].screenY;
            target["o_t_" + target.id] = (new Date()).getTime();
            var top = target.getAttribute('top');
            if (top) {
                target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
            } else {
                target["o_d_" + target.id] = 0;
            }
        }
        //手指移动
        function gearTouchMove(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            target["new_" + target.id] = e.targetTouches[0].screenY;
            target["n_t_" + target.id] = (new Date()).getTime();
            //var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight;
            var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370;
            target["pos_" + target.id] = target["o_d_" + target.id] + f;
            target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
            target.setAttribute('top', target["pos_" + target.id] + 'em');
        }
        //离开屏幕
        function gearTouchEnd(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break;
                }
            }
            var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
            if (Math.abs(flag) <= 0.2) {
                target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
            } else {
                if (Math.abs(flag) <= 0.5) {
                    target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
                } else {
                    target["spd_" + target.id] = flag / 2;
                }
            }
            if (!target["pos_" + target.id]) {
                target["pos_" + target.id] = 0;
            }
            rollGear(target);
        }
        
        
  

  
  
 在页面端怎么都没用。。。  
  

It can be scrolled on the mobile side.

Need to adapt it to the page side. .

Answer 1

Thanks for the invitation.
The PC version is useless because all its bound events are touchstart, touchmove and touchend. You can try changing it like this: first add three variables to the private variables, then add a section of code to identify the PC or mobile terminal in init, and after the identification is completed, determine whether the three variables are mobile events or PC events, and finally all event bindings are Just change it to these three variables.

Answer 2

What you intercepted is the part that implements the animation effect. After looking at the events that bind animations, they are all bound to touch events.
It should not support mouse events. I tried binding these animations directly to mouse events. Unmatch.

First you should determine whether it is PC version,
One of the methods is as follows:

function IsPC(){    
     var userAgentInfo = navigator.userAgent;  
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");    
     var flag = true;    
     for (var v = 0; v < Agents.length; v++) {    
         if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }    
     }    
     return flag;    
  }  

Then you can correspond to the binding event, and the corresponding relationship is as follows:

mousedown	touchstart	pointerdown
mouseenter		pointerenter
mouseleave		pointerleave
mousemove	touchmove	pointermove
mouseout		pointerout
mouseover		pointerover
mouseup	touchend	pointerup

Reference for this: https://mobiforge.com/design-...

You have to make the drag animation on the last page yourself. .
Another solution is to first determine the pc/mobile side.
Just call other packages directly on the pc side.
There is no need to think about how this package originally developed for the mobile side adapts to the page side.

Answer 3

Thanks for the invitation.

I personally recommend writing the PC and mobile versions separately. For a management system with a relatively complex structure, the cost and technical risk of writing responsive web pages is much higher than writing two versions for PC and mobile respectively. And from the perspective of user experience, PC and mobile have different experiences, so it is more appropriate to write them separately. It is not a big problem to write responsive pages for purely display purposes, which can be solved with responsive CSS framework.