缘由

今天看到一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a = "0";
if(a){
console.log(true);
}else{
console.log(false);
}
// true

var b = 0;
if(b){
console.log(true);
}else{
console.log(false);
}
// false

按照javascript来说"0" == 0 为true,那为什么会有两种答案呢?

结论

实际上是因为:

不要将原始布尔值的true和false与Boolean对象的真或假混淆。任何一个值,只要它不是 undefinednull0NaN或空字符串(""),那么无论是任何对象,即使是值为假的Boolean对象,在条件语句中都为真。

上面例子中的a是假的Boolean对象,但是在条件语句中依旧为真,所以最后输出的是true;而b是0,所以在条件语句中为false,输出false。

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
var c = undefined;
if(c){
console.log(true);
}else{
console.log(false);
}
// false

var d = null;
if(d){
console.log(true);
}else{
console.log(false);
}
// false

var e = NaN;
if(e){
console.log(true);
}else{
console.log(false);
}
// false

var f = ""; // 空字符串
if(f){
console.log(true);
}else{
console.log(false);
}
// false

var g = " "; // 空格,虽然在javascript中 `" " == false`为true,但是它是一个假的Boolean对象,所以在条件语句中依旧为真。
if(g){
console.log(true);
}else{
console.log(false);
}
// true

var h = [];
if(h){
console.log(true);
}else{
console.log(false);
}
// true

var i = {};
if(i){
console.log(true);
}else{
console.log(false);
}
// true

var j = function(){};
if(j){
console.log(true);
}else{
console.log(false);
}
// true

var k = new Boolean(false);
if(k){
console.log(true);
}else{
console.log(false);
}
// true

var l = false;
if(l){
console.log(true);
}else{
console.log(false);
}
// false

功能描述

在项目中我们经常会遇到要对textarea进行输入字符数的限制,并在下方提示共可输入多少文字,已输入多少,还可输入多少的类似功能。

所以就有了下面封装好的这个函数,不管是以那种方式输入,字数都可以完美的限制,可以点击此处查看例子

代码

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
39
40
41
42
43
44
45
46
47
48
49
50
/**
* textarea的字符数限制
* @param {*} options
* element [string] Dom对象的id
* length [number] 可输入的总长度
* hadWrite [boolean] 是否显示已输入多少的内容,true显示,false不显示,默认为true
* canWrite [boolean] 是否显示还可输入多少的内容,true显示,false不显示,默认为true
*/
function textareaWriteLength(options) {
var jsWriteBox = $(options.element).parentsUntil(".js-write-box").parent(".js-write-box");
var jsAllWriteBox = jsWriteBox.find(".js-all-write-box"),
jsHadWriteBox = jsWriteBox.find(".js-had-write-box"),
jsCanWriteBox = jsWriteBox.find(".js-can-write-box");
var jsAllWriteLength = jsWriteBox.find(".js-all-write-length"),
jsHadWriteLength = jsWriteBox.find(".js-had-write-length"),
jsCanWriteLength = jsWriteBox.find(".js-can-write-length");
jsAllWriteLength.html(options.length);
if (options.hadWrite && options.canWrite) {
jsAllWriteBox.append('<span>,</span>');
jsHadWriteBox.append('<span>,</span>').css("display", "inline");
jsHadWriteLength.html(0);
jsCanWriteBox.css("display", "inline");
jsCanWriteLength.html(options.length);
} else if (options.hadWrite) {
jsAllWriteBox.append('<span>,</span>');
jsHadWriteBox.append('<span>。</span>').css("display", "inline");
jsHadWriteLength.html(0);
} else if (options.canWrite) {
jsAllWriteBox.append('<span>,</span>');
jsCanWriteBox.css("display", "inline");
jsCanWriteLength.html(options.length);
} else {
jsAllWriteBox.append('<span>。</span>');
}

function textareaWriteEvent() {
console.log(1)
var _this = $(this);
var length = _this.val().length;
if (length >= options.length) {
_this.val(_this.val().substring(0, options.length));
jsHadWriteLength.html(options.length);
jsCanWriteLength.html(0);
} else {
jsHadWriteLength.html(length);
jsCanWriteLength.html(options.length - length);
}
}
$("body").on("input", options.element, textareaWriteEvent);
}

参数说明

参数 说明
element Dom对象的id
length 可输入的总长度
hadWrite 是否显示已输入多少的内容,true显示,false不显示
canWrite 是否显示还可输入多少的内容,true显示,false不显示

使用说明

1
2
3
4
5
6
textareaWriteLength({
element: "#textareaWriteLength",
length: 120,
hadWrite: true,
canWrite: true
});

详情可查看: http://www.fxss5201.cn/project/html/textarea/textareaWriteLength/

最近在项目中遇到一个时间格式转换的要求。

转换规则

  1. 如果时间戳(下文中提到的时间戳都指向要转换的时间戳)在今天,则返回的格式为 “HH:mm:ss”
  2. 如果时间戳在昨天,则返回的格式为 “昨天 HH:mm:ss”
  3. 如果时间戳在本周内并且非昨天,假如说在周一,则返回的格式为 “周一 HH:mm:ss”
  4. 如果时间戳在本年内并非一周内,假如说在1月12日,则返回的格式为 “01月12日 HH:mm:ss”
  5. 如果时间戳在今年以前的日期内,则返回的格式为 “yyyy年MM月dd日 HH:mm:ss”

例子

在网上也有看到的一些,但具体和规则有些出入,所以就自己写了一个,可以先点击此处体验一下:查看

代码

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
39
40
41
42
43
44
45
46
47
48
49
50
function timeChangeFormat(timeObj) {
timeObj = timeObj * 1;
var curTime = new Date().getTime(); // 当前时间戳
var curTimeMinutes = parseInt(curTime / 1000 / 60); //当前时间分钟数
var timeObjMinutes = parseInt(timeObj / 1000 / 60); //参数时间分钟数
var timeDifference = curTimeMinutes - timeObjMinutes; // 参数时间戳与当前时间戳相差分钟

var curDate = new Date(curTime); // 当前时间日期对象
var timeObjDate = new Date(timeObj); // 参数时间戳转换成的日期对象

var timeYear = timeObjDate.getFullYear(),
timeMonth = timeObjDate.getMonth() + 1,
timeDate = timeObjDate.getDate(),
timeDay = timeObjDate.getDay(),
timeHour = timeObjDate.getHours(),
timeMinutes = timeObjDate.getMinutes(),
timeSeconds = timeObjDate.getSeconds();
var weekDayText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
// 补0操作
function addZero(num) {
return (String(num).length == 1 ? '0' : '') + num;
}
// 转换的时间戳是否与当前时间在同一周,是返回true,否则false
function isSameWeek(curDate, timeDifference) {
var day = curDate.getDay() - 1;
var hour = curDate.getHours();
var minutes = curDate.getMinutes();
var weekMinutes = day * 24 * 60 + hour * 60 + minutes; // 从当前时间算起已经过去多少分钟了
if (timeDifference <= weekMinutes) {
return true;
} else {
return false;
}
}

if (curDate.getFullYear() == timeYear && curDate.getMonth() + 1 == timeMonth && curDate.getDate() == timeDate) {
return addZero(timeHour) + ':' + addZero(timeMinutes) + ':' + addZero(timeSeconds);
} else {
var newDate = new Date((curTimeMinutes - 1440) * 60 * 1000);
if (newDate.getFullYear() == timeYear && newDate.getMonth() + 1 == timeMonth && newDate.getDate() == timeDate) {
return '昨天 ' + addZero(timeHour) + ':' + addZero(timeMinutes) + ':' + addZero(timeSeconds);
} else if (isSameWeek(curDate, timeDifference)) {
return weekDayText[timeDay] + ' ' + addZero(timeHour) + ':' + addZero(timeMinutes) + ':' + addZero(timeSeconds);
} else if (curDate.getFullYear() == timeYear) {
return addZero(timeMonth) + '月' + addZero(timeDate) + '日 ' + addZero(timeHour) + ':' + addZero(timeMinutes) + ':' + addZero(timeSeconds);
} else {
return timeYear + '年' + addZero(timeMonth) + '月' + addZero(timeDate) + '日 ' + addZero(timeHour) + ':' + addZero(timeMinutes) + ':' + addZero(timeSeconds);
}
}
}

参数说明

函数的参数为一个毫秒级的时间戳。

之前虽然写了几篇关于textarea的高度自适应的解决方案,但都不甚满意,最近从Element的源码中得到启示,就自己写了一个textarea高度自适应的jquery插件。

所以就有了本篇博客的介绍:
autoHeightTextarea自适应高度的textarea是一款jquery插件,支持链式调用,支持设置最小行数、最小高度、最大行数和最大高度,在输入文字的时候实现textarea的高度自适应。

参数说明

参数 描述
rows 可以在textarea上设置 rows 又或者传参 rows 都可以设置textarea的一个最小行数
minRows 可以在初始化的时候传参 minRows 或者在textarea上面设置 data-min-rows ,来确定textarea的一个最小行数
maxRows 可以在初始化的时候传参 maxRows 或者在textarea上面设置 data-max-rows ,来确定textarea的一个最大行数
min-height 可以在css中设置 min-height ,来确定textarea的最小高度
max-height 可以在css中设置 max-height ,来确定textarea的最大高度

使用

使用的时候就像平常使用jquery一样:

1
$("#textarea1").autoHeightTextarea();

最终效果

1
2
3
1、minRows = Math.max($("textarea").attr("rows"), $("textarea").attr("data-min-rows"), rows, minRows);
2、maxRows = Math.min($("textarea").attr("data-max-rows");
3、如果设置的rows或者代表minRows大于代表maxRows的时候,则以 maxRows 的值设置 minRows 和 maxRows。

如果要看更具体的文档说明,可点击此处查看:http://www.fxss5201.cn/project/html/textarea/autoHeightTextarea/

在做项目的时候,尤其事表单的时候,有时候input的placeholder的颜色值有点重,让我们一眼看过去分不清到底是不是已经填写的,为了更加分明,我们就需要修改一下placeholder的样式属性。

下面这段代码出自bootstrap.css中:

1
2
3
4
5
6
7
8
9
10
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}

这段代码就是设置修改placeholder的颜色值,并且作了各个浏览器的兼容。

如想看更多例子可点击查看:placeholder修改颜色/字体大小