I want to use an animation of counting number with coin flip effect, means with my number count i want to flip my circle horizontally 360 deg.
I am using below code for it :
kindly help! Thanks in advance
(function ($) {
$.fn.CountUpCircle = function(options){
var self = this;
var settings = $.extend({
duration: 1000 //ms
}, options);
var toCount = parseInt(this.html());
console.log("Count up to " + toCount);
var i = 0;
var step = settings.duration / toCount;
console.log("Step duration " + step);
var displayNumber = function() {
i++;
self.html(i);
if (i < toCount) {
setTimeout(displayNumber, step);
}
};
displayNumber();
}
}(jQuery));
$(document).ready(function(){
$('#count-box').CountUpCircle({
duration: 1500
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>
<link href="http://www.jqueryscript.net/demo/Minimal-jQuery-Count-Up-Plugin-CoutUpCircle/css/style.css" rel="stylesheet"/>
<div id="jquery-script-menu">
<h1 style="margin-top:150px; color:#fff;" align="center">CountUpCircle jQuery Plugin Demo</h1>
<div id="count-box">23</div>
</div>
Related
I'm trying to make a small version of "duck hunt" I want to add a scoreboard when every time you hit the duck its +1 and when you miss its -1 but the score cant go lower than 0 (so not -1 for example) when you have tried 20 times the game stops and you will see your score so the hit and miss clicked times will show on the screen. How do I add this to my code so far I have got this:
var duck = document.getElementById('duck');
duck.style.position = 'relative';
var hit = 0;
var miss = 0
var count = 0;
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
duck.addEventListener('click', moveduck);
function moveduck() {
var top = Math.floor(Math.random() * 750);
var left = Math.floor(Math.random() * 750);
var right = Math.floor(Math.random() * 750);
var bottom = Math.floor(Math.random() * 750);
var vertical = Math.floor(Math.random() * 750);
var horizontal = Math.floor(Math.random() * 750);
duck.style.top = top + 'px';
duck.style.left = left + 'px';
duck.style.right = right + 'px';
duck.style.bottom = bottom + 'px';
duck.style.vertical = vertical + 'px';
duck.style.horizontal = horizontal + 'px';
};
button1.onclick = succesfullhit;
function succesfullhit() {
hit++;
button1.innerHTML = hit;
}
button2.onclick = failedhit;
function failedhit() {
miss--;
button2.innerHTML = miss;
}
#duck { height:50px; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Duck hunt</title>
<link rel="stylesheet" type="text/css" href="Duckhunt.css">
</head>
<body>
<div class="container">
<input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" />
<button id="button1">Hit: </button>
<p></p>
<button id="button2">Miss: </button>
</div>
<script src="Duckhunt.js"></script>
</body>
</html>
I guess you want to do something like this :
i changed the hit and miss and i did only score.
i added event listener to the document, if you hit the duck score++ if not score--
and i display the score.
i added if statement, if score is === -1 game over.
if score === 20 win
Of course you need to do a bit work to make it perfect for your need, this is just for the beginning.
var duck = document.getElementById('duck');
duck.style.position = 'relative';
var score = 0
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
function moveduck() {
var top = Math.floor(Math.random() * 750);
var left = Math.floor(Math.random() * 750);
var right = Math.floor(Math.random() * 750);
var bottom = Math.floor(Math.random() * 750);
var vertical = Math.floor(Math.random() * 750);
var horizontal = Math.floor(Math.random() * 750);
duck.style.top = top + 'px';
duck.style.left = left + 'px';
duck.style.right = right + 'px';
duck.style.bottom = bottom + 'px';
duck.style.vertical = vertical + 'px';
duck.style.horizontal = horizontal + 'px';
score++
};
document.addEventListener("click", function(e){
if(score === -1){
score = 0
document.getElementById('score').innerHTML = 'Game over'
console.log('game over')
}
if(score === 20){
document.getElementById('score').innerHTML = 'Win'
console.log('Win')
}
if (e.target.id === 'duck'){
moveduck()
document.getElementById('score').innerHTML = score
}else {
score--
document.getElementById('score').innerHTML = score
}
})
#duck { height:50px; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Duck hunt</title>
<link rel="stylesheet" type="text/css" href="Duckhunt.css">
</head>
<body>
<div id="scoreBoard">Score: <p id="score"></p></div>
<div class="container">
<input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" />
</div>
<script src="Duckhunt.js"></script>
</body>
</html>
Here is a start
var duck = document.getElementById('duck');
duck.style.position = 'relative';
var hit = 0;
var miss = 0
var count = 0;
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
document.body.addEventListener('click', function(e) {
if (hit+miss >= 20) return
const tgt = e.target;
if (tgt.id ==="duck") succesfullhit()
else failedhit();
if (hit+miss === 20) clearInterval(timing)
else moveduck();
});
function moveduck() {
var top = Math.floor(Math.random() * 750);
var left = Math.floor(Math.random() * 750);
var right = Math.floor(Math.random() * 750);
var bottom = Math.floor(Math.random() * 750);
var vertical = Math.floor(Math.random() * 750);
var horizontal = Math.floor(Math.random() * 750);
duck.style.top = top + 'px';
duck.style.left = left + 'px';
duck.style.right = right + 'px';
duck.style.bottom = bottom + 'px';
duck.style.vertical = vertical + 'px';
duck.style.horizontal = horizontal + 'px';
};
function succesfullhit() {
hit++;
button1.innerHTML = hit;
}
function failedhit() {
miss++;
button2.innerHTML = -1*miss;
}
#duck { height:50px; }
<div class="container">
<input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" /><br/>
<button id="button1">Hit: </button>
<p></p>
<button id="button2">Miss: </button>
</div>
I was working on a jquery clicker game when I added a line of code and suddenly all of my javascript stopped showing up in my html, however I looked through all of my code and it seems all correct.
$(document).ready(function() {
var credits = 0;
var creditstarter = 1;
var hanzounlocked = 0;
var hanzocost = 100;
var numsonicarrow = 0;
var sonicarrowcost = 50;
var numscatterarrow = 0;
var scatterarrowcost = 280;
var numdragonstrike = 0;
var dragonstrikecost = 1000;
var junkratunlocked = 0;
var junkratcost = 4500;
var numtrap = 0;
var trapcost = 5000;
var numconcussionmine = 0;
var concussionminecost = 8000;
var numriptire = 0;
var riptirecost = 16000;
var tracerunlocked = 0;
var tracercost = 50000;
var numblink = 0;
var blinkcost = 15000;
var numrecall = 0;
var recallcost = 40000;
var numpulsebomb = 0;
var pulsebombcost = 100000;
var dvaunlocked = 0;
var dvacost = 400000;
var numdefencematrix = 0;
var defencematrixcost = 100000;
var nummicromissiles = 0;
var micromissilescost = 185000;
var numselfdestruct = 0;
var selfdestructcost = 900000;
$('#openlootbox').on('click', function () {
credits = credits + creditstarter + numdragonstrike + numriptire +
numpulsebomb + numselfdestruct;
});
$('#hanzo').on('click', function (){
hanzounlocked++;
credits -= hanzocost;
});
$('#sonicarrow').on('click', function () {
numsonicarrow++;
credits -= sonicarrowcost;
sonicarrowcost = Math.ceil(sonicarrowcost * 1.2);
});
$('#scatterarrow').on('click', function () {
numscatterarrow++;
credits -= scatterarrowcost;
scatterarrowcost = Math.ceil(scatterarrowcost * 1.2);
});
$('#dragonstrike').on('click', function() {
numdragonstrike++;
credits -= dragonstrikecost;
dragonstrikecost = Math.ceil(dragonstrikecost * 1.2);
});
window.setInterval(function () {
if(hanzounlocked > 0){
$('#hanzo').prop('disabled', true);
$('#scatterarrow').prop('disabled', false);
$('#sonicarrow').prop('disabled', false);
$('#dragonstrike').prop('disabled', false);
}
if(hanzounlocked === 0){
$('#sonicarrow').prop('disabled', true);
$('#hanzo').prop('disabled', false);
$('#dragonstrike').prop('disabled', true);
$('#scatterarrow').prop('disabled', true);
}
if(credits < hanzocost){
$('#hanzo').prop('disabled', true);
}
if(credits < scatterarrowcost){
$('#scatterarrow').prop('disabled', true);
}
if(credits < sonicarrowcost){
$('#sonicarrow').prop('disabled', true);
}
if(credits < dragonstrikecost){
$('#dragonstrike').prop('disabled', true);
}
//Update the text showing how many coins you have and round down
$('#credits').text(Math.floor(credits));
credits += (numsonicarrow * 1 / 100);
//scatterarrow adds 5 per second (5/100 every 10ms)
credits += (numscatterarrow * 5 / 100);
credits += (numconcussionmine * 15 / 100);
credits += (numtrap * 50 / 100);
credits += (numblink * 150 / 100);
credits += (numrecall * 390 / 100);
credits += (numdefencematrix * 1170 / 100);
credits += (nummicriomissiles * 3120 / 100);
});
});
And now the HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OW Clicker</title>
<link rel="stylesheet" href="clicker.css" type="text/css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript" src="newgame.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?
family=Luckiest+Guy" />
<style type="text/css">
</style>
<body>
<button id="openlootbox"></button>
<button id="hanzo"></button>
<button id="sonicarrow"></button>
<button id="scatterarrow"></button>
<button id="dragonstrike"></button>
</body>
</html>
I know that I may have formatted this question wrong, but I truly do not understand why my buttons are not showing up with my .text functions. Any help or suggestions would be appreciated. Thanks.
nummicromissiles is misspelled as nummicriomissiles. You can open your browser dev tools by pressing f12 to see any errors in the console.
There is no element with an id of credits so $('#credits').text(Math.floor(credits)); does not do anything.
I'm pretty new to Javascript and im trying to build slideshow myself now. Only im stuck right now after i build the array where i get my pictures from. It only shows a white screen.
My Javascript
$(function () {
var counter = 0;
var defaultSettings = {
"sliderContainer": "#slider"
, "pauseWithMouse": true
, "sliderSpeed": 2000
, "transitionSpeed": 1500
};
function cycleImages() {
counter++;
if (counter >= images.Length) {
counter = 0;
}
document.getElementById("#slider img").src = MyImages[counter];
var images = $('#slider img')
, now = images.filter(':visible')
, next = now.next().length ? now.next() : images.first()
, speed = 1500; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
var theInterval; // Slide speed
var = images = [];
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
var startSlide = function () {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
var stopSlide = function () {
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
startSlide();
$('#slider img').on('mouseover', function () {
stopSlide();
});
$('#slider img').on('mouseout', function () {
startSlide();
});
});
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Slider</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/slideshow.js"></script>
<script>
var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"];
</script>
</head>
<body>
<main>
<div id="slider">
</div>
</main>
</body>
</html>
you have strange declaration of variable here
var = images = [];
also you need to move this part
var startSlide = function() {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
before
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
you have wrong variable name (MyImages) here
document.getElementById("#slider img").src = MyImages[counter];
first try to debug your code
jsfiddle
I'm creating a function named preLoader() and I'm using setTimeout() cause I want to make it run for one time only.
When the preloader() function finish, I want to hide:
<div class="loader">
<h2 id="loading">0%</h2>
<h3 id="pleaseWait"></h3>
</div>
and show:
<div class="mainContent"></div>
Since you're using animate(), You don't really have to use both setTimeout and setInterval. Simply hide/unhide content in a complete callback of the animation.
function preLoader(){
// animating numbers
var arrayPleaseWait = ['P','L','E','A','S','E', ' ' , 'W','A','I','T','.','.','.'];
var searchReturn = '';
var current = null;
var wait = $('#pleaseWait');
$('body').css({
'backgroundColor':'#E2F7FA'
});
$('.mainContent').hide();
$('#loading').animate({
someValue: 100
},{
duration: 10000,
easing:'swing',
step: function() {
var l = Math.round(Math.round(this.someValue) * (arrayPleaseWait.length-1) / 100) || 0;
if(current != l){
searchReturn = searchReturn + arrayPleaseWait[l];
wait.text(searchReturn + '|');
current = l;
}
$(this).text(Math.round(this.someValue) + '%');
},
complete : function(){
$('.loader').hide();
$('.mainContent').show();
}
});
}
preLoader();
JSfiddle demo
this is the HTML code:
<div class="loader">
<h2 id="loading">0%</h2>
<h3 id="pleaseWait">pleaswait</h3>
</div>
<div class="mainContent" hidden="true">ok</div>
JavaScript:
var executed = false;
setTimeout(function() {
if(!executed) {//the same of if(executed == false)
var loader = document.getElementsByClassName('loader')[0];
var mainContent = document.getElementsByClassName('mainContent')[0]
loader.hidden = "true";//hide the loader
mainContent.removeAttribute("hidden");//show the mainContent
executed = true;
}
}, 1000);
I try to make a progress bar with bootstrap css on images loading. For this, I use the following script :
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script type="text/javascript">
var n=0;
var c=0;
$('img').each(function() {
n++;
var tmpImg = new Image() ;
tmpImg.src = $(this).attr('src') ;
tmpImg.onload = function() {
c++;
};
});
var interval = setInterval(function() {
percent = n/100;
loaded = c/percent;
// for displaying purposes
setBar(getBar()+50)
// feed loaded var to the progressbar
if (loaded == 100) {
clearInterval(interval);
}
}, 1);
function setBar(n) {
var bar = document.getElementById('fabbar');
bar.style.width = n+'%';
}
function getBar() {
var bar = document.getElementById('fabbar');
return parseInt(bar.style.width);
}
</script>
</head>
<body>
<div class="progress progress-info progress-striped active">
<div class="bar" id='fabbar' style="width: 20%"></div>
</div>
But this doesn't work, i.e the progress bar doesn't progress. How could I do that ?
Try this (demo):
$(function () {
var n = 0,
$imgs = $('img'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
});