利用CSS3新单位rem实现响应

做移动端的响应方法有很多,但是我喜欢用CSS3的新单位rem,这个单位非常好用(有个比它还好用的单位vh,不过兼容性太差,不考虑了),根据不同屏幕,设置不同的基准值,从而实现适配各个屏幕尺寸的移动设备。慕课网有一套非常不错的讲关于rem的视频,这里推荐给大家http://www.imooc.com/learn/494
rem—-CSS3中新增的单位,兼容性还不错,常用于移动端实现字体的响应,与em不同,rem根据根元素的font-size计算,所以要利用rem实现适配各个屏幕的大小,就需要根据不同的屏幕设置根元素不同的font-size的值。所以我们需要做下面的一些工作。

1.获取浏览器的宽高(对于移动设备就是设备的宽度)

代码如下:

1
2
3
4
5
6
7
8
9
10
11
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth !=='number'){
if(document.compatMode==='CSS1Compat'){
pageWidt=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidt=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}

查看全文
文件上传(二)---新XMLHttpRequest实现带进度条文件上传

前几天搞得那个文件上传,最近工作不太忙,又开始完善。这次主要添加了文件上传的进度部分,主要用到的则是XMLHttpRequest2的progress,由于我读的是《javascript高级程序设计》(第三版),这里我遇到一个关于progeress事件的坑,后面详细解答。

创建XMLHttpRequest对象

首先说说XMLHttpRequest,在IE7+浏览器中,只需要new一个XMLHttpRequest对象即可:

1
let xhr=new XMLHttpRequest();

由于现在淘宝都不再支持IE6以及7,所以这里不考虑IE7及以下浏览器关于xhr的创建方法。

查看全文
初探ES6——轮播图实践总结

  最近因为同学的一个轮播图不会写,让我萌生了用ES6写一个轮播图的想法(本人喜欢这些玩儿一些新的东西),以前就知道ES6,但是一直没有学,现在终于下决心学了,借助阮一峰老师的书ECMAScript 6 入门 和Youtube上面老外的视频学习ES6非常不错。阮一峰老师的书写的非常详细,推荐想学习的ES6的同学仔细看看。本篇文章会总结在实践中用到的ES6的知识。

模板字符串

这是我非常喜欢的ES6的特点之一,非常直观的反应出变量和字符串之间的关系,在ES5中,如果我们想在字符串中添加变量,需要用如下写法:

1
2
3
4
5
animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {
box.style.transitionDuration = '';
box.style.transform = 'translate(-800px,0)';
flag = true;
});

现在用ES6的模板字符串,可以直接把字符串和变量相结合,更加易懂。

1
2
3
4
5
animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {
box.style.transitionDuration = '';
box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;
flag = true;
});

查看全文
文件上传(一)---H5 file API,canvas

  最近公司让调研关于webUploader的图片上传中能否压缩,能否实现图片的格式转换,如果能如何实现,经过调研,这个插件可以实现文件的压缩,但是不能实现图片的格式转换,同时在调研过程中,知道了很多新的东西,H5 file API,canvas,等等,所以有了自己写一个文件上传来熟悉这些东西,所以有了本篇文章。

一.做好HTML,CSS样式

这里很简单,就是写一个HTML+CSS的文件,让我们的上传看起来像那么回事儿,这里不细说,代码如下:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fileUploader</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="upbox">
<h1>测试</h1>
<input id="uploader" type="file" multiple="multiple" name="file" accept="image/*">
</div>
<a id="test" href="">点击选择上传图片</a>
<button type="button" id="button">上传</button>
<script src="./index.js"></script>
</body>
</html>

index.css

1
2
3
4
5
6
7
.upbox{width: 100%;height: 500px;border: 3px dashed #000;position: relative;}
#uploader{display: block;width: 100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;cursor: pointer;}
h1{position: absolute;left: 45%;top: 40%;}
button{width: 100px;height: 50px;float: right;}
.img-content{width: 120px;height: 120px;border: 1px solid #000;margin: 20px;float: left;position: relative; z-index: 5;}
.img-box{width: 100%;height: 100%;}
.img-box img{display: block; width: 100%;height: 100%;}
查看全文
H5焦点管理---tabindex与document.activeElement

  周四下午测试人员提出BUG,说我写的那个类支付宝密码框在按下Tab键时候无法像原生的form表单中的input那样被激活,当时的第一反应是,我的密码框原本就是用div模拟的,怎么可能想form表单一样在Tab键时候激活呢。但是当我打开支付宝官网,按下tab键后,密码框可以被激活,这激起了我的好奇心,也就有了后来对tabindex和document.activeElement的发现。废话不多说,进入正题。

HTML tabindex属

tabindex的设置

  当Tab键用于导航时,tabindex属性规定元素的tab键控制次序,其中tabindex的值为阿拉伯数字,默认情况下越靠前的元素该值越小,所以我们可以通过人为改变tabindex的值来改变按下Tab键后可以被激活元素的激活顺序,只需要做如下设置:

1
2
3
4
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="4">
<input type="text" tabindex="3">

查看全文
H5 Canvas实现图片格式的转换

  今天早上到公司,看到CTO要求调查关于前端如何实现图片格式转换,自己上网找了下关于canvas如何实现图片格式转换,其实还是蛮简单的,但是因为网上的教程着实写的简单,而且都一样,我也是醉了,所以写下这篇博客,以记录今天的调查结果。

使用Javasript将图片写入画布

1
2
3
4
5
6
7
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
查看全文
jquery插件开发

由于公司需要写一个功能,而公司的中使用的框架是jquery,所以想到了开发jquery框架。

1.jQuery插件开发方式

jQuery插件开发方式主要有三种:
通过$.extend(),通过$.fn向jQuery添加新的方法,通过$weight()应用jQueryUI的部件工厂方式创建

2.插件中的this

在插件名字定义的这个函数内部,this指代的是在调用该插件时,用jQuery选择器选中的元素。这里的this已经是jQuery元素,无需再用美元符包装。

3.jQuery链式调用

jQuery支持链式调用,要让插件不打破这个链式调用,只需要return一下,实例如下

1
2
3
4
5
6
7
8
$.fn.myPlugin = function(){
//这里面this指的是jquery选中的元素
this.css('color','red');
return this.each(function(){
//对每个元素进行操作
$(this).append(' '+$(this).attr('href'));
})
}

查看全文
一些想法

  今天下班比较早,本来想的要看书呢,结果都走了,所以我也就下班了,回来时候回顾自己的一天,感觉今天什么都没学下,瞬间觉得自己今天没多少收获,本来早晨时候任务很多,但是很多任务都不是很明确,让我很迷茫,不知道该怎么弄,后来问了问陈哥,才发现这些任务好几个都是能完成一半,自己的强迫症瞬间犯了,我不喜欢我的任务栏中有那么多任务,但是又完成不了,着实让我觉得难受啊!

查看全文
第一篇文章

  这个星期前两天因为要发版,所以在星期一二很忙,真心累的厉害,因为要发版。终于在周四晚上发版了,大家都很拼,真心觉得公司很有前途。周四时候,我突然想起来要弄个博客,所以自己查了查,找到github与hexo,hexo生成静态页面,github提供免费服务,所以二话不说,直接闹起,在这些天的研究中,感受到了github的强大,在那上面弄项目真心感觉很爽。同时也觉得nodejs真的是非常强大,各种插件,各种玩儿。icon

查看全文