js编写一个时钟时间插件效果代码

代码语言:html

所属分类:其他

代码描述:js编写一个时钟时间插件效果代码

代码标签: js 时钟 时间 插件

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel='stylesheet' type='text/css'>
    <style>
        body {
            background: #fafafa;
        }

        .container {
            margin: 150px auto;
            max-width: 960px;
            font-family: 'Orbitron';
        }

            .container span {
                display: inline-block;
                padding: 10px;
                background: #222;
                color: #fff;
                border-radius: 3px;
                text-align: center;
            }

        h1 {
            margin-bottom: 5rem;
        }
    </style>
</head>

<body>
    <div class="container">
      
        <div>
            <span id="date"></span>
            <span id="month"></span>
            <span id="year"></span>

            <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
        </div>
    </div>
    <script>
        class Clock {
    defaultOptions = {
        dateId: 'date',
        monthId: 'month',
        yearId: 'year',
        hoursId: 'hours',
        minutesId: 'minutes',
        secondsId: 'seconds',
        timeZoneOffset: null,
        monthNames: [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ]
    };

    constructor(options) {
        // options = {
        //     dateId: 'date',
        //     monthId: 'month',
        //     yearId: 'year',
        //     hoursId: 'hours',
        //     minutesId: 'minutes',
        //     secondsId: 'seconds',
        //     timeZoneOffset: +4.00,
        //     monthNames: [
        //         'January',
        //         'February',
        //         'March',
        //         'April',
        //         'May',
        //         'June',
        //         'July',
        //         'August',
        //         'September',
        //         'October',
        //         'November',
        //         'December'
        //     ]
        // }
        if (typeof options === 'undefined') {
            options = this.defaultOptions;
        }

        const .........完整代码请登录后点击上方下载按钮下载查看

网友评论0