这里提到的JS被我重新更改、添加了一些方法之后,上传到了npm
,如果你使用了npm
,那么现在可以使用npm i freedate
来下载JS
虽然在JS获取格式化的时间并不难,我之前也写过怎么去获取并格式化,但是每次都要重新写也很麻烦,所以自己写了一个小JS。
function fd(timestr){
//函数名fd; 传入的参数timestr(字符串)格式应该是类似fd(Y/M/D h:m:s)
}
最简单,也是最先要走的是获取每个小部分,Y(年)、M(月)、D(日)、h(时)、m(分)、s(秒)、w(星期)
var datestr = timestr; //赋值给内部变量以便进行操作
var fdate = new Date(); //新建Date对象
var Y = fdate.getFullYear(); //获取年
var M = fdate.getMonth() + 1; //获取月 从0开始,所以得到的数值加1
var D = fdate.getDate(); //获取日
var h = fdate.getHours(); //获取小时
var m = fdate.getMinutes(); //获取分
var s = fdate.getSeconds(); //获取秒
var w = fdate.getDay(); //获取星期
但是在这里要注意的是,月、日、时、分、秒都是有小于10的数,所以我在这里需要做一个小优化,我这里是写了一个函数,以待调用,函数的作用就是把传入的数据前加入一个字符串“0”。
//对传进的值进行判断,如果小于10,则在其前面加入一个0;如输入3,返回结果为03。
function addZero(data){
if(data < 10){
data = "0" + data;
}
return data;
}
有了以上函数,需要的时候去调用就可以了;还有一个"w",w获取到的值是1~7,分别代表了周一到周日,但是不能自动转化,所以依然需要我们自己手动转换
switch (w) {
case 1:
w = '星期一';
break;
case 2:
w = '星期二';
break;
case 3:
w = '星期三';
break;
case 4:
w = '星期四';
break;
case 5:
w = '星期五';
break;
case 6:
w = '星期六';
break;
case 7:
w = '星期日';
break;
default:
w = '星期获取出错';
break;
}
好了,此时可以说,基础的准备工作就已经做好了,接下来就是判断用户需要的格式了,在第一版中我的设定是这样的
参数1:在只有一个参数是,可能是分割符和true/false;当有两个参数时,第一个不能是true或false,不然第二个参数会被忽视
参数2:主要为了表示是否有含有时分秒值为true/false,当有两个参数时p必须是Booleand,否则参数视为无效。
但是后来发现这样其实真的不方便,不如改成大家都知道的,同时都习惯的模式fd("Y/M/D h:m:s")
之后,我们要判断字符串是否是空或undefined
if(datestr == "" || datestr == undefined){
datestr = "Y/MM/DD hh:mm:ss w";
}
随后我们就可以判断字符串中的格式,因为不知道用户会使用什么样的分隔符,不好进行判断,但是我们底层的年月日时分秒是规定好的,我们可以对这些进行判断。
if(datestr.indexOf("Y") != -1){ //判断字符串中有Y时,将Y替换为获取到的年
datestr = datestr.replace("Y", Y);
}
if(datestr.indexOf("M") != -1){ //是否有M
if(datestr.indexOf("MM") != -1){ //如果有M,在判断是否有MM,如果有MM时,把月份放入addZero()函数中判断是否需要加0,然后将MM替换为有前置0的月份
datestr = datestr.replace("MM", addZero(M));
} else { //如果没有MM,则将M替换为获取到的月
datestr = datestr.replace("M", M);
}
}
// D为日 DD为有前置0的日
if(datestr.indexOf("D") != -1){
if(datestr.indexOf("DD") != -1){
datestr = datestr.replace("DD", addZero(D));
} else {
datestr = datestr.replace("D", D);
}
}
// w为星期
if(datestr.indexOf("w") != -1){
datestr = datestr.replace("w", w);
}
if(datestr.indexOf("h") != -1){
if(datestr.indexOf("hh") != -1){
datestr = datestr.replace("hh", addZero(h));
} else {
datestr = datestr.replace("h", h);
}
}
if(datestr.indexOf("m") != -1){
if(datestr.indexOf("mm") != -1){
datestr = datestr.replace("mm", addZero(m));
} else {
datestr = datestr.replace("m", m);
}
}
if(datestr.indexOf("s") != -1){
if(datestr.indexOf("ss") != -1){
datestr = datestr.replace("ss", addZero(s));
} else {
datestr = datestr.replace("s", s);
}
}
这样的判断方式让我们可以更加灵活的格式化想要的时间,有需要时,我们还可以把月日放到年的前面:2019年3月23日=>23/03/2019
代码 | 返回值 | 例子 |
---|---|---|
Y | 返回年 | 如2020 |
M | 返回月,没有前置0 | 1~12 |
MM | 返回月,有前置的0 | 01~12 |
D | 返回日,没有前置0 | 1~31 |
DD | 返回日,有前置的0 | 01~31 |
h | 返回小时,12小时制(暂未判断) | 01~12 |
hh | 返回小时,24小时制 | 01~24 |
m | 返回分钟,没有前置0 | 1~60 |
mm | 返回分钟,有前置的0 | 01~60 |
s | 返回秒,没有前置0 | 1~60 |
ss | 返回秒,有前置的0 | 01~60 |
w | 返回星期,值为:星期X | 如:星期四 |
使用总结:单个字母则是没有前置0的,双个的,都是有前置0的。
测试的例子:
- fd() =>返回值 2020/02/04 13:58:49 星期二
- fd(“Y/M/D hh:MM”) =>返回值 2020/2/4 13:58
- fd(“Y年 MM月 DD日 hh点 mm分 ss秒”) =>返回值 2020年 02年 04日 13点 58分 49秒
- fd(“现在是Y年 MM月 DD日 w”) =>返回值 现在是2020年 02月 04日 星期二
使用以上的JS我们就可以轻松做一个页面自动刷新的时钟了。
在html页面
HTML:
<div class="displayTime" id="displayTime">此处显示时间</div>
JS:
window.setInterval(function(){
document.getElementById("displayTime").innerHTML = fd();/*具体格式自选*/
},300);/*自动刷新间隔*/
如果觉得不错的话,可以在https://gitee.com/gqiangqiang/fastDate获取源码
或者点击这里下载(时间久了可能会更新,导致这里下载的和码云上的有所不同)