文由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