Explodierende Digital Uhr beim berühren
Der benutzte Code hier
TOUCH ME BABY!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
LETTERS = {}
LETTERS['0'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[1, 1, 0, 0, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS['1'] = [
[0, 0, 1, 1, 0],
[0, 1, 1, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 1, 1, 0],
[0, 0, 1, 1, 0]
]
LETTERS['2'] = [
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 0],
[1, 1, 1, 1, 1]
]
LETTERS['3'] = [
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS['4'] = [
[1, 1, 0, 0, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[0, 0, 0, 0, 1]
]
LETTERS['5'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 0],
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS['6'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 0],
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS['7'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[0, 0, 0, 0, 1],
[0, 0, 0, 0, 1],
[0, 0, 0, 0, 1]
]
LETTERS['8'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS['9'] = [
[1, 1, 1, 1, 1],
[1, 1, 0, 0, 1],
[1, 1, 1, 1, 1],
[0, 0, 0, 0, 1],
[1, 1, 1, 1, 1]
]
LETTERS[':'] = [
[0, 0, 0, 0, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0],
[0, 0, 1, 1, 0],
[0, 0, 0, 0, 0]
]
</script>
<script>
function forPixelInLetter(letterElem, callback) {
for(var i=0; i<5; i++) {
for(var j=0; j<5; j++) {
el = letterElem.find(".px"+i+"-"+j)
callback(el, i, j);
}
}
}
function createLetter(id) {
var master = $("
")
for(var i=0; i<5; i++) {
var div = $("
")
for(var j=0; j<5; j++) {
div.append("
")
}
master.append(div)
}
return master
}
function implode(el, letterElem) {
forPixelInLetter(letterElem, function(pixelElem) {
pixelElem.css({
'-webkit-transform': "translate3d(0px,0px,0px) rotate(0deg)"
})
})
}
function explodeLetter(elem) {
var lastElem;
forPixelInLetter(elem, function(pixelElem) {
lastElem = pixelElem
var x = Math.floor((Math.random()-0.5)*800)
var y = Math.floor((Math.random()-0.5)*800)
pixelElem.css({
'-webkit-transform': "translate3d("+x+"px, "+y+"px, 0px) rotate("+Math.floor((Math.random())*360)+"deg)"
})
})
// Call implode
lastElem.bind('webkitTransitionEnd', function(e) {
setTimeout(function() {
implode(lastElem, elem);
}, 400)
})
}
function changeLetter(letter, letterElem) {
forPixelInLetter(letterElem, function(pixelElem, i, j) {
if (LETTERS[letter][j][i]) {
pixelElem.css('opacity', '1')
} else {
pixelElem.css('opacity', '0')
}
})
}
function bindExplode(el) {
el.bind('click', function() {
explodeLetter(el)
return false
})
}
function bindTouchMod(elem, bindOn) {
if (!bindOn) {
bindOn = elem;
}
elem = $(elem);
bindOn = $(bindOn);
// http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
var rotation = 0;
var scale = 1;
bindOn.bind('gesturechange', function(e) {
var changeScale = e.originalEvent.scale * scale;
var changeRotation = e.originalEvent.rotation + rotation;
elem.css({
'webkitTransform': "rotate(" + ((changeRotation) % 360) + "deg) scale("+changeScale+")"
})
})
elem.bind('gestureend', function(e) {
scale *= e.originalEvent.scale;
rotation = e.originalEvent.rotation + rotation;
})
}
function padZeros(num, str) {
str = ""+str
while(str.length < num) {
str = "0"+str
}
return str;
}
$(document).bind('touchmove', function(event) {
event.preventDefault()
}, false);
// Create letters
var d0=createLetter("d0")
var d1=createLetter("d1")
var h0=createLetter("h0")
var h1=createLetter("h1")
var m0=createLetter("m0")
var m1=createLetter("m1")
var s0=createLetter("s0")
var s1=createLetter("s1")
// Place the ':' in the time string
changeLetter(":", d0)
changeLetter(":", d1)
// Bind some explode events
var els = [h0, h1, m0, m1, s0, s1]
for (el in els) {
var elem = els[el]
// Explode!!
bindExplode(elem)
}
// Caption event
captionHandle = null
$('.caption').bind('click', function() {
clearTimeout(captionHandle)
$('.caption').html("NOT ME... THE NUMBERS!")
captionHandle = setTimeout(function() {
$('.caption').html("TOUCH ME BABY!")
}, 3000)
})
// Bind touch events
bindTouchMod($('.container'), window)
// Add the letters to the DOM
$('.time').append(h0)
$('.time').append(h1)
$('.time').append(d0)
$('.time').append(m0)
$('.time').append(m1)
$('.time').append(d1)
$('.time').append(s0)
$('.time').append(s1)
// Display the time every 200ms if changed
var idx=0
var prevDate = new Date()
var hdl = setInterval(function() {
var date = new Date()
// Just to check we hit the second acuratly
if(date.toString() == prevDate.toString()) {
console.log("return")
return
}
var h = padZeros(2, date.getHours()).split("")
var m = padZeros(2, date.getMinutes()).split("")
var s = padZeros(2, date.getSeconds()).split("")
changeLetter(h[0], h0)
changeLetter(h[1], h1)
changeLetter(m[0], m0)
changeLetter(m[1], m1)
changeLetter(s[0], s0)
changeLetter(s[1], s1)
idx+=1
prevDate = date;
}, 200)
</script>