老张跟着老许学前端之简易k线图以及购买

最新推荐文章于 2026-03-24 01:53:34 发布

原创最新推荐文章于 2026-03-24 01:53:34 发布 · 1k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

文章主要梳理简易K线的HTML和JS代码逻辑，无CSS代码。需求是每5秒往数组添加随机数并在页面添加柱状图，根据数值大小改变颜色。还设置输入框和购买按钮，点击购买后展示相关指标和涨跌幅，详细介绍了HTML框架和JS各函数逻辑。

因为这篇文章主要是为了梳理js的逻辑，所以文章只有html和js的详细梳理，并不会存在css代码

1、需求

声明一个数组，priceList。
每过5秒，往数组中添加一个数字(随机数，0-100)
数组中，每添加一个数字，往页面中，添加一条柱状图。
如果当前的柱状图的数字，大于前一根柱状图，则背景色为绿色，否则为红色
下方一个输入框，用户可以输入数字，如果输入的是无效数字，输入框下方提示【请输入有效数字】
输入完成后，点击输入框右侧的buy按钮
用户buy后，下一条柱状图增加用户输入的数字，如下一条柱状图原本是10，用户输入的20，则下一条柱状图为30
用户buy后，在下方出现一条数据，表示买入时的点位(10)，买入后的点位(30)
后续柱状图更新时，实时计算收益。如再下一条数据是40，则显示绿色 +10，然后又一条数据为10，则显示红色-20

2、html代码框架梳理

a、先给整个页面一个控制k线的div

<div id="add"></div>

这个id为add的k线就是为了存储后面k线的运转

b、给页面一个input输入框，一个按钮购买，并给予点击事件

<input type="text" id="money">
<button id="buyMoney" onclick="buyMoney()">购买</button>

input输入框里面只能输入数字，如果里面输入的不是数字，就会跳转一行字：请输入正确的购买金额，那么就在下方给一个div用于储存这段话，并将其隐藏

      <div id="write">请输入正确的购买金额</div>

c、点击购买后，应该给与五个不同的指标，分别是id：第几笔交易，买入前的价格，买入的数量，买入后的价格，以及涨跌幅

<span class="bnId">Id</span>
<span class="bnAmount">买入前的价格</span>
<span class="bnBefore">买入数量</span>
<span class="bnAfter">买入后的价格</span>
<span class="bnRF">涨跌幅</span>

d、建立一个div用来展现上面的五个数据

      <div id="bnContent"></div>

3、js代码逻辑梳理

a、先将有用的变量整理出来：

let priceList = [];
// 先声明一个空数组，priceList，用来存储生成的随机数
let doc = document.getElementById("add");
// 将id为add的html代码找到，并给与一个变量名doc

b、写一个函数，为了生成1-100的随机数，并将他装进数组priceList里面，并让他自运行

function circulate() {
	// 定时器
	setInterval(() => {
        // 这是生成随机数，因为随机数里面有0，所以生成随机数的时候要+1
		const randomization = Math.floor(Math.random() * 100) + 1;
		priceList.push(randomization); // 将生成的随机数添加到数组中
	}, 5000);
}
circulate()

c、写一个函数，为了将数据展现到页面上，也就是视图层

// 这个函数是视图层，为了给html添加一个新的div，就是价格实时的柱状图
function defineStyle(num) {
	doc.innerHTML += `<div class = 'changeColor' style = 'height:${num}px'>${num}</div>`;
}

这个函数的意义是将k线展现到页面上，k线是柱状图，高必须有，所以这个函数有一个入参，num这个入参将和上面生成的随机数相同，而这个柱状图的高应该和随机数相同，这个地方要用+=（加等于），因为如果是等于，就会赋值并覆盖，就会以最新的数据展现在页面上，而加等于就是在原有的基础上再添加一条新数据，并将这个函数在随机数的函数中运行。

function circulate() {
	// 定时器
	setInterval(() => {
		const randomization = Math.floor(Math.random() * 100) + 1; // 这是生成随机数
		priceList.push(randomization); // 将生成的随机数添加到数组中
		defineStyle(randomization) // 将视图层函数写在定时器中
	}, 5000);
}

d、写一个函数，为了将k线展现不同的颜色，如果新生成的数值大于前一条k线，那么背景色应该为绿色，如果小于，则为红色。

// 这一步是逻辑层，是为了比对数值给与不同的背景色
function changeColor(){
    if (priceList[priceList.length - 1] < priceList[priceList.length - 2]) {
        document.getElementsByClassName("changeColor")
        [priceList.length - 1].style.backgroundColor = "red";
    }
}

这里因为css给了k线的固定颜色是green，所以这里只需要当符合条件的时候，改变他的背景色为红色就可以了。

e、接下来，我们声明一个变量用于储存input里面输入的内容

let inpValue = ""

f、写一个函数，当点击购买的时候，如果符合条件的情况下，给inpValue复制，并给按钮购买设置样式

// 给inpValue赋值
function buyMoney() {
	if (isNaN(inp.value) === true || inp.value === "") {
		// 如果里面输入的不是数字或者里面数据为空
		inp.value = "";
		return;
	} else {
		// 点击按钮就为可点击状态
		document.getElementById("buyMoney").style.cursor = "pointer";
		inpValue = inp.value;
	}
}

g、写一个函数进行数值切换，为后面的点击购买做出判断，并监听inpValue

// 这一步是数值切换，为后面的点击购买做出数值判断, 监听inpValue
function changeDigital(num) {
	if (inpValue === "") {
		defineStyle(num);
	}
}

然后将定时器中的函数defineStyle替换为changeDigital

function circulate() {
	// 定时器
	setInterval(() => {
		const randomization = Math.floor(Math.random() * 100) + 1; // 这是生成随机数
		priceList.push(randomization); // 将生成的随机数添加到数组中
		changeDigital(randomization); // 数值切换
	}, 5000);
}

当点击购买后，展现到页面的数值就会发生变化，就应该是原始数值+购买的数量，并且当数值发生改变后，就应该讲inpValue清空，那么：

function changeDigital(num) {
	if (inpValue === "") {
		defineStyle(num);
	} else {
		defineStyle(Number(num) + Number(inpValue));
        inpValue = ""
	}
}

h、这个时候就该开始将购买的逻辑展现在页面上了，思路如下：

新增一个空的数组，为了存储点击购买后的几条数据，数据分别是：id、购买时的价格，购买的数量、购买后的价格以及涨跌幅
新写一个函数，函数中有三个参数，分别对应了三条数据，分别是：购买前的价格，购买的数量和购买后的价格，这个函数为了监听有没有向input中输入内容，如果有并点击了购买按钮，那么就向空数组中添加一条新的数据
循环这个数组，将数组中的数据添加到页面中
id：数组的长度+1，购买的数量：inpValue，购买时的价格：randomization，购买后的价格：changeDigtal(randomization) + inpValue

let buyList = []
function writePrice(beforePrice, buyAmount, afterPrice) {
	buyList.push({
		id: buyList.length + 1,
		beforePrice: beforePrice,
		buyAmount: buyAmount,
		afterPrice: afterPrice,
		riseOrFall: 0,
	});
	document.getElementById("buyNow").style.opacity = 1;
	document.getElementById("bnContent").innerHTML = "";
	buyList.map((item) => {
		document.getElementById("bnContent")
        .innerHTML += `
    <div class = 'bnContentItem'>
        <div class = 'bId'>${item.id}</div>
        <div class = 'bBefore'>${item.beforePrice}</div>
        <div class = 'bAmount'>${item.buyAmount}</div>
        <div class = 'bAfter'>${item.afterPrice}</div>
        <div class = 'bRF'>${item.riseOrFall}</div>
    </div>`;
	});
}

这个函数的三个值分别对应了三个不同的值，所以要讲这个函数在数值转换的函数中进行运行

// 这一步是数值切换，为后面的点击购买做出数值判断, 监听inpValue
function changeDigital(num) {
	if (inpValue === "") {
		defineStyle(num);
	} else {
		defineStyle(Number(num) + Number(inpValue));
		writePrice(Number(num), Number(inpValue), Number(num) + Number(inpValue));
		inpValue = "";
	}
}

i、前面说过了，点击购买了以后，如果符合条件展现在页面上的内容会发生改变，所以，要在逻辑层进行数值改变后的样式更改

// 这一步是逻辑层，是为了比较数值比赋与不同的背景色
function changeColor() {
	if (inpValue === "") {
		if (priceList[priceList.length - 1] < priceList[priceList.length - 2]) {
			document.getElementsByClassName("changeColor")[
				priceList.length - 1
			].style.backgroundColor = "red";
		}
	} else {
		if (
			priceList[priceList.length - 1] + inpValue <
			priceList[priceList.length - 2]) {
			document.getElementsByClassName("changeColor")[
				priceList.length - 1
			].style.backgroundColor = "green";
		    }
	    }
    }

j、接下来开始计算涨跌幅，涨跌幅就是买入后的点位减去每五秒生成的那个新的随机数，就是涨跌幅

首先，我们要知道买入后的点位就是买入时的随机数加上我们购买的数量，这个值在我们点击购买后是不变的，而变化的两个值就是随机数和涨跌幅，那么我们就应该拿到买入后的数量：

// 买入后的数值
buyList.map((item) =>{
    console.log(item.afterPrice)
    // 打印出来的数值就是点击购买后的数值
})

现在我们要拿到每五秒生成的随机数，那个数字：

console.log(priceList(priceList.length -1))

拿到了这个数字后，我们只需要计算涨跌幅：

buyList.map((item) => {
	    item.riseOrFall = 
        Number(priceList[priceList.length - 1]) - item.afterPrice;
	});

然后现在我们计算出了涨跌幅，那么将他们三个融入到一个函数里面：

function historyListener() {
	if (buyList.length === 0) return; // 只有当buyList里面有值的时候触发，没值不触发
	buyList.map((item) => {
		item.riseOrFall = 
        Number(priceList[priceList.length - 1]) - item.afterPrice;
	});
}

因为这个函数需要每五秒触发一次，所以要将这个函数在前面的函数中进行触发：

function changeDigital(num) {
	if (inpValue === "") {
		defineStyle(num);
		historyListener(); // 在这个地方触发
	} else {
		defineStyle(Number(num) + Number(inpValue));
		addHistory(Number(num), Number(inpValue), Number(num) + Number(inpValue));
		inpValue = "";
	}
}

因为上面数据层和视图层写在了一个函数里面，所以，我们现在应该将他们分开处理：

function addHistory(beforePrice, buyAmount, afterPrice) {
	buyList.push({
		id: buyList.length + 1,
		beforePrice: beforePrice,
		buyAmount: buyAmount,
		afterPrice: afterPrice,
		riseOrFall: 0,
	});
	showHistory();
}
// 视图层，将购买记录渲染
function showHistory() {
	document.getElementById("buyNow").style.opacity = 1;
	document.getElementById("bnContent").innerHTML = "";
	buyList.map((item) => {
		document.getElementById("bnContent").innerHTML += `
            <div class = 'bnContentItem'>
                <div class = 'bId'>${item.id}</div>
                <div class = 'bBefore'>${item.beforePrice}</div>
                <div class = 'bAmount'>${item.buyAmount}</div>
                <div class = 'bAfter'>${item.afterPrice}</div>
                <div class = 'bRF'>${item.riseOrFall}</div>
            </div>`;
	});
}

当我们改完数据和逻辑以后，因为要展示在页面上，所以我们应该将视图层的函数写在改完后：

function historyListener() {
	if (buyList.length === 0) return;
	buyList.map((item) => {
		item.riseOrFall = 
        Number(priceList[priceList.length - 1]) - item.afterPrice;
	});
	showHistory();
}

最后，我们需要更改涨跌幅的字体颜色，如果为负数则为红色，如果是正值则为绿色，这个时候需要更改css，所以要在css上面加一个三木运算符进行判断：

<div class = 
    '${Number(item.riseOrFall) > 0 ? "bRF" : "reddd"}'>
    ${item.riseOrFall}
</div>

至此，整篇代码书写完毕，完成了简易k线的代码书写和逻辑书写！