init
This commit is contained in:
296
Html-Javascript/移动端/index.html
Normal file
296
Html-Javascript/移动端/index.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!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
|
||||
|
||||
|
||||
-->
|
||||
Reference in New Issue
Block a user