文档章节

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

 

 

 

© 著作权归作者所有

共有 人打赏支持
Chason-洪
粉丝 12
博文 78
码字总数 65754
作品 0
漳州
程序员
javascript学习思维导图

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

IT智云编程
09/12
0
0
学习Javascript的8张思维导图

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

thinkyoung
2014/09/23
0
0
如果想成为一名顶尖的前端,这份书单你一定要收藏!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏 作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路...

腾讯云加社区
09/17
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
网易音乐前端实习程序员面试的10个问题,你会几个?

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

W3Cschool
04/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部