HTML5比较别致的一个双色调日历界面设计

Duotone calendar

html5, calendar, app

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* calendar built with the tutorial from https://liginc.co.jp/355474 */

var $window = $(window);
var $month = $('#js-month');
var $tbody = $('#js-calendar-body');

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

$window.on('load', function() {
    calendarHeading(currentYear, currentMonth);
    calendarBody(currentYear, currentMonth, today);
});

function calendarBody(year, month, today) {
    var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false;
    var startDate = new Date(year, month, 1);
    var endDate = new Date(year, month + 1, 0);
    var startDay = startDate.getDay();
    var endDay = endDate.getDate();
    var textSkip = true;
    var textDate = 1;
    var tableBody = '';

for (var row = 0; row < 6; row++) {
        var tr = '<tr>';

for (var col = 0; col < 7; col++) {
            if (row === 0 && startDay === col) {
                textSkip = false;
            }
            if (textDate > endDay) {
                textSkip = true;
            }
            var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : '';
            var textTd = textSkip ? '&nbsp;' : textDate++;
            var td = '<td class="' + addClass + '">' + textTd + '</td>';
            tr += td;
        }
        tr += '</tr>';
        tableBody += tr;
    }
    $tbody.html(tableBody);
}

function calendarHeading(year, month) {
    $month.text(month + 1);
}

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:600");
html,
body {
    width: 100%;
    height: 100%;
}
body {
    background-image: -webkit-linear-gradient(45deg, #fecdd3, #503282);
    background-image: linear-gradient(45deg, #fecdd3, #503282);
    overflow: hidden;
}
* {
    box-sizing: border-box;
}
.flex-contatiner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
}
.calendar-container {
    position: relative;
    width: 360px;
    height: 360px;
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    overflow: visible;
}
.image-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #503282;
}
.image {
    width: 100%;
    height: 100%;
    background-image: url("https://c1.staticflickr.com/4/3952/15549529232_83f16d2aa2_z.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-filter: url("#duotone");
    filter: url("#duotone");
}
.calendar {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: 10%;
    margin-left: 10%;
    padding-top: 15%;
    border: 10px solid #fff;
    font-family: 'Josefin Sans', sans-serif;
}
.calendar .month-title {
    position: absolute;
    top: -0.4em;
    left: -0.3em;
    margin: 0;
    font-size: 400px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    opacity: 0.15;
}
.calendar .calendar-table {
    position: absolute;
    width: 100%;
    height: 85%;
    color: #fff;
}
.calendar .calendar-table th,
.calendar .calendar-table td {
    text-align: center;
    font-size: 16px;
}
.calendar .calendar-table td {
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.calendar .calendar-table td:not(.is-today) {
    opacity: 0.5;
}
.calendar .calendar-table td:hover {
    opacity: 1;
}
.calendar .is-today {
    opacity: 1;
    background-color: #fff;
    color: #503282;
}

HTML

Duotone calendar

html5, calendar, app

编辑器支持Emmet

快捷键

Duotone calendar

html5, calendar, app

HTML5一款暗蓝色的计算器界面设计

HTML5极简风格的服装目录界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：