如图,如何让样式动态居中

clipboard.png

clipboard.png

如图所示,第一张图为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>
阅读 1.9k
2 个回答

首先第一点,不要用 table 布局,然后呢,调整你的布局方式为 div, 最后,就是上媒体查询吧,比如:

ul.months
  li
    h3 七月
    .days
      span <i>三</i>3
      span <i>四</i>4
      span <i>五</i>5
      span <i>六</i>6
      ...
  li
    h3 八月
    .days
      ...
@media (max-width: 768px) {
  .month { width: 100%; position: relative;
    li {
      h3 { display: none;}
      :first-child h3 { display: block; position: absolute; top: 0; left: 0;}
    }
    padding-top: 30px;
    .days { white-space: nowrap; 
      span { display: inline-block; 
        i { display: block;}
      }
    }  
  }
}

具体的细节,你自己看着弄一下哈。或者你应该找一个前端帮帮忙。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题