文由ScriptEcho平臺提供技術支持

項目地址：傳送門

鍵盤精靈代碼介紹

應用場景

鍵盤精靈是一款用于股票分析的輔助工具，通過鍵盤輸入股票代碼或拼音縮寫，快速搜索并展示相關股票信息。它可以幫助交易者快速獲取目標股票的實時行情、歷史K線數據，并進行便捷的切換。

基本功能

• **快速搜索股票：**通過鍵盤輸入股票代碼或拼音縮寫，即可搜索并展示相關股票信息。
• **展示股票信息：**搜索結果包括股票名稱、代碼、最新價格、漲跌幅等基本信息。
• **切換股票：**選中搜索結果中的股票，即可切換當前顯示的K線圖和相關信息。
• **發送股票代碼到通達信：**通過鍵盤精靈，可以將股票代碼直接發送到通達信軟件，方便交易者快速下單或查看詳細行情。

功能實現步驟及關鍵代碼分析

1. 加載所需庫和資源

let jsUrls = [
  // 加載JS庫和資源
];
let styleUrls = [
  // 加載CSS樣式
];

await Promise.all(styleUrls.map((styleUrl) => loadStyle(styleUrl)));
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)));

2. 創建鍵盤精靈組件

function KeyboardChart(divDialog, divInput, div) {
  // 初始化鍵盤精靈組件
}

3. 創建K線圖組件

function KLineChart(divKLine) {
  // 初始化K線圖組件
}

4. 初始化組件并綁定事件

window.$(function () {
  // 創建K線圖組件
  var klineControl = new KLineChart(document.getElementById('kline'));
  klineControl.Create();

  // 創建鍵盤精靈組件
  var divReport = document.getElementById('div_search_list');
  var divDialog = document.getElementById('div_keyboard');
  var divInput = document.getElementById('div_input_symbol');
  var reportCtrl = new KeyboardChart(divDialog, divInput, divReport);
  reportCtrl.Create();

// 綁定鍵盤精靈組件的股票切換回調函數
reportCtrl.ChangeSymbolCallback = function (sybmol) {
klineControl.ChangeSymbol(sybmol);
klineControl.Chart.SetFocus();
};
});

5. 鍵盤精靈組件功能實現

• 搜索股票：

this.DivInput.addEventListener('keydown', (event) => {
  this.OnKeydown(event);
});
this.DivInput.addEventListener('keyup', (event) => {
  this.OnKeyup(event);
});

• 切換股票：

this.Chart.AddEventCallback({
  event: JSCHART_EVENT_ID.ON_KEYBOARD_SELECTED,
  callback: (event, data, chart) => {
    this.OnSelectedSymbol(event, data, chart);
  },
});

• 發送股票代碼到通達信：

this.SendKeyToTDX = function (symbol) {
  // 發送股票代碼到通達信
};

總結與展望

開發過程中的經驗與收獲：

• 熟練掌握了使用JS和jQuery操作DOM元素和綁定事件。
• 深入了解了股票分析軟件中K線圖和鍵盤精靈組件的實現原理。
• 提升了對股票市場和金融數據的理解。

未來該卡片功能的拓展與優化：

• **增強搜索功能：**支持拼音縮寫、模糊搜索等方式。
• **優化股票信息展示：**提供更全面的股票信息，如財務數據、行業分析等。
• **集成更多功能：**如技術指標分析、量化交易策略等。
• 更多組件：
• 
  

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

TML: HyperText Markup Language 超文本標記語言

HTML代碼不區分大小寫, 包括HTML標記、屬性、屬性值都不區分大小寫;

任何空格或回車鍵在代碼中都無效，插入空格或回車有專用的標記，分別是 、<br>

HTML標記中不要有空格，否則瀏覽器可能無法識別。

如何添加注釋(comment:評論;注釋)

<!-- -->
<comment></comment>
<!-- --> 不能留有空格

字符集

<meta http-equiv="Content-Type" content="text/html;charset=#"/>

<base target="_blank">

可以將a鏈接的默認屬性設置為_blank屬性

單個標簽要有最好有結束符(可以沒有結束符)

<br/> <img src="" width="" /> 

便于兼容XHTML(XHTML必須要有結束符)

HTML標簽的屬性值可以有引號,可以沒有引號,為了提高代碼的可讀性,推薦使用引號(單引號和雙引號)，盡管屬性值是整數，也推薦加上引號。

<marquee behavior="slide"></marquee> 

便于兼容XHTML(XHTML必須要有引號)

<marquee behavior=slide></marquee>

經過測試,以上程序都可以正確運行

HTML標簽涉及到的顏色值格式:

color_name 規定顏色值為顏色名稱的文本顏色(比如 "red")。

hex_number 規定顏色值為十六進制值的文本顏色(比如 "#ff0000")。

rgb_number 規定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。

transparent 透明色 color:transparent

rgba(紅0-255,綠0-255,藍0-255,透明度0-1)

opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)

css:

div{opacity:0.1} /*取值為0-1*/

英文(顏色值)不區分大小寫

HTML中顏色值：采用十六進制兼容性最好(十六進制顯示顏色效果最佳)

CSS中顏色值：不存在兼容性

紅色 #FF0000

綠色 #00FF00

藍色 #0000FF

黑色： #000000

灰色 #CCCCCC

白色 #FFFFFF

青色 #00FFFF

洋紅 #FF00FF

黃色 #FFFF00

請問后綴 html 和 htm 有什么區別?

答: 1. 如果一個網站有 index.html和index.htm，默認情況下，優先訪問.html

2. htm后綴是為了兼容以前的DOS系統8.3的命名規范

XHTML與HTML之間的關系?

XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴展的超文本標記語言.

XHTML語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行.

XHTML是用來代替HTML的, 是2000年w3c公布發行的.

XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網絡應用更多的需求.

XHTML是基于XML的應用.

XHTML更簡潔更嚴謹.

XHTML也可以說就是HTML一個升級版本.(w3c描述它為'HTML 4.01')

XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區分大小寫,標準的XHTML標簽應該使用小寫.

XHTML屬性值必須使用引號,而HTML屬性值可用引號,可不要引號

XHTML屬性不能簡寫：如checked必須寫成checked="checked"

單標記<br>, XHTML必須有結束符<br/>,而HTML可以使用<br>,也可以使用<br/>

除此之外XHTML和HTML基本相同.

網頁寬度設置多少為最佳?

960px

target屬性值理解

_self 在當前窗口中打開鏈接文件,是默認值

_blank 開啟一個新的窗口打開鏈接文件

_parent 在父級窗口中打開文件,常用于框架頁面

_top 在頂層窗口中打開文件,常用語框架頁面

字符集：

charset=utf-8

Gb2312 簡單中文字符集, 最常用的中文字符

Gbk 簡繁體字符集, 中文字符集

Big5 繁體字符集, 臺灣等等

Utf-8 世界性語言的字符集

ANSI編碼格式編碼格式的擴展字符集有gb2312和gbk

單位問題：

HTML屬性值數值型的一般不帶單位, CSS必須帶單位;

強制刷新

ctrl+F5