Showing FlipClock
Displaying Jquery Flip Clock to Various Format Using Jquery Flipclock Plugins in Asp.Net.
DEMO
Download
HTML Coding
<%--Twelve Hour Clock --%>
<%--Particular Minute Counter --%>
<%--Current Year Available total Days --%>
Create New Webform - Add FlipClock Jquery Plugins & JavaScript Assign Source
Displaying Jquery Flip Clock to Various Format Using Jquery Flipclock Plugins in Asp.Net.
DEMO
Download
HTML Coding
<html>
<head>
<title></title>
<link rel="stylesheet" href="JQuery/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="JQuery/flipclock.js"></script>
<script type="text/javascript">
var clock;
$(document).ready(function () {
clock = $('.clock').FlipClock({
clockFace: 'TwelveHourClock'
});
});
</script>
<%--Twenty Four Hour clock For Particular Set Time--%>
<script type="text/javascript">
var clock;
$(document).ready(function () {
var date = new Date('2015-01-01
01:55:12 pm');
clock = $('.clock1').FlipClock(date, {
clockFace: 'TwentyFourHourClock'
});
});
</script>
<script type="text/javascript">
var clock;
$(document).ready(function () {
clock = $('.clock2').FlipClock(10, {
clockFace: 'MinuteCounter',
countdown: true,
callbacks: {
}
});
});
</script>
<script type="text/javascript">
var clock;
$(document).ready(function () {
//
Grab the current date
var currentDate = new Date();
//
Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0, 1);
//
Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 -
currentDate.getTime() / 1000;
//
Instantiate a coutdown FlipClock
clock = $('.clock3').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
</head>
<body>
<div class="clock">
</div>
<div class="clock1" ></div>
<div class="clock2"> </div>
<div class="clock3" ></div>
</body>
</html>
Create New Webform - Add FlipClock Jquery Plugins & JavaScript Assign Source
.gif)
