陳彥勳_HTML按鈕BUTTON事件ONCLICK

Stock Management

物件導向設計OOP=Object-Oriented Programming

id=identity, 身分證id card, division區塊, 段落

Python程式碼

    python -m ensurepip --upgrade
    pip install Flask

    from flask import Flask, render_template_string

    app = Flask(__name__)

    html_code = """
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Stock Management</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
           1 {
                color: #333;
            }
            .stock-info {
                margin-bottom: 20px;
            }
            button {
                padding: 10px 20px;
                background-color: #4CAF50;
                color: white;
                border: none;
                cursor: pointer;
            }
            button:hover {
                background-color: #45a049;
            }
        </style>
    </head>
    <body>
        <h1>物件導向設計OOP=Object-Oriented Programming</h1>
        <div class="stock-info">
            <p id="cat" style="display: none;"></p>
            <p id="dog" style="display: none;"></p>
           <p>id=identity, 身分證id card, division區塊, 段落</p>
        <script>
            const dict = new Map([
                ["2303", "聯電"],
                ["2330", "台積電"],
                ["2880", "華南金"],
                ['AAPL', '蘋果公司'],
                ['C', '花旗銀行'],
                ['T', '美國電話電報'],
                ["0050", "元大台灣50"],
                ["0056", "元大高股息"]
            ]);

            class Stock {
                constructor(code, shares, price) {
                    this.code = code;
                    this.shares = shares;
                    this.price = price;
                }
            }

            const stocks = [
                new Stock("2330", 100, 1000),
                new Stock("2880", 1000, 30),
                new Stock("C", 100, 1000),
                new Stock("T", 1000, 30),
                new Stock("0050", 500, 120),
                new Stock("0056", 300, 25)
            ];

            function displayStockInfo(elementId, stocks, dict) {
                let st = '';
                stocks.forEach(stock => {
                    st += `${dict.get(stock.code) || stock.code} 股數 ${stock.shares} 價格 ${stock.price}<br>`;
                });
                document.getElementById(elementId).innerHTML = st;
            }

            function toggleStockInfo() {
                const catElement = document.getElementById('cat');
                const dogElement = document.getElementById('dog');
                if (catElement.style.display === 'none') {
                    displayStockInfo('cat', stocks, dict);
                    displayStockInfo('dog', stocks, dict);
                    catElement.style.display = 'block';
                    dogElement.style.display = 'block';
                } else {
                    catElement.style.display = 'none';
                    dogElement.style.display = 'none';
                }
            }
        </script>
        <button onclick="toggleStockInfo()">陳彥勳執行</button>
    </body>
    </html>
    """

    @app.route('/')
    def index():
        return render_template_string(html_code)

    if __name__ == '__main__':
        app.run(debug=True)

留言

  1. George2025年4月28日 上午10:26

    三個引號是註解吧？https://chenyenhsun.blogspot.com/2025/04/htmlbuttononclick.html

    回覆刪除

張貼留言

這個網誌中的熱門文章

下午_陳彥勳_金融常識Onchange改變取代原來Onclick按鈕事件

圖片
陳彥勳_學習重點 🐼 🐹 🐋 🦁 🐨 🐸 🦠 🐷 476 477 478 479 480 481 482 483 TR=TABLE ROW TD=TABLE DATA 秀出影片 element = 網頁.方法getElmentById取得Id('名稱') 宣告CONSTANT常數answer陣列儲存正確答案answer=[4,4,3,4,3,2...]陣列array又稱為清單list 陳彥勳_金融市場常識測驗504題 答 1 2 3 4 下列何者不是金融市場的主要功能？ 提供金融工具交易的場所 擔任資金需求者與供給者的橋樑 促進投資活動的效率，提升經濟發展 提供交易者投機的場所 答 1 2 3 4 下列何者不是金融市場交易的工具？ 商業本票 銀行存款 股票 房地產 答 1 2 3 4 當金融市場管理的品質較佳時，企業發行的成本會______，金融工具的流動性會______。 較低，較低 較高，較低 較低，較高 較高，較高 答 1 2 3 4 當企業需要資金來進行投資，最好不要用下列何種方式尋求融通？ 向銀行借錢 發行股票 發行債券 向地下錢莊借錢 答 1 2 3 4 下列何者不是近年來國內主管機關管理金融市場的發展方向？ 減少法規的限制 鼓勵金融創新 對國外資金進行更嚴格的限制與管理 加強國際金融的流通 答 1 2 3 4 在金融市場中主管機關訂定法律規範的目的在於： 增加政府的收入 促進金融市場健全發展與有效經營 增加金融機構的進入障礙 提高金融機構的經營成本 答 1 2 3 4 目前國內監理銀行、票券、證券及保險等金融機構的主管機關為： 財政部 內政部 金融監督管理委員會 經濟部 答 1 2 3 4 依照國內金融監督管理制度的架構，主管證券相關事業的監理單位為： 銀行局 保險局 證券期貨局 檢查局 答 1 2 3 4 依照國內金融監理制度的架構，主掌金融業檢查業務的單位為： 銀行局 中央銀行 中央存款保險公司 檢查局 答 1 2 3 4 下列何者非隸屬「金融監督管理委員會」？ 銀行局 公務人員退休撫卹基金管理委員會 證券期貨局 檢查局 答 1 2 3 4 下列何者不屬證券期貨局監理...
閱讀完整內容

陳彥勳_js產生html編碼建立超連結hyperlink

圖片
題目 超連結 題目 001~010 001 , 002 , 003 , 004 , 005 , 006 , 007 , 008 , 009 , 010 , 題目 011~020 011 , 012 , 013 , 014 , 015 , 016 , 017 , 018 , 019 , 020 , 題目 021~030 021 , 022 , 023 , 024 , 025 , 026 , 027 , 028 , 029 , 030 , 題目 031~040 031 , 032 , 033 , 034 , 035 , 036 , 037 , 038 , 039 , 040 , 題目 041~050 041 , 042 , 043 , 044 , 045 , 046 , 047 , 048 , 049 , 050 , 題目 051~060 051 , 052 , 053 , 054 , 055 , 056 , 057 , 058 , 059 , 060 , 題目 061~070 061 , 062 , 063 , 064 , 065 , 066 , 067 , 068 , 069 , 070 , 題目 071~080 071 , 072 , 073 , 074 , 075 , 076 , 077 , 078 , 079 , 080 , 題目 081~090 081 , 082 , 083 , 084 , 085 , 086 , 087 , 088 , 089 , 090 , 題目 091~100 091 , 092 , 093 , 094 , 095 , 096 , 097 , 098 , 099 , 100 , 題目 101~110 101 , 102 , 103 , 104 , 105 , 106 , 107 , 108 , 109 , 110 , 題目 111~120 111 , 112 , 113 , 114 , 115 , 116 , 117 , 118 , 119 , 120 , 題目 121~130 121 , 122 , 123 , 124 , 125 , 126 , 127 , 128 , 129 , 130 , 題目 131~140 131 , 132 , 133 , 134 , 135 , 136 , 137 , 1...
閱讀完整內容