JS cool clock production

By supplementing the code that implements the real-time clock displays the current time: year, month, day, hour, minute, second, date.

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>超酷时钟的制作</title>
    <style>
        .container {
            text-align: center;
            font-size: 28px;
            color: #ccc;
            background-color: #ccc;
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        .container span{
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>超酷时钟</p>
        <p><span class='year'>2012</span><span class='month'>09</span><span class='date'>02</span></p>
        <p><span class='hours'>08</span><span class='minutes'>08</span><span class='seconds'>08</span>星期<span
                class='day'></span></p>
    </div>
    <script type="text/javascript">
  Script</supplementary code//
    >
</body>

</html>

Answer:

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>数码时钟</title>
    <style>
        .container {
            text-align: center;
            font-size: 28px;
            color: #ccc;
            background-color: #ccc;
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }

        .container span {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>超酷时钟</p>
        <p><span class='year'>2012</span><span class='month'>09</span><span class='date'>02</span></p>
        <p><span class='hours'>08</span><span class='minutes'>08</span><span class='seconds'>08</span>星期<span
                class='day'></span></p>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            function byClass(arg) {
                return typeof (arg) === 'string' ? document.getElementsByClassName(arg)[0] : arg;
            }
            was oYear = byClass ( ' year ' );
            was oMonth = byClass ( ' month ' );
            was Ōdate = byClass ( ' date ' );
            was oHour = byClass ( ' hours ' );
            was oMinute = byClass ( ' minutes ' );
            was oSecond = byClass ( ' seconds ');
            var oDay = byClass('day');
            function toDuble(n) {
                if (n < 10) {
                    return '0' + n;
                } else {
                    return n;
                }

            }

            function getTime(arg) {
                var time = null;
                var oDate = new Date();
                switch (arg) {
                    case 'year':
                        time = oDate.getFullYear();
                        break;
                    case 'month':
                        time = toDuble(oDate.getMonth() + 1);
                        break;
                    case 'date':
                        time = toDuble(oDate.getDate());
                        break;
                    case 'hours':
                        time = toDuble(oDate.getHours());
                        break;
                    case 'minutes':
                        time = toDuble(oDate.getMinutes());
                        break;
                    case 'seconds':
                        time = toDuble(oDate.getSeconds());
                        break;
                    case 'day':
                        time = daySwith(oDate.getDay());
                        break;
                }
                return time;
            }

            function daySwith(arg) {
                var day = null;
                switch (arg) {
                    case 0:
                        day = '';
                        break;
                    case 1:
                        day = '';
                        break;
                    case 2:
                        day = '';
                        break;
                    case 3:
                        day = '';
                        break;
                    case 4:
                        day = '';
                        break;
                    case 5:
                        day = '';
                        break;
                    case 6:
                        day = '';
                        break;
                    default:
                        Day =  " appears bug " ;
                }
                return day;
            }
            function switchContent() {
                oYear.innerHTML = getTime('year');
                oMonth.innerHTML = getTime('month');
                oDate.innerHTML = getTime('date');
                oHour.innerHTML = getTime('hours');
                oMinute.innerHTML = getTime('minutes');
                oSecond.innerHTML = getTime('seconds');
                oDay.innerHTML = getTime('day');
            }
            setInterval(switchContent, 1000);
            switchContent();
        }
    </script>
</body>

</html>

 

Guess you like

Origin www.cnblogs.com/f6056/p/11096349.html