如何将加密货币价格文本放入彩色圆角盒子并添加静态£符号

API 探路者

2026-9-27

你需要分别修改style.css和app.js两个文件即可实现全部需求，index.html无需调整：

1. 编写style.css样式代码

你已经在index.html中引入了该样式文件，直接写入以下内容：

/* 持仓价值盒子样式 */
#shib-worth {
  /* 盒子背景色符合要求 */
  background-color: #23272a;
  /* 圆角效果 */
  border-radius: 12px;
  /* 内边距控制盒子尺寸 */
  padding: 18px 40px;
  /* 盒子宽度自适应内容 */
  width: fit-content;
  /* 水平居中展示 */
  margin: 30px auto 0;
  /* 内部元素对齐 */
  display: flex;
  align-items: center;
  gap: 8px;
  /* 全局使用Sora字体 */
  font-family: 'Sora', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
}

/* 静态£符号用伪元素实现，无需修改html结构 */
#shib-worth::before {
  content: "£";
  /* 白色符合要求 */
  color: #fff;
}

2. 调整app.js代码

移除冗余的样式设置，保留核心数值更新和动态变色逻辑：

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73;
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    // 动态设置数值颜色
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    lastPrice = convert_shib_worth_to_gbp
};