js DOM系统
时间:2022-07-28
本文章向大家介绍js DOM系统,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/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;
}
</style>
</head>
<body>
<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>
<script type="text/javascript">
// 获取节点
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, "$&,");
}
</script>
</body>
</html>
- No.012 Integer to Roman
- 黑帽SEO剖析之手法篇
- IOS学习1——IOS应用程序的生命周期及基本架构
- 浅议“全局变量”、“多线程”和“编译器陷阱”
- Java实现的图片合并方法,支持水平和垂直合并
- OC学习15——文件I/O体系
- 用惯了ORM,居然不会写分页SQL了
- OC学习14——谓词
- 如何在32位系统中使用ROP+Return-to-dl来绕过ASLR+DEP
- 如何使用Twitter构建C;C服务器
- 【Python语言】Scikit-learn 快速入门
- 抽象SQL查询:SQL-MAP技术的使用
- 简析60度CMS的Cookies欺骗漏洞
- OC学习13——Foundation框架中的集合
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kafka核心API——Producer生产者
- Linux Lab v0.5 正式发布,功能强大,用法简单
- Kafka核心API——AdminClient API
- PyQt5 技术篇-调用颜色对话框(QColorDialog)获取颜色,调色板的调用。
- Kafka的安装与配置
- PyQt5 技术篇-如何彻底删除控件?布局移除控件方法。
- PyQt5 技术篇-设置滚动条拉动位置,scrollArea滚动条位置设置方法。
- CentOS8更换yum源后出现同步仓库缓存失败的问题
- log4j配置方式
- 基于MHA搭建MySQL Replication集群高可用架构
- PyQt5 技巧篇-解决相对路径无法加载图片问题,styleSheet通过"相对"路径加载图片,python获取当前运行文件的绝对路径。
- 基于MMM搭建MySQL Replication集群高可用架构
- Python 技术篇-按任意格式灵活获取日期、时间、年月日、时分秒。日期格式化。
- 当删库时如何避免跑路
- Python 句法错误:"SyntaxError: invalid character in identifier",原因及解决方法