2024年6月2日 星期日

[AI] 程式設計師(前端/後端)的工作將被 AI所取代

 以-股市開盤收盤倒數計時的網頁程式為例：

以下是與 chatgpt的對話：

ME：

幫我寫一個javascript 的網頁程式，功能是每天股市開盤的倒數計數，若股市開盤之後，就改為股市收盤的倒數計時程式，可以嵌在網頁之中即時動態顯示倒數時間。

ChatGPT：

當然可以！以下是一個 JavaScript 程式碼範例，可以嵌入在網頁中，實現股市開盤和收盤的倒數計時功能。

假設股市的開盤時間是每天的早上9:00，收盤時間是下午4:00，這段程式會在開盤之前顯示開盤的倒數計時，在開盤之後顯示收盤的倒數計時。

程式碼已產生...

ME:

請幫我修改時間，開盤是上午9點 收盤是下午1點30分，文字顯示，請用繁體中文顯示

ChatGPT

當然可以，以下是調整後的版本，開盤時間為上午9點，收盤時間為下午1點30分，並且所有文字顯示改為繁體中文。

程式如下：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股市倒數計時</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000; /* 黑色背景 */
            color: #fff; /* 白色文字 */
        }
        #countdown {
            font-size: 2em;
            color: #0f0; /* 綠色文字 */
        }
        pre {
            background-color: #333; /* 深灰色背景 */
            color: #fff; /* 白色文字 */
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .keyword {
            color: #00f; /* 藍色 */
        }
        .string {
            color: #a22; /* 棕紅色 */
        }
        .comment {
            color: #777; /* 灰色 */
        }
    </style>
</head>
<body>
    <div>
        <div id="countdown">載入中...</div>
        <pre>
            <code>
                <span class="keyword">function</span> getTimeRemaining(endtime) {
                    <span class="keyword">const</span> total = Date.parse(endtime) - Date.now();
                    <span class="keyword">const</span> seconds = Math.floor((total / 1000) % 60);
                    <span class="keyword">const</span> minutes = Math.floor((total / 1000 / 60) % 60);
                    <span class="keyword">const</span> hours = Math.floor((total / 1000 / 60 / 60) % 24);
                    <span class="keyword">const</span> days = Math.floor(total / (1000 * 60 * 60 * 24));
                    <span class="keyword">return</span> {
                        total,
                        days,
                        hours,
                        minutes,
                        seconds
                    };
                }

                <span class="keyword">function</span> initializeClock(id, startHour, startMinute, endHour, endMinute) {
                    <span class="keyword">const</span> clock = document.getElementById(id);

                    <span class="keyword">function</span> updateClock() {
                        <span class="keyword">const</span> now = <span class="keyword">new</span> Date();
                        <span class="keyword">const</span> currentHour = now.getHours();
                        <span class="keyword">const</span> currentMinute = now.getMinutes();
                        <span class="keyword">let</span> endtime;

                        <span class="comment">// 在開盤前</span>
                        <span class="keyword">if</span> (currentHour < startHour || (currentHour === startHour && currentMinute < startMinute)) {
                            endtime = <span class="keyword">new</span> Date();
                            endtime.setHours(startHour, startMinute, 0, 0);
                            clock.innerHTML = <span class="string">'距離股市開盤還有：'</span> + formatTime(getTimeRemaining(endtime));
                        } <span class="keyword">else if</span> ((currentHour > startHour || (currentHour === startHour && currentMinute >= startMinute)) && (currentHour < endHour || (currentHour === endHour && currentMinute < endMinute))) {
                            <span class="comment">// 股市開盤中</span>
                            endtime = <span class="keyword">new</span> Date();
                            endtime.setHours(endHour, endMinute, 0, 0);
                            clock.innerHTML = <span class="string">'距離股市收盤還有：'</span> + formatTime(getTimeRemaining(endtime));
                        } <span class="keyword">else</span> {
                            <span class="comment">// 股市已收盤，倒數到下一個交易日的開盤</span>
                            endtime = <span class="keyword">new</span> Date();
                            endtime.setDate(endtime.getDate() + 1);
                            endtime.setHours(startHour, startMinute, 0, 0);
                            clock.innerHTML = <span class="string">'距離股市開盤還有：'</span> + formatTime(getTimeRemaining(endtime));
                        }

                        <span class="keyword">if</span> (getTimeRemaining(endtime).total <= 0) {
                            clearInterval(timeinterval);
                            initializeClock(id, startHour, startMinute, endHour, endMinute);
                        }
                    }

                    <span class="keyword">function</span> formatTime(t) {
                        <span class="keyword">return</span> `${t.hours}小時 ${t.minutes}分鐘 ${t.seconds}秒`;
                    }

                    updateClock();
                    <span class="keyword">const</span> timeinterval = setInterval(updateClock, 1000);
                }

                <span class="comment">// 初始化倒數計時，設定股市時間（例如，上午9:00 至下午1:30）</span>
                initializeClock(<span class="string">'countdown'</span>, 9, 0, 13, 30);
            </code>
        </pre>
    </div>

    <script>
        function getTimeRemaining(endtime) {
            const total = Date.parse(endtime) - Date.now();
            const seconds = Math.floor((total / 1000) % 60);
            const minutes = Math.floor((total / 1000 / 60) % 60);
            const hours = Math.floor((total / 1000 / 60 / 60) % 24);
            const days = Math.floor(total / (1000 * 60 * 60 * 24));
            return {
                total,
                days,
                hours,
                minutes,
                seconds
            };
        }

        function initializeClock(id, startHour, startMinute, endHour, endMinute) {
            const clock = document.getElementById(id);

            function updateClock() {
                const now = new Date();
                const currentHour = now.getHours();
                const currentMinute = now.getMinutes();
                let endtime;

                // 在開盤前
                if (currentHour < startHour || (currentHour === startHour && currentMinute < startMinute)) {
                    endtime = new Date();
                    endtime.setHours(startHour, startMinute, 0, 0);
                    clock.innerHTML = '距離股市開盤還有：' + formatTime(getTimeRemaining(endtime));
                } else if ((currentHour > startHour || (currentHour === startHour && currentMinute >= startMinute)) && (currentHour < endHour || (currentHour === endHour && currentMinute < endMinute))) {
                    // 股市開盤中
                    endtime = new Date();
                    endtime.setHours(endHour, endMinute, 0, 0);
                    clock.innerHTML = '距離股市收盤還有：' + formatTime(getTimeRemaining(endtime));
                } else {
                    // 股市已收盤，倒數到下一個交易日的開盤
                    endtime = new Date();
                    endtime.setDate(endtime.getDate() + 1);
                    endtime.setHours(startHour, startMinute, 0, 0);
                    clock.innerHTML = '距離股市開盤還有：' + formatTime(getTimeRemaining(endtime));
                }

                if (getTimeRemaining(endtime).total <= 0) {
                    clearInterval(timeinterval);
                    initializeClock(id, startHour, startMinute, endHour, endMinute);
                }
            }

            function formatTime(t) {
                return `${t.hours}小時 ${t.minutes}分鐘 ${t.seconds}秒`;
            }

            updateClock();
            const timeinterval = setInterval(updateClock, 1000);
        }

        // 初始化倒數計時，設定股市時間（例如，上午9:00 至下午1:30）
        initializeClock('countdown', 9, 0, 13, 30);
    </script>
</body>
</html>



執行效果如右側，看來部份程式設計師的工作將被 AI所取代了。不過這是一個很好的學習範本。
Labels: ,

熱門文章