文档章节

javascript进阶(一)

Chason-洪
 Chason-洪
发布于 2017/05/04 14:50
字数 686
阅读 21
收藏 0
COS

获取元素信息

    相对浏览器视窗的位置,

    getClientRects获取元素占据页面的所有矩形区域 

    getBoundingClientRect获取元素位置 

随机数在(min-max)范围内(包括最小值)

parseInt(Math.random()*(max-min+1)+min,10);

移动端rem布局

方法一(来自aui):

html{
	font-size: 20px;
}

@media only screen and (min-width: 400px) {
	html {
		font-size: 21.33333333px !important;
	}
}
@media only screen and (min-width: 414px) {
	html {
		font-size: 21px !important;
	}
}
@media only screen and (min-width: 480px) {
	html {
		font-size: 25.6px !important;
	}
}

方法二:

iphone6的750设计图.

图中的元素大小/20=实际大小rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*20+ 'px';

Math.cos和Math.sin的用法

iframe与父页面的通信

JS判断当前页面是电脑打开还是移动端打开的

var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    console.log("phone");
} else {
    console.log("pc");
}

禁止|恢复页面滚动

function handler() {
    event.preventDefault();
    event.stopPropagation();
}
document.body.addEventListener('touchstart',handler,false); //静止页面滚动
document.body.removeEventListener('touchstart',handler,false); //恢复页面滚动

监听div内容发生变化(插入发生变化)

$("div").on('DOMNodeInserted', function(e) {
    console.log("我变化了");
});

js获取上传图片的路径

<input class="upload-file" type="file" id="file" accept="image/*" multiple/> //增加multiple属性可选择拍摄和图库等。如果没有这个属性,只能拍摄
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
};
$("#file").on("change",function(e){
    var url=getObjectURL(this.files[0]);
    $("img").attr("src",url)
});
        //注:
// !!!!!! // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 $('body').append($('<img/>').attr('src', imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); }

图片路径转Base64

function getBase64(url){
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
    var Img = new Image(),
        dataURL='';
    Img.src=url;
    Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
            width=Img.width, //确保canvas的尺寸和图片一样
            height=Img.height;
        canvas.width=width;
        canvas.height=height;
        canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
        dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL(Base64)
    };
}

 

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: css(1)
下一篇: 移动端1px的问题
Chason-洪
粉丝 12
博文 79
码字总数 65942
作品 0
漳州
程序员
私信 提问
javascript学习思维导图

JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流程控制 JavaScript 数组 JavaScript 函数基础 JavaScript 字符串函数 JavaScript 正则表达式 DOM 基本操作 Window 对象...

IT智云编程
09/12
0
0
Nodejs系列文章之:javascript代码进阶篇

作者: RobanLee (Code maker, PHP,JS,NODEJS,PYTHON, blog:http://my.oschina.net/robanlee) javascript & nodejs 一些进阶知识: 1. 如何快速进行string => int 的转换? 大家一般首先想到的就......

_dedecms
2014/05/07
0
2
网易音乐前端实习程序员面试的10个问题,你会几个?

近日,w3cschool app开发者头条上分享了网易音乐前端实习程序员面经,引来了不少程序员粉丝们的围观。 在分享网易音乐前端实习面试问题之前,w3cschool先跟小伙伴们分享前端学习干货: 0、h...

W3Cschool
04/17
0
0
lua中获取未来某时间点的时间戳

最近在做游戏定时推送,犹如第二天9点通知玩家领取奖励之类的需求,要求获取第二天9点的时间戳,以前用JS写过类似的需求,JS中的Date类用起来比较方便,很多东西已经帮忙弄好了,最主要的还是...

熊友良
2014/12/01
0
0
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ui2code中的深度学习+传统算法应用

背景 在之前的文章中,我们已经提到过团队在UI自动化这方面的尝试,我们的目标是实现基于 单一图片到代码 的转换,在这个过程不可避免会遇到一个问题,就是为了从单一图片中提取出足够的有意...

阿里云官方博客
19分钟前
2
0
1-2 【包子mysql系列】, 对mysql的innoDB加锁分析

innoDB的事务,是基于锁来实现的,用到事务不自然就会用到锁,而如果对锁理解的不通透,很容易造成线上问题。 数据库加锁的分析,和事务的引擎,隔离级别,索引,主键索引都有关系, 如果去考...

爱吃大肉包
32分钟前
0
0
插入排序

/** * 插入排序 * @Title: insert * @Description: TODO(这里用一句话描述这个方法的作用) * @param 参数 * @return void 返回类型 * @throws */ static void insert(int[] arr ){ for(int i......

yzzzzzzzz
35分钟前
1
0
python Kmeans算法解析

一. 概述 首先需要先介绍一下无监督学习,所谓无监督学习,就是训练样本中的标记信息是位置的,目标是通过对无标记训练样本的学习来揭示数据的内在性质以及规律。通俗得说,就是根据数据的一...

终日而思一
35分钟前
2
0
Nginx+Keepalived实现站点高可用

Nginx+Keepalived实现站点高可用

吴伟祥
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部