2017/8/11日常笔记——前端小积累

一、小知识积累

1、控制input输入框只能输入数字：

<input οnkeyup="value=value.replace(/[^\d]/g,'')" />

2、控制input输入框输入金额（带符号“.”）：

<input οnkeyup="value=value.replace(/[^\d.]/g,'')" />

3、同时匹配手机号和国内座机号正则表达式：^((0\d{2,3}-\d{7,8})|(1[3578]\d{9}))$

4、匹配金额（小数点后两位）正则表达式：/^(([1-9][0-9]*)|(0)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/

5、一般情况下我们很少使用绝对定位，但是如果我们需要使用到z-index时，就必须设置绝对定位，否则不会生效。还有一个需要注意的是，绝对定位并不是完全写死位置，当我们设置left/top为百分比的时候，他们就会自动计算位置。

例子：

#img-show{
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 102;
    margin-left: -300px;
}

在这个样式里面，我所做的是希望我的一张宽度为600px的图片能够在屏幕居中。所以我先设置left：50%那么图片的左边框就会移到屏幕中央，这个时候，我们只需要将图片再像左移动图片一半的宽度也是300px就可以实现图片居中了。

6、我们数据库里面存放的日期很多时候都是存放的时间戳，所以我们在页面显示的时候，我们需要处理为年月日+时分秒。

例子：

/**
 * 处理时间戳为年月日+时间
 * @param {Object} timeStamp
 */
handleTStamp: function(timeStamp) {
	var newDate = new Date(Number(timeStamp));
	var nYear = newDate.getFullYear();
	var nMonth = newDate.getMonth() + 1;
	//小于两位数,添加前缀0
	if(nMonth < 10) nMonth = "0" + nMonth;
	var nDate = newDate.getDate();
	if(nDate < 10) nDate = "0" + nDate;
	var nHour = newDate.getHours();
	if(nHour < 10) nHour = "0" + nHour;
	var nMinute = newDate.getMinutes();
	if(nMinute < 10) nMinute = "0" + nMinute;
	var nSecond = newDate.getSeconds();
	if(nSecond < 10) nSecond = "0" + nSecond;
	var resultDate = nYear + "-" + nMonth + "-" + nDate + " " + nHour + ":" + nMinute + ":" + nSecond;
	return resultDate;
}

一般我们会写一个DateUtils来专门处理不同类型的日期。写Utils是非常必要的，因为可以大大的减小我们的工作量，非常的方便，但是需要保证其正确性。

7、在涉及到图片（文件）上传时，我还没有接触到相关的插件，于是我使用了最原生的input标签。这里参照了一位大佬的案例，但是我找不到是谁了，最后稍微修改了一下。使用方法如下：

<input id="imgFile" type="file" οnchange="selectImage(this);" />
<img id="image" src="" />

JS:通过input标签拿到，然后再传到对应的img标签进行显示。

/**
 * 获取图片
 */
var image = '';

function selectImage(file) {
	if(!file.files || !file.files[0]) {
		return;
	}
	var reader = new FileReader();
	reader.onload = function(evt) {
		document.getElementById('image').src = evt.target.result;
		image = evt.target.result;
	}
	//console.log('------------------------------'+image);
	reader.readAsDataURL(file.files[0]);
	document.getElementById('del-s').style.display = 'block';
}

选中图片之后，是允许删除所选图片的。操作入下：

<div id="del-s" >
    <a οnclick="del(this)">删除</a>
</div>

上面的html中有设置该标签原先是不可见的，在选择图片完成后才显示。接下来是点击删除之后移除所选图片，清除input标签值对应的JS:

function del(e) {
	document.getElementById('image').src = '';
	var obj=document.getElementById('imgFile');
	obj.outerHTML=obj.outerHTML;
	document.getElementById('del-s').style.display = 'none';
}

这里清除input标签的值有两种方式，这是其中一种。还有一种如下：

	var ob=document.getElementById('imgFile');
	obj.Select();
	document.selection.clear();

好啦，这是我作为新手的第一篇博文，主要是希望记录下来一些有用的东西。要是有幸被人看到的话，还请大家多多指教。