在使用谷歌浏览器进行前端开发的时候,console作为控制台的一个主要方法,相信大家都用过,一般都是用console.log()来输出部分内容,但是console还有很多强大之处,下面主要说一下console的更重强大的地方:
首先在chrome控制台的console中输入console.就会出现如下:
console的属性
后面出现的都是console的方法,下面来主要说明一下这些方法:

1、console.assert(message1, message2)
message1: Boolean类型,当为false的时候会输入message2
message2: 一般情况下是字符串,表示一些具体的信息
例如:

1
2
3
4
var flag = false;
console.assert(flag, "可以输出");
var flag2 = true;
console.assert(flag2, "不会输出");

console.assert(message1, message2)
2、 console.clear();
用于清空console控制台
console.clear()
3、 console.count()
使用console.count()可以计算某段代码的执行次数。具体看下面这个例子

1
2
3
4
5
6
function array(){
console.count();
}
for(var i = 0; i< 10; i++){
array();
}

console.count()
4、 console.debug()
可用于代码调试,chrome已经将其做成界面化操作,这里就不多说了。
5、console.dir()和console.dirxml()
将DOM结点以Js对象的形式输出到控制台,例如:在任何一个网页中的console控制台执行下面代码

1
console.dir($("body"));

console.dir($("body"))

1
console.dirxml($("body"));

console.dirxml($("body"))
6、 console.log()/console.info()/console.warn()/console.error()
打印内容/输出信息/输出警告/输出错误

1
2
3
4
console.log("打印内容");
console.info("输出信息");
console.warn("输出警告");
console.error("输出错误");

console.log()/console.info()/console.warn()/console.error()
7、 console.log()
console.log()不光可以打印内容,它还可以添加很多配置来达到不同的目的:
| 指示符 | 输出 |
| ————- | ————- |
|%s|格式化输出一个字符串变量。|
|%i or %d|格式化输出一个整型变量的值。|
|%f|格式化输出一个浮点数变量的值。|
|%o|格式化输出一个DOM对象。|
|%O|格式化输出一个Javascript对象。|
|%c|为后面的字符串加上CSS样式|

1
console.log("%c内容", "font-size:20px; color:red;");

console.log()
8、console.group()/console.groupCollapsed()/console.groupEnd()
console.group(): 输出一组内容的开始
console.groupCollapsed(): 输出组的标题
console.groupEnd(): 输出组的结束

1
2
3
4
console.group("组1");
console.groupCollapsed("组1的标题");
console.log("组1的内容");
console.groupEnd();

console.group()/console.groupCollapsed()/console.groupEnd()
9、 console.markTimeline()已经过时,请使用console.timeStamp()代替
console.markTimeline()
console.timeStamp()是实现一个时间戳。
10、 console.profile()/ console.profileEnd()
查看CPU的使用情况,可直接使用界面化的,
console.profile()/ console.profileEnd()
11、 console.table()
将数据内容以表格的形式进行展示

1
2
var data = [{"name": "Bob","age": 8},{"name": "Roce","age": 15},{"name": "Blu","age": 10}];
console.table(data);

console.table()
12、 console.time() / console.timeEnd()
可用于审查一段代码的耗时情况

1
2
3
4
5
6
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");

console.time() / console.timeEnd()
13、 console.trace() 可以打出js的函数调用栈,可以用界面化的操作
14、console.constructor(message)

1
console.constructor("number");

console.constructor(message)

1
console.constructor([1,2,3])

console.constructor([1,2,3])

水平垂直居中在页面的布局中还是会经常用到的,比如讲一个图片水平居中显示?

我们都知道水平居中的时候我们可以使用margin: 0 auto;,但是在垂直方向上使用margin: auto 0;确是无效的。这是为什么呢?

说到这里就设计到宽度计算和高度计算了:

宽度计算

默认的宽度规则是“适应于父级”规则。(是默认,那当然就是所有啦)
W3 CSS 2.1 第十章里为常规流替换和非替换块级元素定义了这个算式:

1
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

这里需要一张盒子模型,借助于盒模型的图片我们可以很清楚的理解宽度的计算方法。

同时为几项auto设置了额外的算法:

  1. If there is exactly one value specified as ‘auto’, its used value follows from the equality.
  2. If ‘width’ is set to ‘auto’, any other ‘auto’ values become ‘0’ and ‘width’ follows from the resulting equality.
  3. If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

大致意思就是

  1. 如果有一个值指定为“自动”,则它的使用值是从等式中提取的。
  2. 如果“宽度”设置为“自动”,则任何其他“自动”值都将从结果相等中变为“0”和“宽度”。
  3. 如果“左边的”和“右边的”是“自动的”,它们的使用值相等。这个水平将元素集中在包含块的边上。这就是auto可以水平居中的原因。

对于绝对定位元素,计算公式如下:

1
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block

加入了left和right两个值,依然可以使用margin: 0 auto;来实现水平居中。代码如下:

1
2
3
4
5
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 200px; //如果未设置宽度,则宽度默认为父元素的宽度

高度计算

This section also applies to block-level non-replaced elements in normal flow when ‘overflow’ does not compute to ‘visible’ but has been propagated to the viewport.

If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0. If ‘height’ is ‘auto’, the height depends on whether the element has any block-level children and whether it has padding or borders:

The element’s height is the distance from its top content edge to the first applicable of the following:

  1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
  2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child’s bottom margin does not collapse with the element’s bottom margin
  3. the bottom border edge of the last in-flow child whose top margin doesn’t collapse with the element’s bottom margin
  4. zero, otherwise

大致意思就是:
本节也适用于在“溢出”未计算为“可见”但已传播到视空间的正常流中的块级未替换元素。
如果“边距顶部”或“边距底部”是“自动”,它们的使用值是0。如果“高度”是“自动”,则高度取决于元素是否有任何块级别的子元素,以及是否有填充或边框:

元素的高度是从它的顶部内容边缘到第一个适用的距离:

  1. 如果框具有一行或多行的内联格式化上下文,则最后一行框的底部边缘
  2. 如果子底边距不在元素的底部边缘折叠,那么最后一个子元素的底部(可能是折叠的)边缘的底部边缘。
  3. 最后一个子元素的底部边界边缘,其顶部边距不会因元素的底部边距而折叠。
  4. 否则为0

对于绝对定位元素,计算公式如下:

1
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block

因此margin-top: auto; margin-bottom: auto;top: 0;bottom: 0;,可以让绝对定位元素垂直居中,代码如下:

1
2
3
4
5
6
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
height: 200px; //如果未设置高度,则宽度默认为父元素的高度

既然使用绝对定位可以实现水平居中和垂直居中,那自然而然就可以实现水平垂直居中,代码如下:

1
2
3
4
5
6
7
8
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px; //如果未设置宽度,则宽度默认为父元素的宽度
height: 200px; //如果未设置高度,则宽度默认为父元素的高度;如果宽度和高度都未设置,则充满整个父元素。

另外使用该方法也可以实现当子元素的高度的大于父元素,并且仅希望显示父元素垂直方向中间一块的内容(图片多适用)。

下面展示一个例子,如图,我们金希望显示中间的汽车:

html结构:

1
2
3
<div class="container">
<img src="timg.jpg">
</div>

css布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 500px;
height: 135px;
overflow: hidden;
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
}

显示结果如图所示:

html5本地存储localStorage 存储json对象存储格式问题
localStorage.setItem(att)会自动将att存储成字符串形式,如:

1
2
3
4
var arr = [1,2,3];
localStorage.setItem("temp", arr);
typeof localStorage.getItem("temp"); // "string"
localStorage.getItem("temp"); //"1,2,3"

但值得注意的是,localStorage.setItem()却不会自动将Json对象转成字符串形式,如:

1
2
3
4
var obj = {"a": 1,"b": 2};
localStorage.setItem("temp2", obj);
typeof localStorage.getItem("temp2"); // "string"
localStorage.getItem("temp2"); // "[object Object]"

用localStorage.setItem()正确存储json对象方法是:存储前先用JSON.stringify()方法将json对象转换成字符串形式,如:

1
2
3
4
5
var obj = {"a": 1,"b": 2};
obj = JSON.stringify(obj);
localStorage.setItem("temp2", obj);
typeof localStorage.getItem("temp2"); // "string"
localStorage.getItem("temp2"); // "{"a":1,"b":2}"

后续要操作该json对象,自然得将之前存储的json字符串先转成json对象再进行操作,如:

1
obj = JSON.parse(localStorage.getItem("temp2")); //Object {a: 1, b: 2}

操作完,存储信息前,记得再转换下格式:obj=JSON.stringify(obj);

另外:localStorage.getItem(att),若att未定义该语句会返回null值,而不是undefined

在项目中,针对一些时间处理的时候,难免会遇到要计算某年某月有多少天,这个大家都知道:一、三、五、七、八、十、腊(十二月),是31天,四、六、九、十一是30天,二月又分为闰年29天、非闰年28天,但是这样的话就有会涉及到判断闰年,就比较麻烦,那有没有什么简单的方法呢?答案是有的:

javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天(1~31),当设置为0的时候,getDate()返回的就是最后一天,刚好对应我们需要的值。

下面是一个获取某年某月的简单方法:

1
2
3
4
5
6
7
8
9
10
11
/**
* 计算某年某月有多少天
* @param {[number]} year 某年
* @param {[number]} month 某月
* @return {[number]} 某年某月有多少天
*/
function getDaysInYearMonth(year, month){
month = parseInt(month, 10) + 1;
var date = new Date(year, month, 0);
return date.getDate();
}

上段时间在项目中需要将方形图片处理为圆形图片,你可能会说直接用css设置border-radius: 50%就可以了,但是项目中还要将此图片的圆形图片作为一部分利用canvas将其绘制到一张背景图上面,所以就有了为何要用canvas来处理了。

我们知道 <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。我将本例中的主要处理函数封装为一个方法,可以直接使用。

例子

你可以直接点击此处查看 例子 ,先一睹为快。

参数

参数 描述
img 图片(img)对象
oldImgWidth 原始图片(img)的实际宽度(非css设置的)
oldImgHeight 原始图片(img)的实际高度(非css设置的)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
* 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
* @param {[type]} img 图片(img)对象
* @param {[number]} oldImgWidth 原始图片(img)的实际宽度(非css设置的)
* @param {[number]} oldImgHeight 原始图片(img)的实际高度(非css设置的)
* @return {[type]} return base64 png图片字符串
*/
function circle_image(img, oldImgWidth, oldImgHeight) {
var width, height, canvas, contex, circle;
if (img.width > img.height) {
width = img.height;
height = img.height;
} else {
width = img.width;
height = img.width;
}
canvas = document.createElement('canvas');
if (!canvas.getContext) { // 判断浏览器是否支持canvas,如果不支持在此处做相应的提示
console.log('您的浏览器版本过低,暂不支持。');
return false;
}
canvas.width = width;
canvas.height = height;
contex = canvas.getContext("2d");
circle = {
x: width / 2,
y: height / 2,
r: width / 2
};
contex.clearRect(0, 0, width, height);
contex.save();
contex.beginPath();
contex.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
contex.clip();
contex.drawImage(img, 0, 0, oldImgWidth, oldImgHeight, 0, 0, width, height);
contex.restore();
return canvas.toDataURL('image/png');
}