Here is a new question. I want to make my Nan say "this is not a number" if nothing or text is entered. I know the physical code but I dont know where to put it or if I must make a function. Where ever I put it it either loops and say what ever was inputted first and then then "this is not a number" or "this is not a number" then NaN or it doesn't work at all.
javacript:
window.onload = function (){
var myDiv = document.getElementById("wrapper");
wrapper.setAttribute("align","center");
var startButton = document.getElementById("start");
var pauseButton = document.getElementById("pause");
var secondsBlock = document.getElementById("seconds");
var timer = document.getElementById("timer");
var newTime = document.createElement("h1");
newTime.innerHTML = secondsBlock.value;
timer.appendChild(newTime);
//setTimeout(function countdown () {
var numbers = (newTime.innerHTML);
newTime.innerHTML = numbers;
var newNumber;
function countdown(count){
newNumber =secondsBlock.value;
var numbers = (newNumber);
newTime.innerHTML = numbers;
stopper = setInterval(reduceAndShow, 1000);
if (numbers <10){
newTime.style.color = "red";
newTime.innerHTML = "0" + numbers;
};
};
function reduceAndShow(){
newNumber--;
var numbers = (newNumber);
newTime.innerHTML = numbers;
stopCountdown();
if (newNumber <10){
newTime.style.color = "red";
newTime.innerHTML= "0" + newNumber;
};
};
function stopCountdown(){
if(newNumber <= 0){
clearInterval(stopper);
};
};
startButton.onclick = function(){
countdown();
};
function pauseBut(){
clearInterval(stopper);
};
pauseButton.onclick =function(){
pauseBut()
};
html:
<div id="wrapper">
Seconds: <input type="text" name= "seconds" id="seconds"> <input type="button"
value="Start" id="start"> <input type="button" value="Pause" id="pause">
<div id="extraText"></div>
<div id="timer"></div>
</div>
You should get your example running in JSFiddle.net so people can see the whole thing, and investigate for you why it isn't working.
Here's one I made for you.
I've changed your code to the below. The main difference is I split it into two functions. One which checks that the input is a valid number, and the other does the counting down / displaying. One other little thing I changed was the way you declared the countdown function, you sort of declared it twice, I've changed it so it's only declared once:
window.onload = function(){
var myDiv = document.getElementById("wrapper");
var startButton = document.getElementById("start");
va r pauseButton = document.getElementById("pause");
var secondsBlock = document.getElementById("seconds");
var timer = document.getElementById("timer");
var newTime = document.createElement("h1");
function countdown(count) {
newTime.innerHTML = count;
if (count < 10) {
newTime.style.color = "red";
};
timer.appendChild(newTime);
if (count > 0) {
setTimeout(function () {
countdown(count - 1);
}, 1000);
}
}
function testInput() {
var count = seconds.value;
if (count == "" || isNaN(count)) {
newTime.innerHTML = "This is not a number";
timer.appendChild(newTime);
} else if (count > 100) {
newTime.innerHTML = "Number must be between 0 and 99"
timer.appendChild(newTime);
} else {
countdown(count);
}
}
startButton.onclick = testInput;
}
Looks like a very simple case of
if (typeof(seconds.value) == "number") { newTime.innerHTML = seconds.value; }
else { newTime.innerHTML = "This is not a number"; }
timer.appendChild(newTime);
Related
i am trying to code the typed jquery functinality in javascript.I am almost there.HEre i need to add a delay after loading the word.like a few secons(lest say 4 sec) after each word loaded. How can i do it. In tried delay and set time out.It is not working for me or i am placing in wrong position. How can i set it.
var count = 0,
count2 = 0,
arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"],
dir = true;
setInterval(function() {
var interval = setInterval(function() {
document.getElementById('p1').innerHTML = arr[count].substring(0, count2);
if (dir) {
count2++;
if (count2 >= arr[count].length) {
dir = false;
}
} else {
count2--;
if (count2 < 0) {
dir = true;
clearInterval(interval);
}
}
}, 100);
count++;
if (count == 6) count = 0;
}, 2500);
<div style="width=100%">
<span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span>
</div>
Your implementation will have problems if you add “A very long string” in to the array.
I’ve modified your code, hope it will help.
var count = 0,
count2 = 0,
arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"],
dir = true;
var p1 = document.getElementById("p1");
// Turning the intervals to on or off.
var onOff = function(bool, func, time) {
if (bool === true) {
interval = setInterval(func, time);
} else {
clearInterval(interval);
}
};
var eraseCharacters = function() {
// How long we want to wait before typing.
var wait = 1000;
// How fast we want to erase.
var erasingSpeed = 100;
var erase = function() {
p1.innerHTML = arr[count].substring(0, count2);
count2--;
if (count2 < 0) {
dir = true;
// Stop erasing.
onOff(false);
count++;
if (count === 6) {
count = 0;
}
// Start typing.
setTimeout(startTyping, wait);
}
};
// Start erasing.
onOff(true, erase, erasingSpeed);
};
var startTyping = function() {
// How long we want to wait before erasing.
var wait = 4000;
// How fast we want to type.
var typingSpeed = 100;
var type = function() {
p1.innerHTML = arr[count].substring(0, count2);
if (dir) {
count2++;
if (count2 > arr[count].length) {
dir = false;
// Stop typing.
onOff(false);
// Start erasing.
setTimeout(eraseCharacters, wait);
}
}
};
// Start typing.
onOff(true, type, typingSpeed);
};
// Start typing after 2 seconds.
setTimeout(startTyping, 2000);
<div style="width=100%">
<!-- Maybe it should be class. -->
<span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span>
</div>
var myVar = setInterval(function() {
myTimer()
}, 1000);
var d = 1;
function myTimer() {
document.getElementById("demo").innerHTML = d++;
}
Can any one help me how to set the dynamic timer in JavaScript?
I'm trying to create a quiz application and I need to run a timer for the questions which is already available in the database.
I have to retrieve a time from the database and I have to run a count-down timer.
What about something like this. It doesn't reply on the timer being perfect.
var running = false;
var timeToRun = 10000; // 10 seconds
var startTime;
var timer;
var output = document.getElementById("output");
function start(){
running = true;
startTime = new Date();
timer = setInterval(check, 100);
output.innerHTML = "Started<br>" + output.innerHTML;
}
function stop(){
running = false;
clearInterval(timer);
}
function check(){
var now = new Date();
var left = (startTime - now) + timeToRun;
output.innerHTML = left + "<br>" + output.innerHTML;
if (left < 0){
stop();
output.innerHTML = "times up <br>" + output.innerHTML;
}
}
start();
<div id="output">o</div>
function myTimer(d) {
d++;
document.getElementById("demo").innerHTML = d;
return d;
}
var d = 1;
var myVar = setInterval(function() {
d = myTimer(d);
}, 1000);
like this?
[Edit after reading comments:]
var endpoint = [php_timestamp_here];
var countdown = setInterval(function() {
var d = new Date();
var ts = d.getTime();
if( ts >= endpoint ){
// stuff after reach the point...
clearInterval(countdown);
}
// stuff every second
}, 1000);
Hi I made a js script for coin tossing and when I press the button to start it nothing appears
<script>
var coin = Math.random();
if(coin <= 0.5){
return "H";
}
else{
return "T";
}
var coinFlip = function(){
document.getElementById("flip").innerHTML = coin;
}
</script>
This is the button
<button onClick="coinFlip()">Flip</button>
Thank you for reading
coin is a random number the return is not doing what you think.
var coinFlip = function() {
var coin,
chance = Math.random();
if (chance <= 0.5) {
coin = "H";
} else {
coin = "T";
}
document.getElementById("flip").innerHTML = coin;
}
document.getElementById("btn").addEventListener("click", coinFlip);
<div id="flip"></div>
<button id="btn">Flip</button>
This question already has an answer here:
how to pause timer or freeze it and resume -> javascript
(1 answer)
Closed 9 years ago.
I have this timer which works fine, but i need to be able to pause and resume it after that. i would appreciate it if someone could help me.
<html>
<head>
<script>
function startTimer(m,s)
{
document.getElementById('timer').innerHTML= m+":"+s;
if (s==0)
{
if (m == 0)
{
return;
}
else if (m != 0)
{
m = m-1;
s = 60;
}
}
s = s-1;
t=setTimeout(function(){startTimer(m,s)},1000);
}
</script>
</head>
<body>
<button onClick = "startTimer(5,0)">Start</button>
<p id = "timer">00:00</p>
</body>
</html>
I simply can't stand to see setTimeout(...,1000) and expecting it to be exactly 1,000 milliseconds. Newsflash: it's not. In fact, depending on your system it could be anywhere between 992 and 1008, and that difference will add up.
I'm going to show you a pausable timer with delta timing to ensure accuracy. The only way for this to not be accurate is if you change your computer's clock in the middle of it.
function startTimer(seconds, container, oncomplete) {
var startTime, timer, obj, ms = seconds*1000,
display = document.getElementById(container);
obj = {};
obj.resume = function() {
startTime = new Date().getTime();
timer = setInterval(obj.step,250); // adjust this number to affect granularity
// lower numbers are more accurate, but more CPU-expensive
};
obj.pause = function() {
ms = obj.step();
clearInterval(timer);
};
obj.step = function() {
var now = Math.max(0,ms-(new Date().getTime()-startTime)),
m = Math.floor(now/60000), s = Math.floor(now/1000)%60;
s = (s < 10 ? "0" : "")+s;
display.innerHTML = m+":"+s;
if( now == 0) {
clearInterval(timer);
obj.resume = function() {};
if( oncomplete) oncomplete();
}
return now;
};
obj.resume();
return obj;
}
And use this to start/pause/resume:
// start:
var timer = startTimer(5*60, "timer", function() {alert("Done!");});
// pause:
timer.pause();
// resume:
timer.resume();
<p id="timer">00:00</p>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";
function startTimer(m, s) {
timer.textContent = m + ":" + s;
if (s == 0) {
if (m == 0) {
return;
} else if (m != 0) {
m = m - 1;
s = 60;
}
}
s = s - 1;
id = setTimeout(function () {
startTimer(m, s)
}, 1000);
}
function pauseTimer() {
value = timer.textContent;
clearTimeout(id);
}
function resumeTimer() {
var t = value.split(":");
startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}
start.addEventListener("click", function () {
startTimer(5, 0);
}, false);
pause.addEventListener("click", pauseTimer, false);
resume.addEventListener("click", resumeTimer, false);
on jsfiddle
There are a whole load of improvements that could be made but I'm sticking with the code that the OP posted for the OP's comprehension.
Here is an extended version to give you further ideas on jsfiddle
I tried using this JavaScript countdown timer on my page but the timer won't start.
What am I doing wrongly?
var CountdownID = null;
var start_msecond = 9;
var start_sec = 120;
window.onload = countDown(start_msecond, start_sec, "timerID");
function countDown(pmsecond, psecond, timerID) {
var msecond = ((pmsecond < 1) ? "" : "") + pmsecond;
var second = ((psecond < 9) ? "0": "") + psecond;
document.getElementById(timerID).innerHTML = second + "." + msecond;
if (pmsecond == 0 && (psecond-1) < 0) { //Recurse timer
clearTimeout(CountdownID);
var command = "countDown("+start_msecond+", "+start_sec+", '"+timerID+"')";
CountdownID = window.setTimeout(command, 100);
alert("Time is Up! Enter your PIN now to subscribe!");
}
else { //Decrease time by one second
--pmsecond;
if (pmsecond == 0) {
pmsecond=start_msecond;
--psecond;
}
if (psecond == 0) {
psecond=start_sec;
}
var command = "countDown("+pmsecond+", "+psecond+", '"+timerID+"')";
CountdownID = window.setTimeout(command, 100);
}
}
<span style="color:red" name="timerID" id="timerID">91.6</span>
here is what you need to do first
window.onload = countDown(start_msecond, start_sec, "timerID");
should be
window.onload = function () {
countDown(start_msecond, start_sec, "timerID");
}
also you should avoid using a string in your setTimeout function:
CountdownID = window.setTimeout(function () {
countDown(pmsecond,psecond,"timerID");
}, 100);
See here http://jsbin.com/ifiyad/2/edit