Click counter. Advice on how to do it?

JavaScript
1

Hello, I’d like to create a click counter w/jquery where the clicks are counted and then applied in another page. So for example.

  1. on page1.html every time the user clicks on an a certain <a> tag the counter i will add a value of +1.
  2. when the user is done he/she click on apply points.
    3 Apply points will take the user to a new page where the points will determine how long a small animation will play.
    Started looking into this but quickly getting more lost in all the diff info, cookies, php etc.
    i wanted to all this w/jquery/js.

thx
D

2

Hey there,

You can use localStorage to save a variable across pages, if it’s not for anything critical that should be fine.

// page1.html
$(function() {
  var count = 0;
  $('.clicker').on('click', function() {
    count++;
  })

  $('.apply-points').on('click', function() {
    localStorage['count'] = count;
  }
});

// page2.html
$(function() {
  var count = localStorage['count'];
})
3

Mark thank you for the suggestions. Will try it. out.
Nope nothing critical.
D

4

How could i convert clicks to time frames?
something like?

$(function() {
  var img1 =  $("#img1")  //background img in div
   var img2 =  $("#img2") //background animated img in div

  var count = localStorage['count'];
   for( var i=0; i<count; i++ ) {
     var minutes = i*60;
 $("div with image").switchClass( "img2", mintues , 1000, "easeInOutQuad" );
   }
 
})

```

And then release it when the minutes interval is over.( I am guessing the js above it not pretty, sorry)
5

setTimeout delays a function for a certain amount of milliseconds.

var count = localStorage['count'];
var minutes = count*60*1000;
setTimeout(function() {
  // do something
}, minutes);
6

Thank you for the help. will go try it out
D

7

No problemo.

8

I hoping i can follow up on this.
I have on page1

$(function() {
  var count = 0;
  $('.clicker').on('click', function(event) {
	event.preventDefault();
    count++;
	localStorage['count'] = count;
  })

 /* $('.apply-points').on('click', function() {
    localStorage['count'] = count;
  })*/
});

on page 2

var count = localStorage['count'];
var minutes = count*60*2;


alert(count);

showBox(function() {
  // do something
  $(".one").css( "display", "block")
	
}, minutes);

with

<div id="one" class="one"></div>

Now, as i understand, the setTimeout actually sets a delay for the amount of clicks. I was trying to implement a function that when you went to page two an animate image, or div or what not would display when you “redeemed” your click. Could you please advise.
thx
D

9

and also would this have to be added to send them to new page?

 $('.apply-points').on('click', function() {
	window.location.replace("http://www.page2.html")
    localStorage['count'] = count;
  })
10

Sorry, I’m clear what you want to do on page2.

Because you’ve moved setting localStorage[‘count’] into the click function there’s no need to do anything special when changing to page2, you can simply link to it.

<a href="http://www.page2.html">Apply points</a>
11

well, was still thinking it out. My apologies if I was unclear.
on page one the user clicks on a series of targets .then they go to page 2. where they click on the apply point button/div that will show a an image/animated image.
So far have not managed to make it work.
thx
D

12

That didn’t clear it up for me I’m afraid.

We’ve saved a number of clicks on page1.
We’ve followed a link page2.

button/div that will show a an image/animated image.

Ok, something like this fits that description.

$('.show-image').on('click', function() {
  $('#my-image').show();
})

What are you wanting the number of clicks on page1 to effect on page2?

13

let’s say an image for example. an image would show for a time set by the amount of lclicks. if they clicked on ten targets on page one, the image or animation would show for ten minutes.

14

Good, my original code was along the right lines then.
page2 just needs a setTimeout and something inside to stop the animation.

var count = localStorage['count'];
var minutes = count*60*1000;
setTimeout(function() {
  // stop animation
  $('#my-image').hide();
}, minutes);

How you start/stop the animation depends on what you’re using for the animation.

15

will go try it again. Thank you for your time.
D
but it would be .show not hide. the img or animation would not display until the user reed
ems the click.s

16

You’re losing me again.

if they clicked on ten targets on page one, the image or animation would show for ten minutes.

Include the image with the animation on page2, a gif should start playing without any javascript whatsoever. After a time you want to stop the animation, hiding the gif.

Perhaps this is what you’re wanting… To delay the animation until you click something on page 2.

var count = localStorage['count'];
var minutes = count*60*1000;
$('.show-animation').click(function() {
  $('#my-image').show();
  setTimeout(function() {
    // stop animation
    $('#my-image').hide();
  }, minutes);
})
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.