前言
- 页面顶部有一个容器盒子,盒子里面有两个元素:一个子元素需要居中,另一个子元素需要靠近容器的右边
- 目标效果如下:
实现
使用弹性布局+百分比来实现
1、template部分
顶部由标题和当前时间组成:
<template>
<div class="Container">
<header>
<!-- 标题 -->
<h1>数据看板</h1>
<!-- 当前时间 -->
<div class="showTime">{
{
currentTime }}</div>
</header>
</div>
</template>
2、当前时间的相关代码
- 主要逻辑如下:
- 获取当前时间的函数如下:
// 当前时间读取
function time() {
t = setTimeout(time, 1000); //開始运行
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear(); //年
var mt = dt.getMonth() + 1; //月
var day = dt.getDate(); //日
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
var week = getYearWeek(y, mt, day); //获取周
currentTime.value =
"当前时间:" +
y +
"年" +
mt +
"月" +
day +
"日" +
"-" +
h +
"时" +
m +
"分" +
s +
"秒" +
"(第" +
week +
"周)";
t = setTimeout(time, 1000); //设定定时器,循环运行
}
- 函数:获取当前日期是本年度的第几周
// 获取当前日期是本年度的第几周
function getYearWeek(a, b, c) {
var date1 = new Date(a, parseInt(b) - 1, c), //当前日期
date2 = new Date(a, 0, 1), //当年第一天
// d是当前日期是今年第多少天
d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
// d + 当前年的第一天的周差距的和在除以7就是本年第几周
return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
}
- 当前时间的展示格式如下:
包含年月日、时分秒、以及第几周
3、style部分
- 主要逻辑如下:
4、结果
- 效果如下:
- 浏览器缩小之后,2个子元素没有发生重叠: