JavaScript中日期时间格式转换

获取当天时间：

//获取当前时间
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
//这两个是针对小于十的时候，会为个位数
if (month < 10){
  month ="0"+month;
}
if (day 10){
  day ="0"+day;
}
var nowDate = year ""month +"-"day;
//往往格式成这种样式是后台处理好的，或者我们会使用一些插件，又或者我们在vu中会使用过滤器来处理。
//输出结果格式：2021-11-08

一、基本的函数：
·getDate(0返回一个月中的某一天(1-31)
·getMonth(O返回月份(0-1I)
·getFullYear(0以四位数字返回年价(20I1)
·getHours(0返回小时(0-23)
·getMinutes(0返回分钟(0-59)
·getSeconds(0返回秒数(0-59)
·get Time(0返回1970年1月1日至今的毫秒数(1566715528024)
二、获取时间澄的方法
let timestamp =(new Date()).valueof();
//或者
let timestamp=new Date().getTime();
三、练习圈
问题：返回“现在距离今年元旦还有X天X小时X分钟X秒”
function timemove(){
/获取当前时问
let d1 new Date();
/获取下一年
let nextYear d1.getFullYear()+1;
//定义目标时间
let d2 new Date(nextYear +”/1/1 00:00:00”);
//定义剩余时间
1etd=d2-d1;/是-个时间戳
//计算剥余天数
let Day parseInt(d 1000 /60 60 24);
/计算剩余小时
let Hours parseInt(d 1000 60 60%24);
//计算剩余分钟
let Minutes parseInt(d 1008 /60%60);
//计算剩余秒
let Seconds parseInt(d 1000%60);
/拼接变量
let time=Day+”天”+Hours+”小时”+Minutes+”分钟”+Seconds+”秒”；
/将拼接好的变量显示在页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日期格式转换器</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        body { background-color: #f8f9fa; }
        .container { max-width: 600px; margin-top: 50px; }
        .form-group { margin-bottom: 1rem; }
        .alert {
            transition: all 0.3s ease-in-out;
            opacity: 0;
        }
        .alert.show {
            animation: fadeIn 0.5s forwards;
        }
        .spinner-border {
            display: none;
        }
        .clock {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }
        .clock canvas {
            display: block;
            margin: 0 auto;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">日期格式转换器</h1>
        <p class="lead text-center">输入一个日期，选择输出格式，然后点击按钮查看结果。</p>
        <div class="clock" id="clockContainer">
            <canvas id="clockCanvas" width="200" height="200"></canvas>
        </div>
        <form id="dateForm">
            <div class="form-group">
                <label for="inputDate">选择日期:</label>
                <input type="date" class="form-control" id="inputDate" value="2024-09-22">
            </div>
            <div class="form-group">
                <label for="formatSelect">选择格式:</label>
                <select class="custom-select" id="formatSelect">
                    <option value="iso">ISO格式 (YYYY-MM-DD)</option>
                    <option value="us">美国格式 (MM/DD/YYYY)</option>
                    <option value="eu">欧洲格式 (DD/MM/YYYY)</option>
                </select>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn btn-primary btn-block mr-2" onclick="convertDate()">转换日期</button>
                <div class="spinner-border spinner-border-sm text-primary" role="status" id="spinner" style="display:none;">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </form>
        <div class="alert alert-secondary mt-4" role="alert" id="result"></div>
    </div>

    <script>
        const canvas = document.getElementById('clockCanvas');
        const ctx = canvas.getContext('2d');

        let currentTimestamp = null;

        function initializeClock() {
            currentTimestamp = Date.now();
            drawClock();
        }

        function drawClock() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 获取当前时间
            const now = new Date(currentTimestamp);
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 画圆盘
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 80, 0, Math.PI * 2);
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 5;
            ctx.stroke();

            // 绘制时标
            for (let i = 0; i < 12; i++) {
                const angle = (Math.PI / 6) * i - Math.PI / 2;
                const x = 100 * Math.cos(angle) + canvas.width / 2;
                const y = 100 * Math.sin(angle) + canvas.height / 2;
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x + 10 * Math.cos(angle), y + 10 * Math.sin(angle));
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 3;
                ctx.stroke();
            }

            // 绘制秒针
            const secondAngle = ((seconds % 60) / 60) * 2 * Math.PI - Math.PI / 2;
            drawHand(secondAngle, 70, 'red', 2);

            // 绘制分针
            const minuteAngle = ((minutes + seconds / 60) / 60) * 2 * Math.PI - Math.PI / 2;
            drawHand(minuteAngle, 60, 'blue', 3);

            // 绘制时针
            const hourAngle = ((hours % 12 + minutes / 60) / 12) * 2 * Math.PI - Math.PI / 2;
            drawHand(hourAngle, 50, 'black', 4);

            requestAnimationFrame(drawClock);
        }

        function drawHand(angle, length, color, lineWidth) {
            ctx.beginPath();
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;
            ctx.moveTo(canvas.width / 2, canvas.height / 2);
            ctx.lineTo(
                Math.cos(angle) * length + canvas.width / 2,
                Math.sin(angle) * length + canvas.height / 2
            );
            ctx.stroke();
        }

        window.onload = () => {
            initializeClock();
            setInterval(() => {
                currentTimestamp += 1000; // 增加1秒
            }, 1000);
        };

        function formatDate(date, formatType) {
            const pad = n => ('0' + n).slice(-2);
            switch (formatType) {
                case 'iso':
                    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
                case 'us':
                    return `${pad(date.getMonth() + 1)}/${pad(date.getDate())}/${date.getFullYear()}`;
                case 'eu':
                    return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}`;
                default:
                    return '';
            }
        }

        function convertDate() {
            const inputDate = document.getElementById('inputDate').value;
            const formatSelect = document.getElementById('formatSelect').value;
            const resultDiv = document.getElementById('result');
            const spinner = document.getElementById('spinner');
            const date = new Date(inputDate);

            if (isNaN(date.getTime())) {
                spinner.style.display = 'none';
                resultDiv.className = 'alert alert-danger show';
                resultDiv.textContent = '请输入有效的日期！';
            } else {
                spinner.style.display = 'inline-block';
                setTimeout(() => {
                    const formattedDate = formatDate(date, formatSelect);
                    spinner.style.display = 'none';
                    resultDiv.className = 'alert alert-success show';
                    resultDiv.textContent = `转换后的日期是：${formattedDate}`;
                }, 500); // 模拟异步请求的时间延迟
            }
        }
    </script>
</body>
</html>

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。