极客观点
项目管理
HarmonyOS
如图所示，第一张图为PC时居中显示可行，第二张图为在移动端时，显示为滚动。
问题：移动端如何让7始终在可视范围内（向右滚动也）始终保持居中。
难点：动态的数据，今天3号，明天4号，3号就会不显示，8月份会加多个7号出现，在这样变动数据下如何实现以上所述问题。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>年月周几表格</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
}
#wrap {
width: 100%;
overflow: scroll;
}
table {
border: 1px solid;
text-align: center;
width: 100%；
}
td {
border: 1px solid;
}
div.left {
width: 30%;
height: 120px;
background: pink;
}
div.right {
width: 70%;
height: auto;
}
</style>
</head>
<body>
<div id="wrap">
<table id="content">
</table>
<table id="date">
<tr id="month"></tr>
<tr id="week"></tr>
<tr id="day"></tr>
</table>
</div>
<script>
var json = {
data: [{
num: 'A0001',
ontime: '2019-7-1',
uptime: '2019-7-6',
showtime: '2019-7-25',
},
{
num: 'A002',
ontime: '2019-7-2',
uptime: '2019-7-8',
showtime: '2019-7-30',
},
{
num: 'B001',
ontime: '2019-6-2',
uptime: '2019-6-8',
showtime: '2019-6-30',
}
]
}
var result_len = JSON.stringify(json.data.length);
var result_time = [];
for (let i = 0; i < result_len; i++) {
result_time.push(json.data[i].ontime);
result_time.push(json.data[i].uptime);
result_time.push(json.data[i].showtime);
}
var max_date = result_time[0],
min_date = result_time[0];
console.log(result_time);
for (let i = 0; i < result_time.length; i++) {
if (new Date(max_date).getTime() < new Date(result_time[i]).getTime()) {
max_date = result_time[i];
}
if (new Date(min_date).getTime() > new Date(result_time[i]).getTime()) {
min_date = result_time[i]
}
}
console.log(max_date, min_date);
// 当前日期时间
var date = new Date();
// 当前年份
var year = date.getFullYear();
var data1 = getCurrentDateData(date.getMonth() + 1);
console.log(data1);
var data2 = getDateData(date.getMonth() + 2);
console.log(data2);
var data3 = getDateData(date.getMonth() + 3);
console.log(data3);
// 要显示的格数 31天 23格 30天,29天 22格 28天 20格
var count = 25;
var count_temp = count;
// drawTable([data1, data2, data3]);
drawTable([data1, data2]);
// 获取某月总天数
function getDayNum(m, year) {
switch (m) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
break;
case 2:
return isLeapYear(year) ? 29 : 28;
break;
case 4:
case 6:
case 9:
case 11:
return 30;
break;
default:
return '月份错误';
}
}
// 是否闰年
function isLeapYear(y) {
if (year % 100 == 0) {
if (year % 400 == 0) {
return true;
}
} else {
if (year % 4 == 0) {
return true;
}
}
return false;
}
// 周几转换
function changeDay(day) {
switch (day) {
case 1:
return '一';
break;
case 2:
return '二';
break;
case 3:
return '三';
break;
case 4:
return '四';
break;
case 5:
return '五';
default:
return 'null';
}
}
// 传入月份，获取总天数
function dayAll(month) {
return getDayNum(month, year);
}
// v-2
// 存储为数组
function getDateData(month) {
console.log('————————————' + month + '月份：' + '——————————');
var date_new = new Date(year + '-' + month + '-' + '1');
ri = date_new.getDate();
day = date_new.getDay();
var m, days = [],
weeks = [];
m = month;
for (; ri < dayAll(month) + 1; ri++) {
if (day <= 5) {
console.log(ri + '号---' + '周' + changeDay(day));
weeks.push(changeDay(day));
days.push(ri);
day++;
} else {
var day_tmp = day;
if (day_tmp == 6) {
console.log('周六');
day++;
} else if (day_tmp == 7) {
day = 1;
console.log('周日');
}
}
}
return {
'month': m,
'days': days,
'weeks': weeks
};
}
function getCurrentDateData(month) {
console.log('————————————' + month + '月份：' + '——————————');
// var date = new Date();
ri = date.getDate();
day = date.getDay();
console.log('当前日为：' + ri);
console.log('星期' + day);
var m, days = [],
weeks = [];
m = month;
for (; ri < dayAll(month) + 1; ri++) {
if (day <= 5 && day > 0) {
console.log(ri + '号---' + '周' + changeDay(day));
weeks.push(changeDay(day));
days.push(ri);
day++;
} else {
var day_tmp = day;
if (day_tmp == 6) {
console.log('周六');
day++;
} else if (day_tmp == 7) {
day = 1;
console.log('周日');
}
}
}
return {
'month': m,
'days': days,
'weeks': weeks
};
}
function drawTable(args) {
var arg_len = args.length;
let tmonth = '';
let tweek = '';
let tdays = '';
let noshow;
for (let i = 0; i < arg_len; i++) {
let week_len = args[i].weeks.length;
if (args[i].days != '') {
console.log('我有值：' + args[i].days);
tmonth += `<td colspan=${week_len}>${args[i].month}</td>`;
}
for (let j = 0; j < week_len; j++) {
if (count > 0) {
tweek += '<td>' + args[i].weeks[j] + '</td>';
count--;
console.log('count值为：' + count);
}
}
}
if (count == 0) {
count = count_temp;
console.log('count值为：' + count);
}
for (let i = 0; i < arg_len; i++) {
let week_len = args[i].weeks.length;
for (let k = 0; k < week_len; k++) {
if (count > 0) {
tdays += '<td>' + args[i].days[k] + '</td>';
count--;
// if(count == 25){
// noshow = true;
// }
}
}
}
document.getElementById('month').innerHTML = tmonth;
document.getElementById('week').innerHTML = tweek;
document.getElementById('day').innerHTML = tdays;
}
</script>
</body>
</html>
html5
首先第一点，不要用 table 布局，然后呢，调整你的布局方式为 div, 最后，就是上媒体查询吧，比如：
具体的细节，你自己看着弄一下哈。或者你应该找一个前端帮帮忙。