Home Date and Time 3D Cube Countdown script Developer's View
<html>
<head>
<link rel="stylesheet" href="ddcubeclass.css" />
<style>
/* 2nd demo specific CSS */
#dynamicfuturedate .ddcubecountdown{
display: block; /* display each cube on its own line */
margin-bottom: 5px;
font-size: 8px; /* adjust font size to scale up/down the cubes (default is 10px)
*/
}
#dynamicfuturedate ul li{
background: darkred;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ddcubeclass.js"></script>
<script src="ddcubecountdown.js">
/***********************************************
* 3D Cube Countdown script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s
more
***********************************************/
</script>
<script>
jQuery(function($){ // on DOM load
//Eg #1
var mycountdown = new cubecountdown({
containerid: 'futuredate',
targetdate: 'October 17, 2018 11:26:30',
size: ['10em', '6em'], // specify cube dimensions in "em" only
unit: ['days']
})
mycountdown.onEnd = function(){ // when target date has arrived
$('#futuredate').html('<b>That date has arrived!</b>')
}
//Eg #2
var christmasday = new Date( new Date().getFullYear(), 11, 25) // construct
future date string dynamically
var christmascountdown = new cubecountdown({
containerid: 'dynamicfuturedate',
targetdate: christmasday,
unit: ['days']
})
christmascountdown.onEnd = function(){ // when target date has arrived
$('#dynamicfuturedate').html('<b>Christmas has arrived!</b>')
}
})
</script>
</head>
<body>
<div id="futuredate"></div>
<div style="margin-left:100px;font-weight:bold">until October 17, 2018
11:26:30!</div>
<br />
<div id="dynamicfuturedate"></div>
<div style="font-weight:bold">until Christmas!</div>
</body>
</html>