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();
};

  

时间: 2024-10-11 07:32:18

JS(移动端)自己封装移动端一些常用方法的相关文章

JS学习十四天----server端运行JS代码

server端运行JS代码 话说,当今不在client使用JS代码才是稀罕事.因为web应用的体验越来越丰富,client用JS实现的逻辑也越来越多,这造成的结果就是某些差点儿一致的逻辑须要在client和服务端各实现一遍,大牛们当然不甘心啊!幸运的是,我们能够在server端运行JS代码,谁让JS抱了一根大腿呢... 比如,现在在client使用JS进行验证已经是个标准,他能够有效避免用户在正常情况下提交错误的数据,增强用户体验.当然,server端的验证也是不可缺少的,由于这才是安全性的体现

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件.接下来给大家简单总结一下移动端的事件. 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小. ?双击缩放的原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

搜集的一些RTMP项目,有Server端也有Client端

查询一些RTMP的协议封装时找到了一些RTMP开源项目,在这里列举一下,以后有时间或是有兴趣可以参考一下: just very few of them. Red5 only contains a server-implementation (in java). The python project rtmpy aims to be a freesoftware implementation of an RTMP library, whilst Tape intends to be a fulls

在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现Web端直传,服务端签名直传并设置上传回调的实现流程

在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github地址:https://github.com/aliyun/aliyun-oss-php-sdk 2.复制aliyun-oss-php-sdk-master\src\OSS至passport.hmwis.com\ThinkPHP\Library\Vendor\OSS,如图1.2 复制aliyun-os

07-移动端开发教程-移动端视口

老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的.老马接下来就从初学者能看懂的角度去讲解视口和适配的方案. 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度.比如:iphone6/7是4.7寸,iphone6/7p是5.5寸. 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0i

PC端网页和移动端网页,自己做的总结

1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化. 2.在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的. 3.在布局上,移动端开发一般是要做到布局自适应的,需要熟练使用rem布局,还有百分比流式布局. 4.在动画处

Web端测试和移动端测试的区别

之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点标记. 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上,个人一般习惯安装微信的windows版本,通过文件传输助手发送到PC端.还有一种比较便捷的方式,将手机用数据线连接到电脑,本地配置android的运行环境,下载asm.jar,在cmd运行java -jar asm.jar,即可实时