在线时间戳转换工具，纯JS 实现

苝荒 - 2022-07-13 12:41:25

先看效果吧，本人也一直在用，自己写的！需要用到的小伙伴可以收藏
在这里插入图片描述

html

  <form >
            <div >
                <label >当前时间戳：</label>
                <div >
                    <p >
                        {{ time }}
                    </p>
                </div>
                <div >
                    <a v-bind: @click="status_timestamp" role="button">
                        {{ text }}
                    </a>
                    <a  href="javascript:history.go(0);"> 刷新页面</a>
                </div>
            </div>

            <div >
                <label >格式化时间戳：</label>
                <div >
                    <input type="text"  v-model="value_one">
                </div>

                <div >
                    <a  @click="formate">转换</a>
                </div>
                <div >
                    <input type="text"  v-model="value_one_fmt">
                </div>
            </div>

            <div >
                <label >时间转换成时间戳：</label>
                <div >
                    <input type="text"  v-model="value_two">
                </div>
                <div >
                    <a  @click="formate_string_data">转换</a>
                </div>
                <div >
                    <input type="text"  v-model="value_two_fmt">
                </div>
            </div>
        </form>

JS部分

    <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 写的，搭建也可以自己优化。

在线地址

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：网页长按保存及识别二维码

下一篇： SAP Commerce Cloud B2C Accelerator 架构设计概述