296 lines
8.4 KiB
HTML
296 lines
8.4 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="./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.random(1, 12)}.14`))
|
||
};
|
||
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(55);
|
||
console.log(cdata);
|
||
|
||
// 方便使用
|
||
data = cdata.data;
|
||
|
||
function paixu(arr) {
|
||
let o = JSON.parse(JSON.stringify(arr));
|
||
// 排序每一个
|
||
for (let j = 0; j < arr.length; j++) {
|
||
// 排了一个序
|
||
// (arr.length - j) 优化 不需要重复的对比
|
||
for (let i = 0; i < (arr.length - j); i++) {
|
||
if (i == arr.length - 1) continue;
|
||
let el0 = new Date(o[i].tiem).getTime();
|
||
let el1 = new Date(o[i + 1].tiem).getTime();
|
||
// 当前项 大于 当前前项
|
||
if (el0 > el1) {
|
||
// 我就将 当前项 与当前前项 互换位置
|
||
let cy0 = JSON.parse(JSON.stringify(o[i])); // 注意复杂数据类型
|
||
let cy1 = JSON.parse(JSON.stringify(o[i + 1])); // 注意复杂数据类型
|
||
o[i + 1] = cy0;
|
||
o[i] = 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);
|
||
|
||
|
||
|
||
// console.log(cdata.data);
|
||
// data = paixu(cdata.data);
|
||
// console.log(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>
|
||
|
||
<!-- 750 / 750 1px -->
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<!-- 介绍 常规的一些布局单位
|
||
px vh vw % em rem
|
||
|
||
em 1em
|
||
它本身大小
|
||
em 说白了就是根据父盒子的字体大小, 的比例单位
|
||
公式: 父盒子字体大小 * (n)em
|
||
|
||
rem
|
||
公式: html字体大小 * (n)rem
|
||
-->
|
||
|
||
|
||
<!-- 移动端
|
||
像素: 显示像素 物理像素
|
||
|
||
显示像素: 你显示的图片
|
||
物理像素: 你买的显示器的分辨率
|
||
|
||
物理像素 显示像素
|
||
1 : 1 // 1倍显示 正常的
|
||
1 : 2 //
|
||
2 : 1 // 2倍屏 2倍图
|
||
|
||
设计稿 -> 2倍图 设计稿 -> W: 750
|
||
设计稿 -> 1倍图 设计稿 -> W: 375
|
||
|
||
|
||
--> |