陳彥勳_HTML按鈕BUTTON事件ONCLICK
物件導向設計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)
三個引號是註解吧？https://chenyenhsun.blogspot.com/2025/04/htmlbuttononclick.html
回覆刪除