console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>作息时间表</title>
    <meta name="viewport" content="width=device-width"/>
    <style type="text/css">
        body{
            margin: 0;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

        table tr {
            background: #fff;
        }

        table td, table th {
            border: 1px solid #151414b8;
            color: #666;
            height: 30px;
        }

        table th {
            padding: 5px;
        }

        table tr th, table tr td{
            min-width: 53px;
        }

        table tr.gray{
            background: #f3ebeb;
        }

        table tr.gray th, table tr.gray td{
            color: #af8a8a;
            border: 1px solid #cad9ea;
        }

        table tr.green{
            background: #016901;
        }

        table tr.green th, table tr.green td{
            color: #fff;
            font-weight: bolder;
        }

    </style>
</head>
<body onclick="window.location.reload()">
    <table id="schedule">
        <tr>
            <th></th>
            <th><span id="Today"></span></th>
            <th>Minutes</th>
        </tr>
    </table>
</body>
<script type="text/javascript">
    var data = {
        'Working Day': [
            {action: 'Get Up & Drink Water', begin: '06:40', end: '06:45'},
            {action: 'Use Toilet', begin: '06:45', end: '07:05'},
            {action: 'Wash & Rinse', begin: '07:05', end: '07:15'},
            {action: 'Go To Work', begin: '07:15', end: '07:45'},
            {action: 'Breakfast', begin: '07:45', end: '07:52'},
            {action: 'Working', begin: '08:00', end: '10:00'},
            {action: 'Stretch', begin: '10:00', end: '10:05'},
            {action: 'Working', begin: '10:05', end: '12:00'},
            {action: 'Lunch', begin: '12:00', end: '12:25'},
            {action: 'Midday Sleep', begin: '12:35', end: '13:30'},
            {action: 'Stretch', begin: '13:30', end: '13:35'},
            {action: 'Working', begin: '13:35', end: '15:35'},
            {action: 'Stretch', begin: '15:35', end: '15:40'},
            {action: 'Working', begin: '15:40', end: '17:30'},
            {action: 'Go Home', begin: '17:30', end: '18:10'},
            {action: 'Make Dinner', begin: '18:10', end: '19:00'},
            {action: 'Dinner', begin: '19:00', end: '19:30'},
            {action: 'Wash & Clear', begin: '19:30', end: '20:00'},
            {action: 'Take A Shower', begin: '20:00', end: '20:30'},
            {action: 'Work Or Study Or Play', begin: '20:30', end: '22:00'},
            {action: 'Sleep', begin: '22:00', end: '30:40'}
        ],
        'Weekend': [
	
        ],
        latest_work_saturday: '2019-08-31'
    };

    init();

    function init(){
        if(new Date(data.latest_work_saturday).getDay() == 6){
            create_schedule();
            window.location.hash = '#cur_state';
        }else{
            alert('初始化时间表失败，最近周六上班的时间：' + data.latest_work_saturday + ' 不是周六！');
        }
    }

    function create_schedule() {
        var date = new Date();
        var cur_minutes =  date.getHours() + ':' + date.getMinutes();
				
        var span = 
        if(date.getDay() == 0){
             document.getElementById('Today').innerText = 'Weekend';
        }
        else if(date.getDay() == 6 && is_work_day(date, new Date(data.latest_work_saturday))){  //cur saturday is work ?
            
        }
        
        
        
        for(var i = 0; i < data.working.length; i++){
            var tr = document.createElement('tr');

            var th = document.createElement('th');
            th.appendChild(document.createTextNode(data.working[i].action));

            var td = document.createElement('td');
            td.appendChild(document.createTextNode(data.working[i].begin + ' ~ ' + data.working[i].end));

            var td2 = document.createElement('td');
            td2.appendChild(document.createTextNode(get_minutes(data.working[i].end) - get_minutes(data.working[i].begin)));

            tr.appendChild(th);
            tr.appendChild(td);
            tr.appendChild(td2);

            if(get_minutes(cur_minutes) > get_minutes(data.working[i].end)){
                tr.className = 'gray'
            }else if(get_minutes(data.working[i].begin) < get_minutes(cur_minutes)
                && get_minutes(cur_minutes) <= get_minutes(data.working[i].end)) {
                tr.className = 'green'
                tr.id = 'cur_state';
            }

            document.getElementById('schedule').appendChild(tr);
        }
    }

    //参数 str 07:00
    function get_minutes(str) {
        var arr = str.split(":");

        return parseInt(arr[0]) * 60 + parseInt(arr[1]);
    }

    function is_work_day(cur_dt, latest_dt){
        cur_dt = cur_dt || new Date();

        var y = latest_dt.getFullYear(), sat_dts = [], tmp_dt;
        for(var m = latest_dt.getMonth(); m <= cur_dt.getMonth(); m++){
            var first_day = new Date(y, m, 1);
            var last_day = new Date(y, m + 1, 0); 
            
            for(var day = first_day; day <= last_day; day++){
                tmp_dt = new Date(y + '-' + m + '-' + day);
                if(tmp_dt.getDay() == 6 && tmp_dt >= latest_dt)
                    sat_dts.push(tmp_dt);
            }
        }
        console.log(sat_dts);
        var is_work = sat_dts[0] == latest_dt;
        for(var i = 0; i < sat_dts.length; i++){
            is_work = !is_work;
            if(cur_dt == sat_dts[i])
              break;
        }
        
        return is_work;
    }
</script>
        
        
        
        
        
    }
</script>
</html>