270 lines
11 KiB
HTML
270 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" style=" font-size: 20px;">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<script src="./js/DOMClass.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body,
|
|||
|
|
html {
|
|||
|
|
margin: 0;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app p {
|
|||
|
|
font-size: 10rem;
|
|||
|
|
width: 750rem;
|
|||
|
|
background-color: salmon;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 10rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content h3 {
|
|||
|
|
padding-left: 20rem;
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 43rem;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 15rem;
|
|||
|
|
background-color: sandybrown;
|
|||
|
|
padding: 10rem 20rem;
|
|||
|
|
position: relative;
|
|||
|
|
top: -30rem;
|
|||
|
|
left: -20rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 700rem;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rem;
|
|||
|
|
padding: 20px 30px 0;
|
|||
|
|
margin: 15rem 0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1,
|
|||
|
|
.t2,
|
|||
|
|
.t3 {
|
|||
|
|
font-size: 30rem;
|
|||
|
|
color: #707070;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-bottom: 20rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1 b {
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1 span {
|
|||
|
|
color: #F66A4B;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t2 b {
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="app">
|
|||
|
|
<header>瞎几把写</header>
|
|||
|
|
<div class="content">
|
|||
|
|
<!-- <div class="item">
|
|||
|
|
<h3>1月</h3>
|
|||
|
|
<div class="t1"><b>快捷</b> <span>￥0.8</span> </div>
|
|||
|
|
<div class="t2"><b>订单号：xxxxx</b> <span>收款￥200</span> </div>
|
|||
|
|
<div class="t3">2022.01.14</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// rem 做移动端布局
|
|||
|
|
// 1rem = 750/1
|
|||
|
|
// 750rem = 1
|
|||
|
|
window.onresize = () => {
|
|||
|
|
let html = document.documentElement;
|
|||
|
|
// 活学活用
|
|||
|
|
html.style.fontSize = `${document.body.clientWidth / 750}px`;
|
|||
|
|
console.log(document.body.clientWidth);
|
|||
|
|
}
|
|||
|
|
window.onresize();
|
|||
|
|
|
|||
|
|
// 创造数据
|
|||
|
|
class creatData {
|
|||
|
|
constructor(num) {
|
|||
|
|
this.data = [];
|
|||
|
|
for (let index = 0; index < num; index++) {
|
|||
|
|
let o = {
|
|||
|
|
title: "快捷" + this.random(1, 20),
|
|||
|
|
yinli: this.random(0, 10, true),
|
|||
|
|
order: this.random(1111111, 9999999), shoukuan: this.random(99, 9999),
|
|||
|
|
// tiem: this.chulitime(new Date(`2022.${this.twoNumber(this.random(1, 12))}.14`))
|
|||
|
|
tiem: this.random(1, 12)
|
|||
|
|
};
|
|||
|
|
this.data.push(o);
|
|||
|
|
// this.data.push(o);
|
|||
|
|
// this.data.push(o);
|
|||
|
|
// this.data.push(o);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 随机整型
|
|||
|
|
random = (min, max, boo) => {
|
|||
|
|
if (boo) return Math.random() * (max - min) + min;
|
|||
|
|
return Math.round(Math.random() * (max - min) + min);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理时间
|
|||
|
|
chulitime = function (date) {
|
|||
|
|
let n = date.getFullYear();
|
|||
|
|
let m = date.getMonth() + 1;
|
|||
|
|
let d = date.getDate();
|
|||
|
|
return `${this.twoNumber(n)}-${this.twoNumber(m)}-${this.twoNumber(d)}`
|
|||
|
|
}
|
|||
|
|
// 处理0
|
|||
|
|
twoNumber = function (num) {
|
|||
|
|
return num >= 10 ? num : `0${num}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 生成数据
|
|||
|
|
let cdata = new creatData(30);
|
|||
|
|
// console.log(JSON.stringify(cdata.data));
|
|||
|
|
|
|||
|
|
|
|||
|
|
// let cdata = [{ "title": "快捷20", "yinli": 1.2004947935132715, "order": 3262211, "shoukuan": 6521, "tiem": 4 }, { "title": "快捷5", "yinli": 7.35335443886493, "order": 3378466, "shoukuan": 7842, "tiem": 9 }, { "title": "快捷3", "yinli": 3.8289985173714314, "order": 2429744, "shoukuan": 1386, "tiem": 3 }, { "title": "快捷3", "yinli": 5.8900889549962905, "order": 6568303, "shoukuan": 9578, "tiem": 9 }, { "title": "快捷5", "yinli": 2.081492803426057, "order": 4853339, "shoukuan": 7094, "tiem": 8 }, { "title": "快捷6", "yinli": 7.367918594601108, "order": 3743194, "shoukuan": 9192, "tiem": 11 }, { "title": "快捷14", "yinli": 8.749539294759717, "order": 4463467, "shoukuan": 4756, "tiem": 6 }, { "title": "快捷10", "yinli": 0.4396618405802921, "order": 7847662, "shoukuan": 4782, "tiem": 6 }, { "title": "快捷7", "yinli": 1.1180068932670673, "order": 8881770, "shoukuan": 7542, "tiem": 10 }, { "title": "快捷9", "yinli": 6.797118292703828, "order": 3075520, "shoukuan": 7373, "tiem": 11 }, { "title": "快捷10", "yinli": 9.075198709308536, "order": 6533969, "shoukuan": 265, "tiem": 6 }, { "title": "快捷20", "yinli": 8.598668955886847, "order": 9500107, "shoukuan": 9910, "tiem": 10 }, { "title": "快捷11", "yinli": 7.76909180880142, "order": 9619080, "shoukuan": 4701, "tiem": 9 }, { "title": "快捷14", "yinli": 8.8575780251768, "order": 3542706, "shoukuan": 3676, "tiem": 5 }, { "title": "快捷3", "yinli": 5.696412140248539, "order": 3257784, "shoukuan": 4868, "tiem": 3 }, { "title": "快捷15", "yinli": 9.977736937338303, "order": 8082630, "shoukuan": 396, "tiem": 6 }, { "title": "快捷12", "yinli": 6.246839044648215, "order": 1613209, "shoukuan": 1888, "tiem": 5 }, { "title": "快捷8", "yinli": 4.906031465813494, "order": 5399713, "shoukuan": 2921, "tiem": 10 }, { "title": "快捷2", "yinli": 0.8326504700983572, "order": 2899043, "shoukuan": 4873, "tiem": 11 }, { "title": "快捷13", "yinli": 2.717042078114409, "order": 7026973, "shoukuan": 4713, "tiem": 5 }, { "title": "快捷11", "yinli": 5.120007246070246, "order": 8968655, "shoukuan": 9276, "tiem": 9 }, { "title": "快捷2", "yinli": 7.371393451843639, "order": 6031585, "shoukuan": 1752, "tiem": 5 }, { "title": "快捷17", "yinli": 6.717624881581685, "order": 8756194, "shoukuan": 8172, "tiem": 4 }, { "title": "快捷9", "yinli": 8.337589448325959, "order": 7011616, "shoukuan": 4258, "tiem": 11 }, { "title": "快捷15", "yinli": 8.742851652641189, "order": 8528791, "shoukuan": 1614, "tiem": 9 }, { "title": "快捷9", "yinli": 4.827034226901114, "order": 9047823, "shoukuan": 5249, "tiem": 5 }, { "title": "快捷3", "yinli": 7.350190870381046, "order": 4535017, "shoukuan": 4423, "tiem": 2 }, { "title": "快捷20", "yinli": 5.352794453440925, "order": 5530410, "shoukuan": 3684, "tiem": 2 }, { "title": "快捷4", "yinli": 4.4537656794657625, "order": 1613488, "shoukuan": 5188, "tiem": 8 }, { "title": "快捷6", "yinli": 8.545661245064252, "order": 1859051, "shoukuan": 1314, "tiem": 6 }]
|
|||
|
|
// 方便使用
|
|||
|
|
data = cdata.data;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function paixu(arr) {
|
|||
|
|
let o = JSON.parse(JSON.stringify(arr));
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
for (let j = 0; j < arr.length - i - 1; j++) {
|
|||
|
|
let el0 = new Date(o[i - j].tiem).getTime();
|
|||
|
|
let el1 = new Date(o[i - j + 1].tiem).getTime();
|
|||
|
|
// 当前项 大于 当前前项
|
|||
|
|
if (el0 < el1) {
|
|||
|
|
// 我就将 当前项 与当前前项 互换位置
|
|||
|
|
let cy0 = JSON.parse(JSON.stringify(o[i - j])); // 注意复杂数据类型
|
|||
|
|
let cy1 = JSON.parse(JSON.stringify(o[i - j + 1])); // 注意复杂数据类型
|
|||
|
|
o[i - j + 1] = cy0;
|
|||
|
|
o[i - j] = cy1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return o;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data = paixu(data);
|
|||
|
|
// 争对时间排序ok的情况
|
|||
|
|
// 如何去算
|
|||
|
|
function fenge(de) {
|
|||
|
|
let o = JSON.parse(JSON.stringify(de));
|
|||
|
|
let yue = [];
|
|||
|
|
for (let i = 0; i < de.length; i++) {
|
|||
|
|
const element = o[i];
|
|||
|
|
let date = new Date(element.tiem);
|
|||
|
|
let m = date.getMonth() + 1;
|
|||
|
|
o[i].m = m;
|
|||
|
|
// 控制显示
|
|||
|
|
if (yue.includes(m)) {
|
|||
|
|
o[i].show = 'none'
|
|||
|
|
} else {
|
|||
|
|
yue.push(m);
|
|||
|
|
o[i].show = 'inline-block'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return o;
|
|||
|
|
}
|
|||
|
|
data = fenge(data);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 渲染
|
|||
|
|
function view(data) {
|
|||
|
|
console.log(data);
|
|||
|
|
for (let index = 0; index < data.length; index++) {
|
|||
|
|
const elet = data[index];
|
|||
|
|
new DOMClass({
|
|||
|
|
el: "div",
|
|||
|
|
className: "item",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "h3", innerText: `${elet.m}月`, style: {
|
|||
|
|
display: elet.show
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t1",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "b",
|
|||
|
|
innerText: elet.title
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "span",
|
|||
|
|
innerText: elet.yinli.toFixed(2)
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t2",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "b",
|
|||
|
|
innerText: `订单号：${elet.order}`
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "span",
|
|||
|
|
innerText: `收款￥${elet.shoukuan}`
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t3",
|
|||
|
|
innerText: elet.tiem
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}, document.querySelector("#app .content"));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
view(data);
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|