css 扁平布局,CSS3 扁平倾斜的得分卡

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(document).ready(function() {

function startTime() {

var today = new Date();

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

m = checkTime(m);

s = checkTime(s);

$('.time').text(h + ":" + m);

var t = setTimeout(startTime, 500);

}

function checkTime(i) {

if (i < 10) {

i = "0" + i

}; // add zero in front of numbers < 10

return i;

}

var d = new Date();

var month = new Array(12);

month[0] = "January";

month[1] = "February";

month[2] = "March";

month[3] = "April";

month[4] = "May";

month[5] = "June";

month[6] = "July";

month[7] = "August";

month[8] = "September";

month[9] = "October";

month[10] = "November";

month[11] = "December";

var weekday = new Array(7);

weekday[0] = "Sunday";

weekday[1] = "Monday";

weekday[2] = "Tuesday";

weekday[3] = "Wednesday";

weekday[4] = "Thursday";

weekday[5] = "Friday";

weekday[6] = "Saturday";

var n = weekday[d.getDay()];

var m = month[d.getMonth()];

var day = d.getDate();

startTime();

$('.date').text(n + ', ' + m + ' ' + day)

var pages = 12;

for (p = 0; p < pages; p++) {

$.getJSON("http://cpv2api.com/pens/public/npr?page=" + p, function(resp) {

if (resp.success) {

var responseViews = [];

for (i = 0; i < resp.data.length; i++)

// console.log( resp.data[i]);

responseViews.push(resp.data[i].views)

var totalViews;

// do something awesome

}

console.log('response views ' + responseViews)

});

}

})

anime({

targets: ['.collection-item'],

delay: function(el, index) {

return index * 90;

},

translateY: '-100px',

direction: 'reverse',

opacity: [1, 0]

});

anime({

targets: ['.greeting', '.date'],

delay: function(el, index) {

return index * 180;

},

translateY: '-70px',

direction: 'reverse',

opacity: [1, 0]

});