I want to make a count up timer in my page.
It will set a target number and start from 0 to count up.
But I want to it with a slow down speed.
Start high speed, more and more slow to target number.
I can't find a good way or library to do this animate.
Can someone help me? Thanks.
You should use setInterval for this job, like below:
var counted = 0;
var target = 10; // 10 seconds
document.write("Counted : 0");
var i = setInterval(function () {
if (counted <= target) {
counted++;
document.write("Counted : " + counted);
} else {
clearInterval(i);
}
}, 1000);
Hope this works, I haven't tested it.
Related
i have the following code, which should add 2.6 every second. But after the first add i get 8.
How can I fix this? On the tester here it works but on my page i get 8 https://260044-5.web1.fh-htwchur.ch/
Thanks in advance.
setTimeout(start, 0000);
var i = 2.6;
var num = document.getElementById('humans');
function start() {
setInterval(increase, 1000);
}
function increase() {
if (i < 100000000) {
i += 2.6;
num.innerText = Math.round(i);
}
}
<div id="humans">2.6</div>
<p>Menschen wurden geboren.</p>
You can try this. The main problem was your rounding off, you basically used Math.round() but yet you are dealing with a floating point data type. So just use YourNumber.toFixed(n) where n is the number of decimal points you want to show. You can check below. I just made your code shorter and brief but you can basically change the rounding off on your code and it should work..
setTimeout((function(){
var i = 2.6;
return function start() {
setInterval(()=> {
if (i < 100000000){
i += 2.6;
document.getElementById('humans').innerText = i.toFixed(1);
}
}, 1000);
};
})(), 0000);
<div id="humans">2.6</div>
<p>Menschen wurden geboren.</p>
You're rounding the value when setting the text:
num.innerText = Math.round(i);
If you want to show the value to the n'th decimal just use toFixed.
Example:
num.innerText = i.toFixed(1); /* will give you one number after the decimal point */
The code here it works, but in the link you posted, you have that in your script:
//funtion for humans born
setTimeout(start, 0000);
var i = 2.6;
var num = document.getElementById('humans');
function start() {
setInterval(increase, 1000);
}
function increase() {
if (i < 100000000) {
i += 2.6;
num.innerText = Math.round(i);
}
}
//funtion for trees cut
setTimeout(start, 0000);
var t = 475.646879756;
var t = document.getElementById('trees');
function startTwo() {
setInterval(increase, 1000);
}
You're executing start twice: one after "humans born" and the other after "trees cut".
Therefore you have two concurrent interval that execute increase twice every second, and each of the increase call is manipulating the same variables. That's why you got 8 immediately.
I'm not sure what's your goal here, but you either have different variables / function to increase every second for "humans born" and "trees cut", or you have one start call (and therefore one increase function called every second).
Anyhow, this is your mistake: if you want to clarify your logic; I / we can help further.
I am trying to create an accurate countdown timer (accurate to the second), so that the second timer changes every second as opposed to lagging behind due to some other code I have.
I have a very limited understanding of how this works and I have attempted the following:
var seccount=100;
var seccounter=setInterval(sectimer, 1000);
var start = new Date().getTime();
function sectimer() {
seccount--;
elapsed = Math.ceil(seccount/100);
var diff = (new Date().getTime() - start) + seccount;
window.setInterval(sectimer, (0 + diff));
if (seccount < 0) {
return;
}
document.getElementById("sectimer").innerHTML=seccount+" seconds left!"
}
However, this timer seems to skip a few numbers some times. Is there any way to fix this? What am I missing?
EDIT:
Any count-down timer that is more accurate will do. I have been experimenting with the following timer that I have to try and make it more accurate, but I am not having much luck. Basically, it counts down every 1.1 seconds about (instead of every 1 second),
var seccount=100;
var seccounter=setInterval(sectimer, 1000);
function sectimer() {
seccount--;
if (seccount < 0) {
return;
}
document.getElementById("sectimer").innerHTML=seccount+" seconds left!";
}
below is a code from jsfiddles
http://jsfiddle.net/7n3rtpqo/3/
I am a little confused and do not fully understand the meaning of the operators '+=' and '-='. I would like to request the meaning in layman terms in the questions below.
Question 1 (refer to code //Question 1):
I do not understand this function to check if the train is going at top speed. Can this be explained? The explanation given is if it is greater than 10, then the train can go faster, so the next line subtracts 10 from the value of trainSpeed.
Why is the amount 10 and why subtract?
Question 2 (refer to code //Question 2):
Does this mean the train position is increased by 2px every time from its last updated position?
I am still fresh in learning JavaScript. Therefore, an explanation in layman terms wherever necessary would be nice as I am trying to make sense of it.
Thanks in advance!
var trainSpeed = 250;
var trainPosition = 0;
var animation;
var train = document.getElementById("train");
train.addEventListener("click", speedUp);
var stopButton = document.getElementById("stopButton");
stopButton.addEventListener("click", stopTrain);
//Question 1
function speedUp() {
if (trainSpeed > 10) {
trainSpeed -= 10;
}
console.log("train speed: " + trainSpeed);
clearInterval(animation);
animation = setInterval(frame, trainSpeed);
//Question 2
function frame() {
trainPosition += 2;
train.style.left = trainPosition + 'px';
console.log(trainPosition);
checkPosition(trainPosition);
}
}
function checkPosition(currentPosition) {
if (currentPosition === 260) {
alert("Crash!");
console.log("Crash!");
clearInterval(animation);
}
}
function stopTrain() {
if (trainPosition < 260) {
clearInterval(animation);
console.log("Whew! That was close!");
}
}
Hah. The code is deceptive. The train speed is not the train speed, it's the delay between each calculation of the train's position. This is evidenced in the line
animation = setInterval(frame, trainSpeed);
(The second parameter to setInterval determines how often the frame function is called, in milliseconds.)
If I was the author of the code, I'd rather rename the variable trainSpeed to trainDelay.
So I have an object that moves with "speed" now I set the code that when the object collides with another object the speed of the object decreases. I tried doing so by making the speed change and when the speed changes after 3 seconds change it back to it's original speed.
This is something I tried myself but it doesn't work. Can someone explain me what I am doing wrong, if I'm on the right track or a better way to do this? Thanks in advance
speed = 10;
if (c < r0+r1) {
lives -=1;
speed = 5;
if(speed === 5){
setTimeout(speed =10 ,3000);
}
setTimeout(function() {
speed = 10
}, 3000);
I have a canvas game which calls a function incScore every time an action is performed in the game to increase the score.
Inside incScore I have a few if statements to draw a particular image to represent a level number on the canvas.
I also want to have a sound play once per level up. The way I've gone about things the lvlup sound will play every time the score matches the if statement.
Can anyone please help me get this so that the sound will only play once when the level changes and not again until the next level change? I'm also mention I'm using jQuery incase it has anything that could help me.
incScore(); //everytime an action in the game causes the score to increase
function incScore(){
if (scoreTotal < 500){
lvlimg = "L01";
drawLevel(lvlimg);
lvlupSound();
}
else if (scoreTotal > 500 && scoreTotal < 1000){
lvlimg = "L02";
drawLevel(lvlimg);
lvlupSound();
}
else{
lvlimg = "L03";
drawLevel(lvlimg);
lvlupSound();
}
}
You could shorten your function and use a semi static property to save the state. Using that, you can compare the current level to the previous and play a sound if they differ.
function incScore(){
incScore.level = incScore.level || 'L0'; //< initialize property
lvlimg = "L0" + scoreTotal < 500 ? 1 : scoreTotal < 1000 ? 2 : 3;
drawLevel(lvlimg);
if (incScore.level!=='L0' &&
incScore.level !== lvlimg) { lvlupSound(); };
// ^compare local level to current
incScore.level = lvlimg;
// ^ update local level
}
[edit, based on comment] The third line is a so called ternary, or conditional operator. See MDN. You can use more conditions.
To avoid playing a sound before the score has reached a first level, you could use
if (incScore.level!=='L0' && incScore.level !== lvlimg).
I've created a mockup jsFiddle
A simple solution could be comparing the current level to the old one, to detect when the level changed:
function scoreToLevel(score)
if(score < 500){
return 1
}else if (score < 1000){
return 2
}else{
return 3
}
}
function incScore()
var next_level = scoreToLevel(scoreTotal)
if(next_level !== current_level){
lvlimg = "L0" + next_level;
drawLevel(lvlimg)
lvlupSound()
}
}
The easiest solution is to factor the sound out of those if statements. If the levels are nice and regular like that(every 500 points) and the points always increase in a way that you will always land exactly on an even multiple of 500 when you level up, something like this should do:
if(scoreTotal % 500 === 0 && scoreTotal < 1001)
{
lvlupSound();
}
If you won't always land directly on the gate to the next level(maybe the player can earn anywhere between 1 and 15 points at a time) then you should be able to get by using something along the lines of this before you increment the player's score:
if( (scoreTotal % 500) > ((scoreTotal + increment) % 500)
{
lvlupSound();
}
if your level boundries are not regular like that obviously it gets a little bit more complex, but that should get you started.
That is because you have the in every statement for every score (which means from 0 to infinite).
You will need to write inner if statements such as;
if (scoreTotal < 500){
lvlimg = "L01";
drawLevel(lvlimg);
if(scoreTotal x times of each the level) // That means for each level completed
{
lvlupSound();
}
}
If your score increment is only 1, then only play the tone when the score equals the threshold for a new level.
If they can increase their score by more than 1, then you could pass the number of points in and check the score before and after to see if the numbers fall on each side of the threshold.
If that still doesn't work, some more info on the "level" and points would be appreciated.
Try something like this (demo):
var scoreTotal,
lastLevel = 0,
levels = [500, 1000, 2500, 5000, 10000, 25000, 50000, 75000],
currentLevel = 0,
lvlImg;
function incScore() {
while (scoreTotal > levels[currentLevel]) {
currentLevel++;
}
if (lastLevel !== currentLevel) {
lastLevel = currentLevel;
// gives a two digit number with a leading zero
lvlImg = ('0' + currentLevel).slice(-2);
drawLevel("L" + lvlimg);
lvlupSound();
}
}
Then you can easily add additional levels by adding the score cutoff to the levels variable.