使用jQuery Mobile实现的数字时钟

ditigal clock with jquery.mobile.js

jquery, mobile, clock

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3251
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    $(document).on('pageshow', '#home', function() {
        var now, nowYear, nowMonth, nowDate, nowHour, nowMin, nowSec,
            month10, month1, day10, day1, hour10, hour1, min10, min1, sec10, sec1, timer;
        _noteShow();
        _clock();
        _getNowTime();
        _typeChange();

$(window).on('orientationchange', function() {
            _noteShow();
        });

function _getNowTime() {
            clearTimeout(timer);
            now = new Date();
            nowYear = now.getFullYear();
            nowMonth = now.getMonth() + 1;
            nowDate = now.getDate();
            nowWeek = _getDayOfWeek(nowYear + '-' + nowMonth + '-' + nowDate);
            nowHour = now.getHours();
            nowMin = now.getMinutes();
            nowSec = now.getSeconds();

$('.clock-week div').removeClass('week-day');
            $('.sec1 .show-time').removeClass('clock-' + sec1);
            $('.sec10 .show-time').removeClass('clock-' + sec10);
            $('.min1 .show-time').removeClass('clock-' + min1);
            $('.min10 .show-time').removeClass('clock-' + min10);
            $('.hour1 .show-time').removeClass('clock-' + hour1);
            $('.hour10 .show-time').removeClass('clock-' + hour10);
            sec10 = Math.floor(nowSec / 10);
            sec1 = nowSec % 10;
            min10 = Math.floor(nowMin / 10);
            min1 = nowMin % 10;
            hour10 = Math.floor(nowHour / 10);
            hour1 = nowHour % 10;

if ($('.time-type').hasClass('type24')) {} else {
                if (nowHour > 11) {
                    $('.time-type div:nth-child(3)').addClass('m');
                    if (nowHour == 12) {
                        hour10 = 1;
                        hour1 = 2;
                    } else {
                        nowHour = nowHour - 12;
                        hour10 = Math.floor(nowHour / 10);
                        hour1 = nowHour % 10;
                    }
                } else {
                    $('.time-type div:nth-child(2)').addClass('m');
                }
            }

day10 = Math.floor(nowDate / 10);
            day1 = nowDate % 10;
            month10 = Math.floor(nowMonth / 10);
            month1 = nowMonth % 10;

$('.clock-week div').eq(nowWeek).addClass('week-day');
            $('.sec1 .show-time').addClass('clock-' + sec1);
            $('.sec10 .show-time').addClass('clock-' + sec10);
            $('.min1 .show-time').addClass('clock-' + min1);
            $('.min10 .show-time').addClass('clock-' + min10);
            $('.hour1 .show-time').addClass('clock-' + hour1);
            $('.hour10 .show-time').addClass('clock-' + hour10);

timer = setTimeout(_getNowTime, 1000);
        }

function _clock() {
            $('.clock').html(
                '<div class="bg">' +
                '<span class="s1"></span>' +
                '<span class="s2"></span>' +
                '<span class="s3"></span>' +
                '<span class="s4"></span>' +
                '<span class="s5"></span>' +
                '<span class="s6"></span>' +
                '<span class="s7"></span>' +
                '</div>' +
                '<div class="show-time">' +
                '<span class="s1"></span>' +
                '<span class="s2"></span>' +
                '<span class="s3"></span>' +
                '<span class="s4"></span>' +
                '<span class="s5"></span>' +
                '<span class="s6"></span>' +
                '<span class="s7"></span>' +
                '</div>'
            );
            $('.clock-dot').html(
                '<div class="dot1"></div>' +
                '<div class="dot1-bg"></div>' +
                '<div class="dot2"></div>' +
                '<div class="dot2-bg"></div>'
            );
        }

function _getDayOfWeek(dayValue) {
            var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
            var today = new Array("SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT");
            //return today[day.getDay()];
            return day.getDay();
        }

function _typeChange() {
            $('.time-type').on('click', function() {
                $('.time-type').toggleClass('type24');
                _getNowTime();
            });
        }

function _noteShow() {
            if ($(window).width() < $(window).height()) {
                $('.note').show();
            } else {
                $('.note').hide();
            }
        }

});
})();

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body,
html,
#home,
.ui-content {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    text-shadow: none;
    font-family: 'Open Sans Condensed';
}
.ui-content {
    background: -webkit-linear-gradient(#aba 10%, #bcb 30%, #898);
    background: linear-gradient(#aba 10%, #bcb 30%, #898);
}
div {
    box-sizing: border-box;
}
.content {
    width: 100%;
    max-width: 400px;
    height: 200px;
    background: #cccfcc;
    padding: 5px;
    margin: 40px auto;
    box-shadow: 0 1px 0 rgba(120, 130, 120, .5), 0 10px 0 rgba(140, 150, 140, 1), 0 11px 5px rgba(0, 50, 0, .5), 0 18px 15px rgba(0, 50, 0, .7);
    border-radius: 20px;
}
.clock-body {
    width: 295px;
    padding: 10px 10px 30px 15px;
    margin: 15px auto;
    height: 150px;
    background: #ddd;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
    border-radius: 8px;
}
.clock-time {
    -webkit-transform: scale(.9);
    transform: scale(.9);
}
.clock-date {
    margin-top: -28px;
    margin-left: 200px;
    -webkit-transform: scale(.2);
    transform: scale(.2);
}
.sec1,
.sec10,
.min1,
.min10,
.hour1,
.hour10,
.day1,
.day10,
.month1,
.month10 {
    position: relative;
}
.sec1 {
    margin-left: 240px;
}
.sec10 {
    margin-left: 200px;
}
.min1 {
    margin-left: 140px;
}
.min10 {
    margin-left: 100px;
}
.hour1 {
    margin-left: 40px;
}
.hour10 {
    margin-left: 0px;
}
.day1 {
    margin-left: 120px;
}
.day10 {
    margin-left: 80px;
}
.month1 {
    margin-left: 40px;
}
.month10 {
    margin-left: 0px;
}
.show-time {
    top: -2px;
    left: 2px;
    z-index: 2;
}
.show-time,
.bg {
    position: absolute;
}
.clock .bg {
    z-index: 1;
    opacity: .05;
}
.clock .bg span {
    background: #000;
    box-shadow: none;
}
.clock .bg span::before,
.clock .bg span::after {
    content: '';
    position: absolute;
    border: 3px solid rgba(0, 0, 0, 0);
    width: 0;
    height: 0;
}
.clock span {
    display: block;
    width: 6px;
    height: 20px;
    background: #000;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, .6);
}
.clock span.s1,
.clock span.s4,
.clock span.s7 {
    width: 20px;
    height: 6px;
}
.clock span::before,
.clock span::after {
    content: '';
    position: absolute;
    border: 3px solid rgba(0, 0, 0, 0);
    width: 0;
    height: 0;
}
.clock span.s1 {} .clock span.s2,
.clock span.s5 {
    margin-top: 1px;
    margin-left: -7px;
}
.clock span.s3,
.clock span.s6 {
    margin-top: -20px;
    margin-left: 21px;
}
.clock span.s4,
.clock span.s7 {
    margin-top: 1px;
}
.clock span.s1::before,
.clock span.s4::before,
.clock span.s7::before {
    top: 0px;
    left: -6px;
    border-right-color: #000;
}
.clock span.s1::after,
.clock span.s4::after,
.clock span.s7::after {
    right: -6px;
    border-left-color: #000;
}
.clock span.s2::before,
.clock span.s3::before,
.clock span.s5::before,
.clock span.s6::before {
    top: -6px;
    border-bottom-color: #000;
}
.clock span.s2::after,
.clock span.s3::after,
.clock span.s5::after,
.clock span.s6::after {
    bottom: -6px;
    border-top-color: #000;
}
.clock .bg span.s1::before,
.clock .bg span.s4::before,
.clock .bg span.s7::before {
    border-right-color: #000;
}
.clock .bg span.s1::after,
.clock .bg span.s4::after,
.clock .bg span.s7::after {
    border-left-color: #000;
}
.clock .bg span.s2::before,
.clock .bg span.s3::before,
.clock .bg span.s5::before,
.clock .bg span.s6::before {
    border-bottom-color: #000;
}
.clock .bg span.s2::after,
.clock .bg span.s3::after,
.clock .bg span.s5::after,
.clock .bg span.s6::after {
    border-top-color: #000;
}
.clock-1 span.s1,
.clock-1 span.s2,
.clock-1 span.s4,
.clock-1 span.s5,
.clock-1 span.s7 {
    opacity: 0;
}
.clock-2 span.s2,
.clock-2 span.s6 {
    opacity: 0;
}
.clock-3 span.s2,
.clock-3 span.s5 {
    opacity: 0;
}
.clock-4 span.s1,
.clock-4 span.s5,
.clock-4 span.s7 {
    opacity: 0;
}
.clock-5 span.s3,
.clock-5 span.s5 {
    opacity: 0;
}
.clock-6 span.s3 {
    opacity: 0;
}
.clock-7 span.s2,
.clock-7 span.s4,
.clock-7 span.s5,
.clock-7 span.s7 {
    opacity: 0;
}
.clock-8 {} .clock-9 span.s5 {
    opacity: 0;
}
.clock-0 span.s4 {
    opacity: 0;
}
.clock-dot1 {
    position: relative;
    margin-left: 79px;
}
.clock-dot2 {
    position: relative;
    margin-left: 179px;
}
.dot1,
.dot2 {
    width: 6px;
    height: 6px;
    background: #000;
    position: absolute;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, .6);
}
.dot1 {
    top: 20px;
}
.dot2 {
    top: 35px;
}
.clock-week {
    width: 100%;
    margin: 0px 0 10px 7px;
}
.clock-week div {
    display: inline-block;
    font-size: 13px;
    margin: 5px 16px 5px 0;
    opacity: .15;
    font-weight: bold;
}
.clock-week div.week-day {
    opacity: 1;
    text-shadow: -1px 1px 2px rgba(0, 0, 0, .3);
}
.time-type {
    width: 100px;
    margin: 75px 0 10px 7px;
    cursor: pointer;
}
.time-type div {
    display: inline-block;
    font-size: 13px;
    margin: 5px 5px 5px 0;
    opacity: .15;
    font-weight: bold;
}
.time-type div.m {
    opacity: 1;
}
.time-type.type24 div {
    opacity: .15;
}
.time-type.type24 div:first-child {
    opacity: 1;
}
.note {
    width: 100%;
    text-align: center;
}

HTML

ditigal clock with jquery.mobile.js

jquery, mobile, clock

编辑器支持Emmet

快捷键

ditigal clock with jquery.mobile.js

jquery, mobile, clock

使用jQuery和Velocity.js实现的节日花展动画

使用jQuery.textillate.js实现的文本逐字母摇晃特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：