I am trying to animate my element using jquery.
The purpose of the code is to be a speedometer on my server
The element I am trying to animate is called box3
NOTE: Code might not look the same for you as it looks for me. The code is running on FiveM Server
if (data.akcija == "spidometar") {
$(".box-tekstic").html(Math.round(data.speed))
if (data.speed > 0) {
$("#SpeedIndicator").text(data.speed);
let multiplier = data.maxspeed * 0.1;
let SpeedoLimit = data.maxspeed + multiplier;
Speedometer = (data.speed / SpeedoLimit);
}
}
.box-float{
position: relative;
right: 5vh;
top: 34vh;
}
.box {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width:180px;
height:180px;
transform: rotate(160deg);
border-radius:50%;
padding:25px;
background:
linear-gradient(var(--v), transparent 50%,#4c4c4e 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #4c4c4e 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
.box2 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width:170px;
left: 0.4vh;
top: 5;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background:
linear-gradient(var(--v), transparent 50%,#8a8989 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #8a8989 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
.box3 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
left: 0.4vh;
top: 5;
width:170px;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background:
linear-gradient(var(--v), transparent 50%,#b7ff00 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #b7ff00 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
<div class="box-float">
<div class="box" style="--p:68;"></div>
<div class="box2" style="--p:68;"></div>
<div class="box3" style="--p:50;"></div>
</div>
I know this is not directly answering your question. But I would highly recommend not using JQuery. It served a long and useful life, but there are a lot new, efficient and less bloated libraries available today.
For doing Animation with JS, I recommend checking out https://animejs.com/
Here is an example codepen https://codepen.io/borntofrappe/pen/qGozVM
const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {
clockFace.innerHTML += `
<text
transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
${zeroPadded(i + 1)}
</text>
`;
}
If you have to use jQuery then just use something like.
codepen.io/rpandrews/pen/zaxNyK
$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");
or
// not sure what element is what, since not displaying properly with run code
$('.box-float .box').css("--p", speed_Angle_Variable);
(function($) {
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
$(document).ready(function() {
let data = {
akcija: "spidometar",
speed: 50,
maxspeed: 68
}
if (data.akcija == "spidometar") {
$(".box-tekstic").html(Math.round(data.speed))
if (data.speed > 0) {
$("#SpeedIndicator").text(data.speed);
let multiplier = data.maxspeed * 0.1;
let SpeedoLimit = data.maxspeed + multiplier;
Speedometer = (data.speed / SpeedoLimit);
}
}
function changeSpeed(target, data) {
setTimeout(function() {
if (target < data.speed)
data.speed--;
if (target > data.speed)
data.speed++;
$('.box-float .box3').css("--p", data.speed + '');
if (target != data.speed) {
changeSpeed(target, data );
}
}, 100)
}
changeSpeed(25, data);
});
})(jQuery);
.box-float {
position: relative;
left: 5vh;
top: 34vh;
}
.box {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width: 180px;
height: 180px;
transform: rotate(160deg);
border-radius: 50%;
padding: 25px;
background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box2 {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width: 194px;
left: 1.6vh;
top: 6px;
height: 193px;
transform: rotate(160deg);
border-radius: 50%;
padding: 12px;
background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box3 {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-float">
<div class="box" style="--p:68;"></div>
<div class="box2" style="--p:68;"></div>
<div class="box2 box3" style="--p:50;"></div>
</div>
I'm using this code to create a spinning wheel. But I want to control the result. For example the prize $10000 I want it with less percentage. So, not anyone can get maybe 1 in 500 people. I didn't know how to set percentage for them. if anyone can help I'll appreciate it. Thank you in advance.
If you can give me any hint to help me continue and know what to do next.
this is the code that I have used
I UPDATED THE WHOLE CODE TO ADD PROBABILITY FOR THE RANDOM. ALSO, I ADDED MORE PRIZES. NOW I HAVE A PROBLEM WITH THE DESIGN AND THE PROBABILITY ITSELFT. ALSO, THE CODE IS VERY LONG.
I HOPE YOU CAN HELP ME WITH THE PROABILITY AND DESIGN ISSUE
//set default degree (360*5)
// I TRIED FOR 12 PRIZES TO MULTIPLY 360*11 BUT NOTHING CHANGES
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,
then add to the new degree*/
var newDegree = degree*clicks;
var extraDegree = Math.floor(Math.random() * (360 -1+1 )+1);
if(extraDegree =0.05)
{
var newextraDegree=Math.floor(Math.random() * (30 -1+1 )+1);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if(extraDegree =0.05)
{
var newextraDegree=Math.floor(Math.random() * (60 -30+1 )+30);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =0.10)
{
var newextraDegree=Math.floor(Math.random() * (90 -60+1 )+60);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (120 -90+1 )+90)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (150 -120+1 )+120);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (180 -150+1 )+150)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (210 -180+1 )+180)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =13)
{
var newextraDegree=Math.floor(Math.random() * (240 -210+1 )+210)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16)
{
var newextraDegree=Math.floor(Math.random() * (270 -240+1 )+240)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16)
{
var newextraDegree=Math.floor(Math.random() * (300 -270+1 )+270);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16.8)
{
var newextraDegree=Math.floor(Math.random() * (330 -300+1 )+300)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =18)
{
var newextraDegree=Math.floor(Math.random() * (360 -330+1 )+330)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
/*let's make the spin btn to tilt every
time the edge of the section hits
the indicator*/
});
});//DOCUMENT READY
#awardPanel {
padding:10px;
color:green;
text-align:center;
}
*{ margin:0; padding:0; }
body{
background:#eaeaea;
color:#fff;
font-size:18px;
font-family: 'Exo 2', sans-serif;
}
a{
color:#34495e;
}
/*WRAPPER*/
#wrapper{
margin: 40px auto 0;
width:266px;
position:relative;
}
#txt{
color:#eaeaea;
}
/*WHEEL*/
#wheel{
width:250px;
height:250px;
border-radius:50%;
position:relative;
overflow:hidden;
border:8px solid #fff;
box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
transform: rotate(0deg);
}
#wheel:before{
content:'';
position:absolute;
border:4px solid rgba(0,0,0,0.1);
width:242px;
height:242px;
border-radius:50%;
z-index:1000;
}
#inner-wheel{
width:100%;
height:100%;
-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
-moz-transition: all 6 cubic-bezier(0,.99,.44,.99);
-o-transition: all 6s cubic-bezier(0,.99,.44,.99);
-ms-transition: all 6s cubic-bezier(0,.99,.44,.99);
transition: all 6s cubic-bezier(0,.99,.44,.99);
}
#wheel div.sec{
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 130px 75px 0;
border-color: #19c transparent;
transform-origin: 75px 129px;
left:50px;
top:-4px;
opacity:1;
}
#wheel div.sec:nth-child(1){
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(3){
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(5){
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(6){
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(7){
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
-ms-transform: rotate(210deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(8){
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(9){
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(10){
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(11){
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
-ms-transform: rotate(330deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(12){
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
border-color: white transparent;
}
#wheel div.sec .fa{
margin-top: -100px;
color: rgba(0,0,0,0.2);
position: relative;
z-index: 10000000;
display: block;
text-align: center;
font-size:16px;
margin-left:-15px;
text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}
#spin{
width:68px;
height:68px;
position:absolute;
top:50%;
left:50%;
margin:-34px 0 0 -34px;
border-radius:50%;
box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
z-index:1000;
background:#fff;
cursor:pointer;
font-family: 'Exo 2', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#spin:after{
content:"SPIN";
text-align:center;
line-height:68px;
color:#CCC;
text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
position: relative;
z-index: 100000;
width:68px;
height:68px;
display:block;
}
#spin:before{
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 28px 20px;
border-color: transparent transparent #ffffff transparent;
top:-12px;
left:14px;
}
#inner-spin{
width:54px;
height:54px;
position:absolute;
top:50%;
left:50%;
margin:-27px 0 0 -27px;
border-radius:50%;
background:red;
z-index:999;
box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset, rgba(0,0,0,0.4) 0px 0px 5px ;
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#spin:active #inner-spin{
box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}
#spin:active:after{
font-size:15px;
}
#shine{
width:250px;
height:250px;
position:absolute;
top:0;
left:0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
opacity:0.1;
}
/*ANIMATION*/
#-webkit-keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
#keyframes hh {
0%, 100%{
transform: rotate(7deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
.spin {
-webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
animation: hh 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa" style="font-size: 16px;">$10000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$8000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$6000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$4000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$2000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$1000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$500</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$300</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$100</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$50</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">10% off</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">free spin</span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>
</div>
</div>
Now let's say for example I want to get a random number between 1 and 360 and Math.floor(Math.random() * (360 -1+1 )+1)
Now I want to create a probability out of 100
if the number was between 1 and 30 the probability will be 0.05,
if the number was between 30 and 60 the probability will be 0.05,
if the number was between 60 and 90 the probability will be 0.10,
if the number was between 90 and 120 the probability will be 5,
if the number was between 120 and 150 the probability will be 5,
if the number was between 150 and 180 the probability will be 5,
if the number was between 180 and 210 the probability will be 5,
if the number was between 210 and 240 the probability will be 13,
if the number was between 240 and 270 the probability will be 16,
if the number was between 270 and 300 the probability will be 16,
if the number was between 300 and 330 the probability will be 16.8,
if the number was between 330 and 360 the probability will be 18,
(0.05+0.05+0.10+5+5+5+5+13+16+16+16.8+18=100)
How can I achieve this
Since your second version of the code is way to long to edit in the time I can offer I wrote a short example on how to define your price list and select a winning price.
This example uses a list of possible prices with probabilities and creates a weighted list of them. From this list a random item is chosen which identifies the winning price.
After that the angle to turn the wheel is calculated to reach a random place in the selected price (starting from 0°)
// Define the prices and probabilities
const prices = [
{value: "Nothing", probability: 0.5},
{value: "Free Spin", probability: 0.2},
{value: "10$", probability: 0.15},
{value: "50$", probability: 0.1},
{value: "100$", probability: 0.04},
{value: "1000$", probability: 0.01},
];
// The angle one the wheel one area uses (uniform sizes)
var priceAngle = 360 / prices.length;
var result = prices[0];
// Generate a list of the indices based on the probabilities
var weightedList = [];
for (let i=0; i < prices.length; i++)
{
for (let j=0; j < prices[i].probability*100; j++)
{
weightedList.push(i);
}
}
// Get a random index from the weightedList and use it to get the price
var winningPriceIndex = weightedList[Math.floor(Math.random() * weightedList.length)];
result = prices[winningPriceIndex];
// Full spins the wheel shoud turn (min. 1, max. 5)
var fullSpins = Math.floor(Math.random() * 4)+1;
// Offset from 0° to the start of the price
var offsetToPrice = winningPriceIndex * priceAngle;
// Random offset from the start of the price
var additionalOffset = Math.floor(Math.random() * priceAngle);
console.log("The wheel turns " + (fullSpins * 360 + offsetToPrice + additionalOffset)
+ "° (" + fullSpins + " full spin + " + offsetToPrice + "° + " + additionalOffset + "°)");
console.log('You won: ' + result.value);
This might not be the best performing solution but it should give you an idea on how to solve your problem.
I've created Jquery plugin countdown timer so i'd like add some effects and animation to countdown like rotate or fade:
example for what i need:
Animation Demo
Note:
i need animation work with Days, Hours, Mintues and Seconds
n
(function ($) {
jQuery.fn.countdown = function (options, callback) {
var settings = { 'date': null };
if (options) {
$.extend(settings, options);
}
this_sel = $(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if (eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24));
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60 ;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
// add 0 value to left of value
if (!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').animate({ 'font-size': '100px' },1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);
};
})(jQuery);
$(document).ready(function () {
$("#countdown").countdown({
date: "4 january 2017 7:15:00"
},
function () {
$("#countdown").text("merry christmas");
}
);
})
#countdown{
width:1000px;
margin:50px auto;
border:1px solid #14e170;
}
#countdown .countdown-container{
width:25%;
height:200px;
float:left;
position:relative;
border:1px solid #14e170;
text-align:center;
}
.countdown-container > div{
text-align:center;
font-size:100px;
}
.countdown-container > span{
display:block;
top:0;
left:0;
font-size:40px;
color:rgba(73, 73, 73, 0.82);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="days">
00
</div>
<span>Days</span>
</div>
<div class="countdown-container">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<div class="countdown-container">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
</div>
Please visit this link : http://www.jqueryscript.net/time-clock/Animated-Responsive-jQuery-Countdown-Timer-Plugin-mbCoimingsoon.html
Just download this countdown, It's work like you want.
I hope it's helpful for you
/*
* flipclock
* Version: 1.0.1
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
(function($) {
var pluginName = 'flipclock';
var methods = {
pad: function(n) {
return (n < 10) ? '0' + n : n;
},
time: function(date) {
if (date) {
var e = new Date(date);
var b = new Date();
var d = new Date(e.getTime() - b.getTime());
} else
var d = new Date();
var t = methods.pad(date ? d.getFullYear() - 70 : d.getFullYear())
+ '' + methods.pad(date ? d.getMonth() : d.getMonth() + 1)
+ '' + methods.pad(date ? d.getDate() - 1 : d.getDate())
+ '' + methods.pad(d.getHours())
+ '' + methods.pad(d.getMinutes())
+ '' + methods.pad(d.getSeconds());
return {
'Y': {'d2': t.charAt(2), 'd1': t.charAt(3)},
'M': {'d2': t.charAt(4), 'd1': t.charAt(5)},
'D': {'d2': t.charAt(6), 'd1': t.charAt(7)},
'h': {'d2': t.charAt(8), 'd1': t.charAt(9)},
'm': {'d2': t.charAt(10), 'd1': t.charAt(11)},
's': {'d2': t.charAt(12), 'd1': t.charAt(13)}
};
},
play: function(c) {
$('body').removeClass('play');
var a = $('ul' + c + ' section.active');
if (a.html() == undefined) {
a = $('ul' + c + ' section').eq(0);
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
else if (a.is(':last-child')) {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready').removeClass('active');
a = $('ul' + c + ' section').eq(0);
a.addClass('active')
.closest('body')
.addClass('play');
}
else {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
},
// d1 is first digit and d2 is second digit
ul: function(c, d2, d1) {
return '<ul class="flip ' + c + '">' + this.li('d2', d2) + this.li('d1', d1) + '</ul>';
},
li: function(c, n) {
//
return '<li class="' + c + '"><section class="ready"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '</section><section class="active"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '</section></li>';
}
};
// var defaults = {};
function Plugin(element, options) {
this.element = element;
this.options = options;
// this.options = $.extend({}, defaults, options);
// this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var t, full = false;
if (!this.options || this.options == 'clock') {
t = methods.time();
} else if (this.options == 'date') {
t = methods.time();
full = true;
} else {
t = methods.time(this.options);
full = true;
}
$(this.element)
.addClass('flipclock')
.html(
(full ?
methods.ul('year', t.Y.d2, t.Y.d1)
+ methods.ul('month', t.M.d2, t.M.d1)
+ methods.ul('day', t.D.d2, t.D.d1)
: '')
+ methods.ul('hour', t.h.d2, t.h.d1)
+ methods.ul('minute', t.m.d2, t.m.d1)
+ methods.ul('second', t.s.d2, t.s.d1)
+ '<audio id="flipclick">'
+ '<source src="https://github.com/gokercebeci/flipclock/blob/master/js/plugins/flipclock/click.mp3?raw=true" type="audio/mpeg"/>'
+ '</audio>');
setInterval($.proxy(this.refresh, this), 1000);
},
refresh: function() {
var el = $(this.element);
var t;
if (this.options
&& this.options != 'clock'
&& this.options != 'date') {
t = methods.time(this.options);
} else
t = methods.time()
// second sound
setTimeout(function() {
document.getElementById('flipclick').play()
}, 500);
// second first digit
el.find(".second .d1 .ready .inn").html(t.s.d1);
methods.play('.second .d1');
// second second digit
if ((t.s.d1 === '0')) {
el.find(".second .d2 .ready .inn").html(t.s.d2);
methods.play('.second .d2');
// minute first digit
if ((t.s.d2 === '0')) {
el.find(".minute .d1 .ready .inn").html(t.m.d1);
methods.play('.minute .d1');
// minute second digit
if ((t.m.d1 === '0')) {
el.find(".minute .d2 .ready .inn").html(t.m.d2);
methods.play('.minute .d2');
// hour first digit
if ((t.m.d2 === '0')) {
el.find(".hour .d1 .ready .inn").html(t.h.d1);
methods.play('.hour .d1');
// hour second digit
if ((t.h.d1 === '0')) {
el.find(".hour .d2 .ready .inn").html(t.h.d2);
methods.play('.hour .d2');
// day first digit
if ((t.h.d2 === '0')) {
el.find(".day .d1 .ready .inn").html(t.D.d1);
methods.play('.day .d1');
// day second digit
if ((t.D.d1 === '0')) {
el.find(".day .d2 .ready .inn").html(t.D.d2);
methods.play('.day .d2');
// month first digit
if ((t.D.d2 === '0')) {
el.find(".month .d1 .ready .inn").html(t.M.d1);
methods.play('.month .d1');
// month second digit
if ((t.M.d1 === '0')) {
el.find(".month .d2 .ready .inn").html(t.M.d2);
methods.play('.month .d2');
// year first digit
if ((t.M.d2 === '0')) {
el.find(".year .d1 .ready .inn").html(t.Y.d1);
methods.play('.year .d1');
// year second digit
if ((t.Y.d1 === '0')) {
el.find(".year .d2 .ready .inn").html(t.Y.d2);
methods.play('.year .d2');
}
}
}
}
}
}
}
}
}
}
}
},
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$(this).data('plugin_' + pluginName)) {
$(this).data('plugin_' + pluginName,
new Plugin(this, options));
}
});
};
})(typeof jQuery !== 'undefined' ? jQuery : Zepto);
// RUN
$('#container').flipclock();
html, body {
margin: 0;
padding:0;
height: 100%;
color: #fff;
font: 11px/normal sans-serif;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/mask.png');
z-index: 2;
}
h1 {
margin: 0 10px;
font-size: 70px;
font-weight: bold;
text-shadow: 0 0 2px #fff;
}
.clearfix {
clear: both;
}
#page {
margin: 0 auto;
width: 600px;
}
#container {
opacity: .9;
}
#usage li {
position: relative;
margin: 5px 0;
padding: 10px;
color: #222;
background: #fff;
}
#usage code {
position: absolute;
top:0;
right:0;
padding: 10px;
color: #eee;
border: 1px solid #333;
background: #000;
}
/*
* flipclock
* Version: 1.0.0
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
/*==============================================================================
FLIP CLOCK
==============================================================================*/
.flipclock {
}
.flipclock hr {
position: absolute;
left: 0;
top: 65px;
width: 100%;
height: 3px;
border: 0;
background: #000;
z-index: 10;
opacity: 0;
}
ul.flip {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 180px;
height: 130px;
font-size: 120px;
font-weight: bold;
line-height: 127px;
}
ul.flip li {
float: left;
margin: 0;
padding: 0;
width: 49%;
height: 100%;
-webkit-perspective: 200px;
list-style: none;
}
ul.flip li.d1 {
float: right;
}
ul.flip li section {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li section:first-child {
z-index: 2;
}
ul.flip li div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
ul.flip li div .shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li div.up {
-webkit-transform-origin: 50% 100%;
top: 0;
}
ul.flip li div.down {
-webkit-transform-origin: 50% 0%;
bottom: 0;
}
ul.flip li div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-shadow: 0 0 2px #fff;
text-align: center;
background-color: #000;
border-radius: 6px;
}
ul.flip li div.up div.inn {
top: 0;
}
ul.flip li div.down div.inn {
bottom: 0;
}
/*--------------------------------------
PLAY
--------------------------------------*/
body.play ul section.ready {
z-index: 3;
}
body.play ul section.active {
-webkit-animation: index .5s .5s linear both;
z-index: 2;
}
#-webkit-keyframes index {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
body.play ul section.active .down {
z-index: 2;
-webkit-animation: flipdown .5s .5s linear both;
}
#-webkit-keyframes flipdown {
0% {
-webkit-transform: rotateX(90deg);
}
80% {
-webkit-transform: rotateX(5deg);
}
90% {
-webkit-transform: rotateX(15deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
body.play ul section.ready .up {
z-index: 2;
-webkit-animation: flipup .5s linear both;
}
#-webkit-keyframes flipup {
0% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
/*--------------------------------------
SHADOW
--------------------------------------*/
body.play ul section.ready .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
/*DOWN*/
body.play ul section.ready .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
#-webkit-keyframes show {
0% {
opacity: 0;
}
90% {
opacity: .10;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
80% {
opacity: .20;
}
100% {
opacity: 0;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div id="mask">
<div id="page">
<h1>flipclock</h1>
<div id="container"></div>
<div class="clearfix"></div>
<h2>USAGE</h2>
<ul id="usage">
<li class="selected">
clock
<code>$('#container').flipclock();</code>
</li>
<li>
fulldate
<code>$('#container').flipclock('date');</code>
</li>
<li>
countdown
<code>$('#container').flipclock('2013 01 17 12:00:00');</code>
</li>
</ul>
</div>
</div>
Would you please try above code?