zoukankan      html  css  js  c++  java
  • JS(移动端)自己封装移动端一些常用方法

    /**
     * Created by Administrator on 2016/7/14.
     */
    /*命名空间*/
    window.lcf = {};
    /*监听过渡结束的方法*/
    lcf.transitionEnd = function(obj,callback) {
        /*判断obj是否是一个对象 使用typeof*/
        if(!obj || typeof obj !== "object") return false;
        /*监听过渡结束事件*/
        obj.addEventListener("webkitTransitionEnd",function () {
            callback && callback();
    
        });
        obj.addEventListener("transitionEnd", function () {
            callback && callback();
        });
    };
    /*监听过渡结束的方法*/
    lcf.animationEnd = function (obj,callback) {
        /*判断obj是否是一个对象*/
        if(!obj || typeof obj !== "object") return false;
        /*监听过渡结束事件*/
        obj.addEventListener("webkitAnimationEnd",function () {
            callback && callback();
        });
        obj.addEventListener("animationEnd", function () {
            callback && callback();
        });
    };
    /*添加过渡方法*/
    lcf.addTransition =function(obj){
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        obj.style.transition = "all 1s";
        obj.style.webkitTransition = "all 1s";
    };
    /*移除过渡方法*/
    lcf.removeTransition =function(obj){
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        obj.style.transition = "none";
        obj.style.webkitTransition = "none";
    };
    /*上下定位方法*/
    lcf.setTranslateY =function(obj,translateY){
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        obj.style.transform = "translateY("+translateY+"px)";
        obj.style.webkitTransform = "translateY("+translateY+"px)";
    };
    /*左右定位方法*/
    lcf.setTranslateX =function(obj,translateX){
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        obj.style.transform = "translateX("+translateX+"px)";
        obj.style.webkitTransform = "translateX("+translateX+"px)";
    };
    /*封装tab事件方法*/
    lcf.tap = function (obj,callback) {
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        /*记录时间*/
        var startTime = 0;
        var isMove = false;
        /*手指触摸到屏幕时触发touch事件*/
        obj.addEventListener("touchstart", function (e) {
            /*响应开始时间(毫秒)*/
            startTime = Date.now();
        });
        /*滑动屏幕时触发touch事件*/
        obj.addEventListener("touchmove", function (e) {
            /*滑动*/
            isMove = true;
        });
        /*手指离开屏幕结束时触发touch事件*/
        obj.addEventListener("touchend", function (e) {
            /*判断响应时间*/
            if((Date.now()-startTime)<150 && !isMove){
                callback && callback(e);
            }
            /*重置参数*/
            startTime = 0;
            isMove = false;
        });
    
    };
    /*倒计时*/
    lcf.downTime =  function (endTime,obj,callback){
        /*基本判断*/
        if(!endTime || typeof endTime !== "string") return false;
        /*基本判断*/
        if(!obj || typeof obj !== "object") return false;
        /*获取日期的毫秒*/
        var endTime = Date.parse(endTime);
        /*定时器*/
        setInterval(function () {
            var nowTime  = +new Date();
            /*2个时间的差 毫秒*/
            var minus =endTime - nowTime;
            /*相差的天数*/
            var day = parseInt(minus/1000/60/60/24);
            /*相差的小时*/
            var hours = parseInt(minus/1000/60/60%24);
            /*相差的分钟*/
            var mintue = parseInt(minus/1000/60%60);
            /*获取相差的秒*/
            var second = parseInt(minus/1000%60);
    
            obj[0].innerHTML = parseInt(hours/10);
            obj[1].innerHTML = hours%10;
            obj[3].innerHTML = parseInt(mintue/10);
            obj[4].innerHTML = mintue%10;
            obj[6].innerHTML = parseInt(second/10);
            obj[7].innerHTML = second%10;
    
        },1000);
        callback && callback();
    };
    

      

  • 相关阅读:
    centos6.8添加crontab定时启动任务
    centos7用户最大进程限制导致的问题排查
    centos ftp 服务器搭建
    centos6.8的坑
    华为云centos服务器挂载云硬盘
    华为云windows开启特定端口
    华为云centos上命令
    排查机器服务无法使用步骤
    高(0.10.X以上版本)低(0.10.X以下版本)版本kafka如何共存
    PHP array_column重新构建二维数组
  • 原文地址:https://www.cnblogs.com/lcf1314/p/5679827.html
Copyright © 2011-2022 走看看