1. 项目概述用旧手机打造你的专属股票盯盘设备如果你和我一样是个对市场波动有点敏感但又不想整天被电脑或专业软件绑在屏幕前的普通投资者这个项目绝对值得你花一个下午折腾一下。它的核心思路很简单利用你家里那台已经退役、吃灰多年的旧安卓手机把它变成一个功能专一、信息直观的股票盯盘设备。你可以把它放在书桌一角、床头柜上或者任何你常待的地方像看电子相册一样随时瞥一眼你关心的几只股票或指数的关键信息比如实时价格、涨跌幅、成交量而无需打开复杂的交易软件更不会被各种推送通知和无关信息干扰。这个想法的灵感其实就来源于“旧手机DIY”这个最近挺火的概念。大家开始意识到这些被淘汰的电子设备依然有强大的计算和显示能力与其让它们报废不如赋予它们新的、单一的使命。无论是做成智能家居中控屏、电子时钟还是像我们这里要做的股票盯盘器都是让旧物重获新生的绝佳方式。它成本极低几乎为零个性化程度高而且完全由你掌控数据展示的逻辑和样式。相比于购买一个功能固定的商业产品自己动手的乐趣和灵活性是无可替代的。2. 核心思路与方案选型为什么是“网页旧手机”在动手之前我们先来拆解一下实现这个目标有哪几条路可以走以及我为什么最终选择了“网页应用 旧手机常亮显示”这个组合方案。2.1 可选技术路径分析开发原生安卓应用这是最“正统”的方式。用Kotlin或Java写一个App安装在旧手机上。优点是性能好、可以调用更多系统API比如熄屏唤醒。但缺点非常明显开发门槛高需要配置开发环境、学习特定语言和框架对于非专业开发者来说从零到一的周期太长且后续任何小的界面调整或数据源变更都需要重新编译和安装维护成本高。使用现成的股票App并改造直接安装券商或第三方股票软件然后通过手机系统的“专注模式”或“应用锁”功能限制只能运行这个App。这个方法最快但问题在于你无法控制App的界面。广告、复杂的导航栏、频繁的推送都会破坏我们想要的“纯净、专注”的体验。而且大多数App的界面并非为“常亮盯盘”设计可能很快就会息屏。网页应用 浏览器全屏模式这是我们采用的核心方案。它的工作原理是我们编写一个简单的HTML网页这个网页通过JavaScript从公开的金融数据API比如雅虎财经、Alpha Vantage等获取股票数据然后用CSS将其美化成一个适合在大屏幕上、一眼就能看清的仪表盘样式。最后在旧手机的浏览器中打开这个网页并设置为全屏、禁止休眠。这个方案的优点非常突出开发简单只需要HTML、CSS和少量JavaScript知识网上有大量现成的代码和库可以借鉴。跨平台与易维护任何有浏览器的设备都能打开。想修改界面直接改网页文件刷新一下即可生效无需重新安装。完全定制显示哪些数据、如何排版、用什么颜色和字体全部由你说了算。资源友好一个优化良好的网页在旧手机上运行起来比大型原生App要流畅和省电得多。2.2 我们的技术栈与工具清单基于“网页应用”方案我们需要准备以下工具和资源硬件一台退役的安卓手机建议Android 7.0以上屏幕完好能连接Wi-Fi。这是我们的“显示屏”。开发环境你日常使用的电脑Windows, macOS, Linux均可。用于编写和测试网页代码。代码编辑器VS Code、Sublime Text甚至记事本都可以。我推荐VS Code因为它对前端代码的提示和插件支持很好。网页三件套HTML结构、CSS样式、JavaScript逻辑与数据获取。数据源选择一个免费、稳定、无需复杂认证的股票数据API。本项目我们将使用Yahoo Finance API的一个公共端点因为它简单直接无需注册API密钥。例如获取苹果公司AAPL的数据可以直接访问一个特定格式的URL来获取JSON数据。网络服务可选为了让你的手机能随时访问这个网页你需要把它放在一个能通过互联网访问的地方。最简单的方法是使用电脑的内网穿透工具如ngrok临时测试或者部署到GitHub Pages、Vercel等免费的静态网站托管服务上这样你的旧手机只要联网就能随时看到最新页面。注意公开的金融数据API通常有访问频率限制。对于个人盯盘几只股票的场景通常不会触发限制但请不要编写程序进行高频、自动化的大量请求。3. 实战步骤从零构建盯盘网页接下来我们进入实操环节。我会手把手带你创建一个最基本的股票盯盘页面并讲解每个步骤的意图和细节。3.1 第一步创建网页结构与基础样式首先在你的电脑上创建一个新文件夹比如叫做stock-tracker。在里面创建三个文件index.html,style.css,script.js。index.html- 网页骨架这个文件定义了页面的基本结构。我们计划显示一个标题以及若干个“股票卡片”每张卡片展示一只股票的信息。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的股票盯盘器/title link relstylesheet hrefstyle.css link hrefhttps://fonts.googleapis.com/css2?familyRobotoMono:wght400;700displayswap relstylesheet /head body div classcontainer header h1 个人股票仪表盘/h1 p idupdate-time最后更新--/p /header main classstocks-grid !-- 股票卡片将通过JavaScript动态添加到这里 -- /main footer p数据来源Yahoo Finance | 本地更新仅供参考/p /footer /div script srcscript.js/script /body /html关键点解析viewport设置确保了页面在不同尺寸屏幕尤其是手机上能正确缩放。我们引入了Roboto Mono字体这是一种等宽字体显示数字时非常整齐美观。页面主体分为header标题和更新时间、main股票卡片容器和footer页脚说明。style.css- 网页美容师这个文件负责让我们的页面看起来像一个专业的仪表盘而不仅仅是一个列表。* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Roboto Mono, monospace; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* 深色渐变背景 */ color: #e0e0e0; min-height: 100vh; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } header h1 { font-size: 2.5rem; margin-bottom: 10px; color: #4fc3f7; } #update-time { font-size: 0.9rem; color: #aaa; } .stocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 响应式网格 */ gap: 25px; margin-bottom: 40px; } .stock-card { background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; backdrop-filter: blur(10px); /* 毛玻璃效果 */ } .stock-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .stock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .symbol { font-size: 2rem; font-weight: 700; color: #fff; } .name { font-size: 1rem; color: #bbb; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price { font-size: 3rem; font-weight: 700; margin: 15px 0; text-align: center; } .change { font-size: 1.5rem; text-align: center; margin-bottom: 20px; padding: 8px 15px; border-radius: 8px; display: inline-block; } .change.positive { color: #4caf50; /* 绿色代表上涨 */ background: rgba(76, 175, 80, 0.1); } .change.negative { color: #f44336; /* 红色代表下跌 */ background: rgba(244, 67, 54, 0.1); } .stock-meta { display: flex; justify-content: space-around; font-size: 0.9rem; color: #aaa; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 15px; } .meta-item { text-align: center; } .meta-label { display: block; font-size: 0.8rem; margin-bottom: 5px; color: #777; } footer { text-align: center; padding: 20px; color: #666; font-size: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }设计心得深色主题对于需要长时间注视的盯盘设备深色背景能有效减少视觉疲劳这也是许多专业交易软件的选择。卡片化设计每只股票独立成卡信息集中视觉上更清晰也方便后期调整布局。视觉反馈通过颜色红跌绿涨和轻微的悬浮动画让数据变化一目了然增加了界面的“可读性”和互动感。响应式网格grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))这行代码是精髓。它确保无论屏幕大小如何卡片都会自动调整排列始终以至少300px的宽度优雅地填充空间在手机竖屏上会显示为一列在横屏或平板上可能会显示多列。3.2 第二步注入灵魂——用JavaScript获取并展示数据这是最核心的一步。我们将编写script.js文件负责从网络获取实时数据并动态更新到我们刚才创建的HTML页面上。script.js- 数据抓取与逻辑控制我们首先定义一个股票代码列表然后编写函数来获取和更新数据。// 配置你要关注的股票代码列表使用雅虎财经的代码格式 const stockSymbols [AAPL, MSFT, GOOGL, TSLA, ^GSPC]; // 最后一个是标普500指数 // 雅虎财经API的公共端点注意此接口可能随时变更需留意 const API_ENDPOINT https://query1.finance.yahoo.com/v7/finance/quote?symbols${stockSymbols.join(,)}; // 主函数获取所有股票数据 async function fetchAllStocks() { const updateTimeEl document.getElementById(update-time); updateTimeEl.textContent 最后更新${new Date().toLocaleTimeString()}; try { const response await fetch(API_ENDPOINT); if (!response.ok) { throw new Error(网络响应异常: ${response.status}); } const data await response.json(); const quotes data.quoteResponse.result; // 清空现有卡片容器 const container document.querySelector(.stocks-grid); container.innerHTML ; // 为每只股票创建卡片 quotes.forEach(stock { const card createStockCard(stock); container.appendChild(card); }); } catch (error) { console.error(获取股票数据失败:, error); const container document.querySelector(.stocks-grid); container.innerHTML p classerror数据加载失败请检查网络连接。${error.message}/p; } } // 函数根据单只股票数据创建卡片DOM元素 function createStockCard(stock) { const card document.createElement(div); card.className stock-card; // 计算涨跌幅和颜色 const regularMarketChange stock.regularMarketChange?.toFixed(2) || N/A; const regularMarketChangePercent stock.regularMarketChangePercent?.toFixed(2) || N/A; const isPositive regularMarketChange 0; card.innerHTML div classstock-header div div classsymbol${stock.symbol}/div div classname title${stock.longName || stock.shortName || N/A}${stock.longName || stock.shortName || N/A}/div /div /div div classprice$${stock.regularMarketPrice?.toFixed(2) || N/A}/div div classchange ${isPositive ? positive : negative} ${isPositive ? : }${regularMarketChange} (${isPositive ? : }${regularMarketChangePercent}%) /div div classstock-meta div classmeta-item span classmeta-label开盘/span span$${stock.regularMarketOpen?.toFixed(2) || N/A}/span /div div classmeta-item span classmeta-label最高/span span$${stock.regularMarketDayHigh?.toFixed(2) || N/A}/span /div div classmeta-item span classmeta-label成交量/span span${formatVolume(stock.regularMarketVolume)}/span /div /div ; return card; } // 辅助函数格式化成交量如将 1234567 转为 1.23M function formatVolume(volume) { if (!volume) return N/A; if (volume 1e9) return (volume / 1e9).toFixed(2) B; if (volume 1e6) return (volume / 1e6).toFixed(2) M; if (volume 1e3) return (volume / 1e3).toFixed(2) K; return volume.toString(); } // 页面加载时首次获取数据 document.addEventListener(DOMContentLoaded, fetchAllStocks); // 设置定时器每30秒自动更新一次数据可根据需要调整 setInterval(fetchAllStocks, 30 * 1000);代码逻辑深度解析异步获取Async/Await我们使用async/await语法来处理网络请求这让代码更清晰避免了“回调地狱”。fetchAPI 是现代浏览器获取网络资源的标准方式。错误处理Try...Catch网络请求充满了不确定性。用try...catch包裹核心逻辑一旦请求失败如网络断开、API变更能在界面上给用户一个友好的错误提示而不是让页面白屏或崩溃。数据提取与容错从API返回的复杂JSON对象中我们通过可选链操作符?.来安全地访问可能不存在的属性如stock.regularMarketPrice?.toFixed(2)如果属性不存在则返回‘N/A’防止程序出错。动态DOM操作我们没有在HTML里写死卡片而是用document.createElement和innerHTML根据数据动态生成。这样做的好处是只需修改stockSymbols数组就能轻松增删关注的股票无需改动HTML结构。定时更新setInterval(fetchAllStocks, 30 * 1000)这行代码设置了每30秒自动重新获取一次数据并更新页面实现了“盯盘”所需的实时性。这个间隔是平衡数据新鲜度和API请求压力的一个折中选择。3.3 第三步在旧手机上部署与优化现在你的电脑上已经有一个完整的、能本地运行的股票盯盘网页了。用浏览器打开index.html文件你应该能看到一个美观的仪表盘。接下来我们要把它搬到旧手机上并配置成真正的“设备”。本地网络测试确保你的电脑和旧手机连接在同一个Wi-Fi网络下。在电脑上找到你的本地IP地址在命令行输入ipconfig(Windows) 或ifconfig(Mac/Linux) 查看。在电脑上启动一个简单的HTTP服务器。如果你安装了Python可以在项目文件夹里运行python -m http.server 8000。如果安装了Node.js可以安装http-server包然后运行。在旧手机的浏览器中输入http://你的电脑IP地址:8000例如http://192.168.1.100:8000。如果能看到页面说明成功。云端部署推荐实现永久访问 本地测试只能在家用我们需要一个公网可访问的地址。最简单免费的方法是使用GitHub Pages。在GitHub上创建一个新的代码仓库Repository。将你的index.html,style.css,script.js三个文件上传到这个仓库。在仓库的Settings设置中找到Pages选项将Source分支设置为main或master并保存。几分钟后GitHub会为你生成一个https://你的用户名.github.io/仓库名/的网址。在任何能联网的设备上访问这个网址都能看到你的股票盯盘页。旧手机终极设置浏览器全屏在手机浏览器中打开你的盯盘页地址本地或云端的。然后使用浏览器的“添加到主屏幕”或“安装应用”功能。在Chrome中点击菜单 - “添加到主屏幕”。这会在你的手机桌面上创建一个快捷方式点击它将以近乎全屏、无浏览器地址栏的模式打开网页体验更像一个原生App。保持屏幕常亮进入手机的设置 - 显示 - 休眠不同手机路径可能不同将自动休眠时间设置为“永不”或最大值如30分钟。这是关键一步否则屏幕一会就灭了。关闭无关通知在手机设置中为这个浏览器或这个“应用”关闭所有通知并开启“勿扰模式”或“专注模式”确保它不会被其他消息干扰。电源优化将浏览器或这个“应用”加入手机电池优化的白名单防止系统为了省电而杀掉它的后台进程。同时建议将手机一直连接充电器或放在一个方便充电的位置。4. 功能扩展与高级玩法基础版本已经能用了但我们可以让它更强大、更个性化。这里有几个扩展思路4.1 增加更多数据维度目前的卡片显示了价格、涨跌幅、开盘、最高和成交量。你可以根据自己关注的信息从API返回的数据中提取更多字段。例如最低价stock.regularMarketDayLow市盈率stock.trailingPE市值stock.marketCap需要用formatVolume函数格式化52周价格范围stock.fiftyTwoWeekLow/stock.fiftyTwoWeekHigh只需在createStockCard函数的HTML模板中添加对应的meta-item即可。4.2 实现数据持久化与自定义列表现在股票列表是硬编码在script.js里的。我们可以改进它让用户能在网页上自己添加、删除股票。前端实现在网页上增加一个输入框和“添加”按钮。用JavaScript监听点击事件将输入的股票代码加入一个数组并立即更新显示。同时利用浏览器的localStorage将这个数组保存起来这样即使刷新页面你的自定义列表也不会丢失。简易后端可选如果你希望在多台设备间同步列表可以考虑使用一个极简的后端比如用json-server模拟一个REST API或者使用Supabase、Firebase这类BaaS后端即服务来存储用户配置。4.3 添加图表与历史趋势“盯盘”不仅要看当下还要看趋势。你可以集成一个轻量级的图表库如Chart.js或ApexCharts。在每张股票卡片上增加一个“显示图表”的按钮。点击后可以动态获取该股票的历史数据雅虎财经也有历史数据接口然后渲染出一个简单的K线图或折线图展示当日或近几日的价格走势。这会让你的盯盘器瞬间提升一个档次更具参考价值。4.4 价格预警功能需要后端支持这是更进阶的功能。单纯的前端网页无法在后台运行并推送通知。要实现价格预警例如当股价跌破某个设定值时发送通知你需要引入后端服务。思路编写一个运行在服务器上的脚本可以用Python、Node.js等定期如每分钟检查你关注的股票价格。触发通知当价格达到条件时通过服务器调用手机推送服务如使用Pushover、Telegram Bot、或者国内的服务号模板消息将警报发送到你的常用手机上。前端角色此时前端盯盘器主要作为可视化仪表盘而预警逻辑则交给更可靠、能24小时运行的后端服务来处理。5. 常见问题与排查实录在制作和使用的过程中你可能会遇到以下问题。这里是我踩过坑后总结的解决方案Q1页面打开是空白的或者控制台Console报跨域错误CORS error。原因与排查这是因为你直接双击用浏览器打开了本地的index.html文件file://协议。现代浏览器出于安全考虑默认禁止从file://协议发起的跨域网络请求我们的JavaScript请求了雅虎的https://接口。解决必须通过HTTP服务器访问。按照上文“第三步”的方法在本地启动一个HTTP服务器如python -m http.server然后通过http://localhost:8000来访问页面。Q2数据不更新了或者显示“N/A”。原因1API接口变更或限制。雅虎财经的公共接口并非官方稳定API有时会调整。打开浏览器的开发者工具F12切换到“网络Network”标签查看对finance.yahoo.com的请求是否失败或返回了错误信息。解决可以尝试搜索其他免费的金融数据API作为备选如 Alpha Vantage需免费注册获取API Key、Twelve Data等。替换script.js中的API_ENDPOINT和相应的数据解析逻辑即可。原因2股票代码格式错误。确保你使用的代码是雅虎财经认可的格式。例如A股股票需要加上后缀如000001.SZ深圳平安银行港股如0700.HK腾讯。解决去雅虎财经官网搜索一下你想添加的股票看看它在URL中使用的代码是什么。Q3旧手机耗电很快或者一段时间后网页自动刷新/停止了。原因这是安卓系统后台省电策略导致的。即使设置了“永不休眠”系统也可能在长时间无操作后限制或停止浏览器标签页的活动以节省电量。解决充电环境务必让手机连接电源这是最根本的解决方案。开发者选项进入手机“设置 - 关于手机”连续点击“版本号”7次以激活“开发者选项”。然后在开发者选项中找到“保持唤醒”或“充电时不锁定屏幕”的选项并开启。应用电池设置进入手机“设置 - 应用 - [你的浏览器] - 电池”将电池策略设置为“无限制”或“不受优化”。简单脚本保活可以在网页的script.js末尾加一段极其轻微的操作比如每分钟让页面标题闪烁一下告诉浏览器这个页面是活跃的。setInterval(() { document.title document.title ‘’ ? ‘’ : ‘’; }, 60000);Q4界面在手机上显示不全或者布局错乱。原因CSS的响应式设计可能在某些特定屏幕尺寸或浏览器上出现偏差。解决打开手机浏览器的“开发者工具”通常可在设置中开启“USB调试”后用电脑Chrome的DevTools远程调试或使用浏览器自带的响应式设计模式模拟。检查元素样式调整style.css中的minmax(300px, 1fr)这个值或者调整.stock-card的padding、font-size等使其完美适配你的手机屏幕。Q5我想监控加密货币怎么改解决原理完全一样只是数据源不同。你需要找到提供加密货币行情的API。例如CoinGecko、Binance都有公开API。将API_ENDPOINT替换为相应的API地址并修改createStockCard函数中解析JSON数据的逻辑提取出你需要的价格、涨跌幅等字段即可。这正体现了DIY项目的灵活性——数据源和展示逻辑完全由你定义。