博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js的一些实用的小技巧
阅读量:5021 次
发布时间:2019-06-12

本文共 3792 字,大约阅读时间需要 12 分钟。

移动端自适应:

移动端的编写首先需要在header写入以下内容来表示页面是以不缩放的形式展示的:

移动端需要做适配,可以用rem为单位来编写css,基于某一尺寸的UI设计稿来编写HTML和CSS,以下代码可以用来适配不同尺寸屏幕来显示:

document.addEventListener("DOMContentLoaded", function() {	// 适配	var clientWidth = document.documentElement.clientWidth < 640 ? document.documentElement.clientWidth : 640;	document.documentElement.style.fontSize = clientWidth / 7.5 * 2 + 'px'; });

 如果要想显示的更加清晰的话,可以利用手机的设备像素比来设置viewport:

var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

解决ios上输入框与div左边对不齐的问题

在Iphone上会出现像input和textare等输入框元素里面的输入文字与同一层级的别的元素里面的文字没有对齐(具体原因不清楚),可以使用以下方法使之对齐:

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){	$('textarea').css('margin-left', '-3px');}

本地图片选择后生成的URL是随机的

如下:

var URL = window.URL || window.webkitURL;var fileURL = URL.createObjectURL(file);

 如果用fileURL来判断是否为同一个文件将是不可行的,因为同一个文件生成的fileURL是不相同的

autoprefixer

autoprefixer插件可以让你只写主流的CSS,它会编译成兼容的css

浏览器返回页面的处理

不同浏览器对返回页面的处理不同,有的(如chrome,微信)会从新执行返回页面的js,有的(如Safari,Firefox)则会继续执行没有执行完的 js,如果返回页面上的某一部分需要数据同步的话,可以使用以下代码:

$DOM.on('click',function(){	back();	// 跳转URL});function back() {	setTimeout(function(){		// 从服务器上拉去需要同步的数据	},1000);}

在输入法输入汉字拼音时的计数问题

用输入法输入汉字时,会先计数拼音的数目,敲回车后才会把正确的输入字符进行计数,这样就很不好了,可以利用如下方法进行处置:

compositionstart

  当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend

  当浏览器是直接的文字输入时, compositionend会以同步模式触发.

以下为代码:

var inputType = false; $content.on('input',function () {        if (!inputType) {            //TODO 进行计数        }    });    $content.on('compositionstart',function(){        inputType = true;    });    $content.on('compositionend',function(){        inputType = false;    });

阻止页面滑动

有时候需要弹出浮层阻止页面滚动来达到浮层占据整个屏幕,并使得后面的内容不随着手势的滑动而滚动的效果。

下面的方法可以阻止页面滚动和取消阻止页面滚动。

function preventDefault(e) {        e.preventDefault();    }    // 阻止页面滑动    function unable() {        document.addEventListener('touchmove', preventDefault);    }    // 取消阻止页面滑动    function enable(){        document.removeEventListener('touchmove',preventDefault);    }

函数节流

函数节流是为了降低方法执行次数,来提高效率的,主要用在滚动事件上。代码如下:

var i = 0;    function throttle(method, context) {        clearTimeout(method.tId);        method.tId = setTimeout(function() {            method.call(context);        }, 100);    }    function showIndex() {        console.log(i++);    }    $(document).scroll(function() {        throttle(showIndex);    });

上面代码的时间设置为100毫秒,可以根据不同的需要设置不同值。

如果是动画的话,推荐根据浏览器的频率去做绘画,如js中的requestAnimationFrame()方法。

DOM结构解析

有时候在执行js时需要先拿到dom结构才不会报错,此段代码为dom结构解析的代码

/** * 截函数 **/ function domReady(f) {    if(domReady.done) return f();    if(domReady.timer) {        domReady.ready.push(f);    } else {        isDOMReady();        domReady.ready = [f];        domReady.timer = setInterval(isDOMReady, 13);    }}/*** 判断dom结构是否加载**/function isDOMReady() {    if(domReady.done) return false;    // 判断依据    if(document && document.getElementsByTagName && document.getElementById && document.body) {        clearInterval(domReady.timer);        domReady.timer = null;        for(var i = 0,len = domReady.ready.length; i < len; i++) {            domReady.ready[i]();            domReady.ready = null;            domReady.done = true;        }    }}domReady(function(){    alert('DOM结构已经解析好了')});

判断一些浏览器的特性

直接看代码

var userAgent = {        windows:ua.match(/Windows NT ([\d.]+)/),        weibo: ua.match(/__weibo__([\d.]+)/), // 新浪微博        weixin: ua.match(/MicroMessenger\/([\d.]+)/), // 微信        qq: ua.match(/QQ\/([\d.]+)/), // qq        ios: ua.match(/(iPhone|iPad|iPod|iOS)/i),        android: ua.match(/Android ([\d.]+)/),        sohunews: ua.match(/SohuNews\/([\d.]+)/),        sohusns: ua.match(/SohuSNS\/([\d.]+)/)}

 

转载于:https://www.cnblogs.com/WeiRuifeng/p/6075580.html

你可能感兴趣的文章
easyui源码翻译1.32--Dialog(对话框窗口)
查看>>
阿里架构师,讲述基于微服务的软件架构模式
查看>>
Eclipse导入maven项目时,Pom.xml文件报错处理方法
查看>>
01、JAVA开发准备
查看>>
asp.net mvc 错误处理 - 自定义报错处理,生成错误日志
查看>>
Linux centos ssh
查看>>
R语言之避免for循环示例
查看>>
[转]jQuery 选择器和dom操作
查看>>
Jenkins+Maven+SVN快速搭建持续集成环境(转)
查看>>
bootstrap 媒体查询
查看>>
杜教筛
查看>>
《Ext JS模板与组件基本知识框架图----模板》
查看>>
txmpp
查看>>
微信开发时调用jssdk,在安卓设备中成功调用;在ios设备中返回错误消息:config fail,无其他具体错误消息,且接口权限显示获取ok,无法调用...
查看>>
【Github教程】史上最全github使用方法:github入门到精通
查看>>
抽象工厂模式(Abstract Factory)
查看>>
luogu1373 小a和uim之大逃离 (dp)
查看>>
Redis的Pub/Sub客户端实现
查看>>
SQL日常问题和技巧——持续更新
查看>>
springMVC入门(一)------springMVC基本概念与安装
查看>>