<?php
/**
 *Notes:时间戳工具
 *USER:Administrator
 *DATE:2023-02-21
 *Time:14:51
 */
date_default_timezone_set('Asia/Shanghai');
$indexTm = time();
$indexTmDate = date('Y-m-d H:i:s', $indexTm);
?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时间戳工具</title>
        <link rel="stylesheet" href="./static/bootstrap.min.css">
        <style>
            .topNav{
                margin-bottom: 10px;
                background-color: #563d7c;
                color: #d9edf7;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <!--头部-->
        <div class="row">
            <div class="col-md-12">
                <!-- Image and text -->
                <nav class="navbar topNav">
                    <h2>时间戳工具</h2>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul class="list-inline">
                    <li class="list-inline-item">现&nbsp;&nbsp;&nbsp;在</li>
                    <li class="list-inline-item"><?=$indexTm?></li>
                    <li class="list-inline-item"><?=$indexTmDate?></li>
                </ul>
                <ul class="list-inline">
                    <li class="list-inline-item"><input class="form-control" id="txt_timestamp" placeholder="时间戳"/></li>
                    <li class="list-inline-item"><button class="btn btn-success" id="btn_conversion_str">转换》</button></li>
                    <li class="list-inline-item"><input class="form-control" id="txt_time"/></li>
                </ul>
                <ul class="list-inline">
                    <li class="list-inline-item"><input class="form-control" id="txt_time_2" placeholder="北京时间"/></li>
                    <li class="list-inline-item"><button class="btn btn-success" id="btn_conversion_int" data-dismiss="alert" >转换》</button></li>
                    <li class="list-inline-item"><input class="form-control" id="txt_timestamp_2"/></li>
                </ul>
            </div>
            <div class="col-md-12">
                <h4>时间戳</h4>
                <p>
                    Unix 时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数，不考虑闰秒。
                </p>
                <h4>北京时间_夏令</h4>
                <p>
                    1986年至1991年，中华人民共和国在全国范围实行了六年夏令时，每年从4月中旬的第一个星期日2时整(北京时间)到9月中旬第一个星期日的凌晨2时整(北京夏令时)。除1986年因是实行夏令时的第一年，从5月4日开始到9月14日结束外，其它年份均按规定的时段施行。夏令时实施期间，将时间向后调快一小时。1992年4月5日后不再实行。
                </p>
            </div>
        </div>
    </div>

    <script src="./static/jquery.min.js"></script>

    <script src="./static/popper.min.js"></script>
    <script src="./static/bootstrap.min.js"></script>

    <div class="alert alert-warning alert-dismissible fade" role="alert" id="alertDiv">
        <strong>警告!</strong> 请输入内容
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <script>
        $('.alert').alert();
        //时间戳转日期
        $("#btn_conversion_str").click(function () {
            var timestamp = $("#txt_timestamp").val();
            if(timestamp == null || timestamp == undefined || timestamp == "") {
                $("#alertDiv").addClass('show');
            } else {
                $.ajax({
                    type: "post",
                    url: "index.php",
                    dataType: "json",
                    data:{type:1, timestamp: timestamp},
                    success:function (data) {
                        $("#txt_time").val(data.str_tm);
                    }
                })
            }
        })

        //日期转时间戳
        $("#btn_conversion_int").click(function(){
            var time = $("#txt_time_2").val();

            if(time == null || time == undefined || time == "") {
                $("#alertDiv").addClass('show');
            } else {
                $.ajax({
                    type: "post",
                    url: "index.php",
                    dataType: "json",
                    data:{type:2, time: time},
                    success:function (data) {
                        console.log(data.tm)
                        $("#txt_timestamp_2").val(data.tm);
                    }
                })
            }
        })
    </script>
    </body>
    </html>