Is it possible to automatically change an image's source after a countdown/timer has reached zero? Let's say that I have 2 image sources - A and B, and one timer. How can I change the image source from A to B, when the timer has expired?
<img class="image" src="A">
<div class="timer"></div>
Timer expires:
<img class="image" src="B">
<div class="timer">Expired</div>
You can change the src with JavaSript's .src.
Here's an example:
var changeSrc = function() {
document.getElementById("image").src="http://via.placeholder.com/150x150";
}
var count=10;
var counter=setInterval(timer, 1000);
function timer() {
count=count-1;
if (count <= 0) {
clearInterval(counter);
changeSrc();
}
document.getElementById("timer").innerHTML = count;
}
<img id="image" src="http://via.placeholder.com/350x150">
<br>
<div>Timer: <span id="timer">10</span></div>
Related
How do I make a div auto refresh every specified time
without using jQuery
let refreshDiv = document.querySelector(".main-panel");
setInterval(function() {
refreshDiv.reload();
}, 5000);
<div class="main-panel">
<iframe src="" frameborder="0"></iframe>
</div>
function UPdate() {
T1 = document.querySelector(".main-panel");
T2 = T1.innerHTML;
T1.innerHTML = T2;
}
setInterval(UPdate, 10000);
I'm currently trying to play a gif every 10 seconds, instead of continuously every time the gif finishes.
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
setInterval(function() {
console.log($('#inviteLogo').attr('src'))
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
}, 2000)
</script>
</div>
Currently, I have this. However. As you can probably see, this only plays the gif once. I'm not entirely sure how I can make this play the gif every x seconds?
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
$('#inviteLogo').attr('src', image)
}, 2000)
</script>
</div>
I have also tried the above. Saving what the original SRC atr is, and then replacing it with the old one every 2 seconds. But this did not have my desired effect either.
First of all you have 2 setInterval... And one is repeating every milliseconds.
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1) // 1 second == 1000 milliseconds
If you have control on the frame of the gif, you can also put a frame fixed for 10sec.
so I thing the best way will be
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 10000) // 1000 == 1sec
</script>
</div>
the button plays audio. I'd also like it to also simultaneously start the timer below. As of now the timer starts immediately when the page loads. I'd like for it to only start along with the audio when I press the button. I can't figure out the syntax.
<button class="button1"
onclick="document.getElementById('sound1').play()">
</button>
<p> Time ends in <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
**strong text**</script>
Use currentTime and duration properties to calculate left time, here is an example:
var sound1 = document.getElementById('sound1');
var countDownTimer = document.getElementById('countdowntimer');
function play() {
sound1.play();
};
function updateTimer() {
countDownTimer.textContent = Math.floor(sound1.duration) - Math.floor(sound1.currentTime);
}
<audio id="sound1" src="https://ia902508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" ontimeupdate="updateTimer()" >
Your browser does not support the <code>audio</code> element.
</audio>
<button class="button1" onclick="play()">Play</button>
<p> Time ends in <span id="countdowntimer"></span> Seconds</p>
I have a div wrapper in which lazy load images are present. Then I have a div below those images and I want to make it Sticky.
<div id="someWrapper">
<img class="lazy" data-original="someImageURL"></img>
<img class="lazy" data-original="someImageURL"></img>
<img class="lazy" data-original="someImageURL"></img>
<img class="lazy" data-original="someImageURL"></img>
<div class="sticky">SomeContents</div> <!-- want to make this sticky on scrool -->
</div>
In order to make them sticky I need offset of the div. Problem is offset is not fixed on the page because of lazy load images that keep pushing the div downward. Image heights are unknown. No of images are 4. Tried using appear event on the last load element but its not giving me accurate results. Please help me how to solve this problem. I want to get offset of the sticky div so I can make a check on the scroll event.
After playing around and some research achieved the desired like this:
function activateStickyScrollEvent(offSetValue){
//code to activate scroll event
}
var lazyLength=$('#someWrapper lazy').length;
var lazyCount=0;
$('#someWrapper lazy').one('appear',function(){
++lazyCount;
if(lazyCount===lazyLength){
var getWrapperOffset=$('#someWrapper').offSet().top;
activateStickyScrollEvent(getWrapperOffset);
})
So, as I said, you may have to check if the last image in the set has been loaded, and then check for the element's offset. Here is a demo of how it could be done. Feel free to adapt the code to suit your needs.
//Ref to the wrapper
var $wrapper = $("#someWrapper");
//Ref to the last image in the set
var lastImgSrc = $wrapper.find(" > img:last").attr("data-original");
var image = new Image();
image.onload = function () {
//do something on load...
var offset = $wrapper.find(".sticky").offset();
alert (offset.top);
}
image.onerror = function () {
//do something on error...
}
image.src = lastImgSrc;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someWrapper">
<img class="lazy" data-original="someImageURL" />
<img class="lazy" data-original="someImageURL" />
<img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-4.jpg" src="http://dreamatico.com/data_images/sea/sea-4.jpg" width="100%" />
<img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-3.jpg" src="http://dreamatico.com/data_images/sea/sea-3.jpg" width="100%" />
<div class="sticky">SomeContents</div> <!-- want to make this sticky on scrool -->
</div>
Hope that helps.
You can count images to load, and the get the offset (OFFSET in my example) :
$(function() {
function imageLoaded() {
counter--;
if( counter === 0 ) {
// Here All your "lazy" images are loaded
var OFFSET = $('#someWrapper').offset().top; <---- you can get offset
}
}
var images = $('.lazy'),
counter = images.length; // initialize the counter
images.each(function() {
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
I have a counter set to 100, i want that by clicking on default.jpg image the countdown begin to count the mouse clicks maded.
Now it works only by clicking on the href not over the image.
I also want that when the counter reach 50/25 click the image change with another one.
To understand better i need to make a simple breck the egg "tamago" game, i have no js skills.
Here is what i've done:
<html>
<head>
<script type="text/javascript">
var clicks = 100;
function linkClick(){
document.getElementById('clicked').value = --clicks;
}
document.write('Click Me!');
</script>
<script type ="text/javascript">
function changeimage()
{
if (clicks==100)
{
document.getElementById('myimage').src="defaul.jpg";
}
if (clicks==50)
{
document.getElementById('myimage').src="crack1.jpg";
}
if (clicks==25)
{
document.getElementById('myimage').src="crack2.jpg";
}
</script>
<img src="1.jpg" id="myimage" alt="" onmousedown="changeimage()">
clicks:<input id="clicked" size="3" onfocus="this.blur();" value="10" > times.
</body>
</html>
Thank you
This would be a nice way of doing it. It's easy to read, and hopefully makes sense.
var count = 100;
var image = document.getElementById('myimage');
var images = ['default.jpg', 'crack1.jpg', 'crack2.jpg'];
image.src = images[0];
image.onclick = function(e)
{
if(count > 50)
image.src = images[0];
else if (count > 25)
image.src = images[1];
else if (count > 0)
image.src = images[2];
else
{
//do something here to indicate the end
}
count--;
};