layui前端时间戳转化实例


Posted in Javascript onNovember 15, 2019

1、html : 添加一个table,用来显示数据

<table class="layui-table" id="list" lay-filter="manageEvent"></table>

2、js部分 :接收后台传来的数据

layui.use(['laypage', 'layer','element','table','form'], function(){
   var laypage = layui.laypage;
   var layer = layui.layer;
   var element = layui.element;
   var table = layui.table;
   var form = layui.form;
   
   table.render({
    elem: '#list',
    url: '${path}/manage/selectManageList', //数据接口,
    page: false, //开启分页
    cols: [[ //表头
     {field: 'manageId', title: 'ID', sort: true, fixed: 'left',align:"center"},
     {field: 'phone', title: '手机号码',align:"center"},
     {field: 'mrtRoleName', title: '身份',align:"center"},
     {field: 'loginTime', title: '最后登入时间',align:"center",templet: '#loginTime'},
     {field: 'status', title: '状态',templet: '#statusTpl',align:"center"},
     {field:'status', title:'操作', toolbar: '#barDemo',templet:"#statusEdit",unresize: true,align:"center"}
    ]]

 });

3、引进 :

<script type="text/html" id="loginTime"> 

 {{ dateFormat(d.loginTime) }} // d是layui自带的
</script>

layui前端时间戳转化实例

4、引入下面JS代码,可以刚在公共的JS文件里面

/* 时间戳转化开始 */
  Date.prototype.format = function (fmt) { //author: meizz 
   var o = { 
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //q是季度
    "S": this.getMilliseconds() //毫秒 
   }; 
   if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 
   for (var k in o) 
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 
   return fmt; 
  } 
  
  String.prototype.format = function (args) { 
   var result = this; 
   if (arguments.length > 0) { 
    if (arguments.length == 1 && typeof (args) == "loginTime") { 
     for (var key in args) { 
      if (args[key] != undefined) { 
       var reg = new RegExp("({" + key + "})", "g"); 
       result = result.replace(reg, args[key]); 
      } 
     } 
    } 
    else { 
     for (var i = 0; i < arguments.length; i++) { 
      if (arguments[i] != undefined) { 
       //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题 
       var reg = new RegExp("({)" + i + "(})", "g"); 
       result = result.replace(reg, arguments[i]); 
      } 
     } 
    } 
   } 
   return result; 
  }
  function dateFormat(value) {
   return value ? new Date(value*1000).format("yyyy-MM-dd hh:mm:ss") : ""; 
  }

值得注意的是:value值,毫秒还是秒;我这里的value是毫秒所以乘了1000

/* 时间戳转化结束

layui前端时间戳转化实例

以上这篇layui前端时间戳转化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 #Javascript
layui数据表格重载实现往后台传参
Nov 15 #Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
Layui表格监听行单双击事件讲解
Nov 14 #Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 #Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jQuery功能函数详解
2015/02/01 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
JS实现多功能计算器
2020/10/28 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python中常见错误及解决方法
2020/06/21 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
C语言编程题
2015/03/09 面试题
党员一句话承诺大全
2014/03/28 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
2015年党小组工作总结
2015/05/26 职场文书
郭明义观后感
2015/06/08 职场文书
公司出差管理制度范本
2015/08/05 职场文书
职工食堂管理制度
2015/08/06 职场文书
我爱我班主题班会
2015/08/13 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏