js逐步教你实现DOM系统(html逻辑 css逻辑 js逻辑)

html部分:

<h1>DOM数组方法</h1>
	<div class="container">
		<aside>
		<button id="add-user">添加账户 ?‍♂️</button>
        <button id="double">资金翻倍 ?</button>
        <button id="show-millionaires">查询百万富翁 ?</button>
        <button id="sort">财富榜 ↓</button>
        <button id="calculate-wealth">计算总金额 ?</button>
		</aside>
		<main id="main">
			        <h2><strong>Person</strong>Wealth</h2>
		</main>
	</div>

效果：

html逻辑:
全部是container，侧边栏是aside。中间是main.

css部分：

*{padding: 0px;margin: 0px;}
		body
		{
			background-color: #f4f4f4;
			font-family: Arial, Helvetica, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: 100vh;/*为什么,因为用户是数不完的.*/
		}
		.container
		{
			display: flex;
			padding: 20px;
			margin: 0 auto;
			max-width: 100%;
			widows: 800px;
		}
		aside
		{
			padding: 10px 20px;
			widows: 250px;
			border-right: 1px solid #111;
		}
		button
		{
			cursor: pointer;
			background-color: #fff;
			border: solid 1px #111;
			border-radius: 5px;
			display: block;
			padding: 10px;
			margin-bottom: 20px;
			font-weight: bold;
			font-size: 14px;
		}
		main {
  padding: 10px 20px;
}
		h2 {
  border-bottom: 1px solid #111;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  margin: 0 0 20px;
}

h3 {
  border-bottom: 1px solid #111;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  margin: 20px 0 0;
  background-color: #fff;
}
		.person
		{
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			margin-bottom: 10px;
		}

css逻辑:
第一步:让body下的所有东西全部flex布局,display: flex;
然后是垂直为主轴flex-direction: column;,侧轴x轴center align-items: center;。
记住,只要flex-direction: column;代表默认的的已经交换了.
第二：
container下面的flex布局,自己变大20px.自身居中模式,
第三步；aside自身扩大20px,大小为250px,
第四步：button是小手手,。。。
第五步;自身左边10px，上下20px.
第六步;
图片：

js逻辑;

// 获取节点
		const main = document.getElementById("main");
		const addUserBtn = document.getElementById("add-user");
		const doubleBtn = document.getElementById("double");
		const showMillionairesBtn = document.getElementById("show-millionaires");
		const sortBtn = document.getElementById("sort");
		const calculateWealthBtn = document.getElementById("calculate-wealth");
		let data = [];
		getRandomUser();
		getRandomUser();
		getRandomUser();
		//第一:添加用户
		addUserBtn.addEventListener("click",getRandomUser);
		doubleBtn.addEventListener("click", doubleMoney);//翻倍.
		sortBtn.addEventListener("click", sortByRichest);//排行榜
		showMillionairesBtn.addEventListener("click", showMillionaires);//查询百万富豪
		calculateWealthBtn.addEventListener("click", calculateWealth);//总金额
		async function getRandomUser()
		{
			const res=await fetch("https://randomuser.me/api");//异步处理.等条件满足也就是fetch完毕之后再执行以下的.
			const data=await res.json();
			const user=data.results[0];/*results[0]代表api的result数组里面的第一个*/
			const newUser={
				name:`${user.name.first} ${user.name.last}`,//找到一个人
				money:Math.floor(Math.random()*1000000)/*钱是随机生成的.因为是0~1,所以*1000000.并向下取整.*/
			};
			addData(newUser);
		}
		function addData(obj)
		{
			data.push(obj);
			updateDOM();
		}
		function updateDOM(providedData = data)//添加用户到main中
		{
			  main.innerHTML = " <h2><strong>Person</strong>Wealth</h2>";
			providedData.forEach(item=>
			{
				const element=document.createElement("div");//先创建一个div.
				element.classList.add("person");//div上面添加person类
  element.innerHTML = `<strong>${item.name}</strong> ${formatMoney(
      item.money
    )}`;				main.appendChild(element);/*名字与钱添加到main中*/
			});

		}
		function doubleMoney()
		{
			data=data.map(user=>
			{
				return {...user,money:user.money*2};//所有用户,与该用户的钱*2
			});
			updateDOM();
		}
		function sortByRichest()//排序(财富榜)
		{
			data.sort((a,b)=>b.money-a.money);/*这是升序*/
			 updateDOM();
		}
		function showMillionaires()//查询百万富豪
		{
			data=data.filter(user=>user.money>1000000);
			  updateDOM();
		}
		function calculateWealth()//计算总财富
		{
			const wealth = data.reduce((acc, user) => (acc += user.money), 0);
  // console.log(formatMoney(wealth));

  const wealthEl = document.createElement("div");
  wealthEl.innerHTML = `<h3>Total Wealth: <strong>${formatMoney(
    wealth
  )}</strong></h3>`;
  main.appendChild(wealthEl);
		}
		// 转换为货币格式
function formatMoney(number) {
  return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
}

js逐步：
第一步：获取节点

当什么时候执行什事件,事件监听.

第一步;
从上至下.
1：当点击添加账户时,执行
2；当点击资金翻倍时,执行。
3;当点击排行榜时执行.
4；当点击查询百万富豪时.
5;当点击计算总金额时执行.

下面是函数的功能：

功能是：异步执行函数,什么是异步执行,条件满足时.
执行的函数.
async代表这个函数异步执行,await代表等待完毕后就可以继续下去了.这和then差不多把.
第一步;下载，然后是转换成对象,然后是拿到第一个对象,第一个对象是

第二步：因为外国人是姓与名的，所以.

第二步：
功能是:添加到data中.data是要展示的数组.

第三步：

功能是：添加用户到main中.

第四步：
是
翻倍资金.
…user代表所有的在已经在main中的用户.
全部资金*2;

第五步：

第六步;

函数的功能是；过滤掉小于一百万的人.

第七步：

累加用reduce累加,后面的0代表累加器的初始值.

第八步：

转换为美元格式，保留两位小数,后面正则.

图片;