先看成果吧，自己也始终在用，本人写的！须要用到的小伙伴能够珍藏
html
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">以后工夫戳：</label> <div class="col-sm-2"> <p style="display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;"> {{ time }} </p> </div> <div class="col-sm-7"> <a v-bind:class="class_tag" @click="status_timestamp" role="button"> {{ text }} </a> <a class="btn btn-success" href="javascript:history.go(0);"> 刷新页面</a> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">格式化工夫戳：</label> <div class="col-sm-3"> <input type="text" class="form-control" v-model="value_one"> </div> <div class="col-sm-1"> <a class="btn btn-info" @click="formate">转换</a> </div> <div class="col-sm-3"> <input type="text" class="form-control" v-model="value_one_fmt"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">工夫转换成工夫戳：</label> <div class="col-sm-3"> <input type="text" class="form-control" v-model="value_two"> </div> <div class="col-sm-1"> <a class="btn btn-info" @click="formate_string_data">转换</a> </div> <div class="col-sm-3"> <input type="text" class="form-control" v-model="value_two_fmt"> </div> </div> </form>JS局部
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script> function get_timestamp() { var timestamp = Date.parse(new Date()).toString(); timestamp = timestamp.substr(0, 10); return timestamp; } var t = false, old_time = get_timestamp(); var vm = new Vue({ el: "#form", data: { time: old_time, class_tag: "btn-danger btn", text: "暂停", value_one: old_time, value_one_fmt: "", value_two: fmt_date_time(old_time, 's'), value_two_fmt: "", array: null }, methods: { status_timestamp: function () { if (t != false) { clearTimeout(t); t = false; this.$data.class_tag = "btn-success btn"; this.$data.text = "开始"; } else { set_timestamp(); this.$data.text = "暂停"; this.$data.class_tag = "btn-danger btn"; } }, formate: function () { this.$data.value_one_fmt = fmt_date_time(this.$data.value_one, 's'); }, formate_string_data: function () { var date = new Date(this.$data.value_two.replace(/-/g, '/')); var time = date.getTime(); var timestamp = time / 1000; this.$data.value_two_fmt = timestamp; }, close_ad: function () { layer.confirm('确定要敞开吗?<br/>敞开后将一天不可见！', {icon: 7, title: '提醒'}, function (index) { Cookies.set('close_ad', 'close', {expires: 1, path: ''}); $("#close_ad").parent().parent().hide(); layer.close(index); }); } }, created: function () { var _that = this; axios .post('/index/advertisement/getad.html') .then(function (response) { //console.log(response) if (response.data.state == 200) { _that.array = response.data.data; // console.log(_that.array) } }) .catch(function (error) { // 申请失败解决 console.log(error); }); } }); set_timestamp(); // 扭转工夫戳的值 function set_timestamp() { var timestamp = get_timestamp(); vm.$data.time = timestamp; t = setTimeout(set_timestamp, 1000); } // 工夫戳转换成 function fmt_date_time(time, select_type) { var date = new Date(); date.setTime(time * 1000); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = date.getHours(); h = h < 10 ? ('0' + h) : h; var minute = date.getMinutes(); var second = date.getSeconds(); minute = minute < 10 ? ('0' + minute) : minute; second = second < 10 ? ('0' + second) : second; var fmtString = ''; switch (select_type) { case 'day': fmtString = y + '-' + m + '-' + d; break; case 'h': fmtString = y + '-' + m + '-' + d + ' ' + h; break; case 'm': fmtString = y + '-' + m + '-' + d + ' ' + h + ':' + minute; break; case 's': fmtString = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; break; default: break; } return fmtString; } </script> 细节上本人优化，当然也能够看看我的在线体验地址，F12 查看源代码， 前端页面我本人基于bootstarp 写的，搭建也能够本人优化。在线地址