html、js、jsp获取格式化时间

这里提到的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返回月,没有前置01~12
MM返回月,有前置的001~12
D返回日,没有前置01~31
DD返回日,有前置的001~31
h返回小时,12小时制(暂未判断)01~12
hh返回小时,24小时制01~24
m返回分钟,没有前置01~60
mm返回分钟,有前置的001~60
s返回秒,没有前置01~60
ss返回秒,有前置的001~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获取源码
或者点击这里下载(时间久了可能会更新,导致这里下载的和码云上的有所不同)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在jsp页面内调用接口获取到集合数据。可以使用JavaScript的Ajax技术来实现异步请求接口数据。 接下来,你需要将集合数据填充到可搜索下拉框中。可以使用JavaScript库或框架来实现这个功能,比如jQuery、Bootstrap-select等。 以下是一个简单的示例代码: 1. 引入jQuery和Bootstrap-select库 ```html <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/js/bootstrap-select.min.js"></script> </head> ``` 2. 在页面加载完成后,调用接口获取集合数据,并将数据填充到下拉框中 ```html <body> <select id="my-select" class="selectpicker" data-live-search="true"> <option value="">请选择</option> </select> <script> $(document).ready(function() { // 调用接口获取集合数据 $.ajax({ url: 'your-api-url', type: 'GET', dataType: 'json', success: function(data) { // 将集合数据填充到下拉框中 $.each(data, function(index, item) { $('#my-select').append('<option value="' + item.value + '">' + item.label + '</option>'); }); // 初始化下拉框 $('#my-select').selectpicker({ // 可根据需要配置下拉框样式、搜索框等属性 }); } }); }); </script> </body> ``` 在上面的示例中,我们使用了Bootstrap-select库来实现可搜索下拉框的功能。其中,data-live-search="true"属性表示开启搜索框;selectpicker()方法用于初始化下拉框,你可以根据需要配置下拉框的样式、搜索框等属性。 需要注意的是,你需要根据接口返回的数据格式来修改代码中的数据解析方式和填充方式。同时,你需要根据具体业务需要对下拉框的样式和属性进行配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值