I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);
Related
I'm working on a webpage and I require some help with the JavaScript.
The site should be able to load a full-screen image that changes depending on the time and date.
To be exact there are weekday shows and weekend shows and this page is required to project the show's poster depending on what time and day it is.
My current code looks like this;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="images/4.png">
</body>
</html>
CSS
body {
background-image:linear-gradient(white, dimgray);
}
img {
border-radius: 4px;
padding: 5px;
width: 2560px;
height: 720px;
object-fit: fill;
}
Javascript
setInterval(function() {
var date = new Date();
var img = document.getElementById('Kiss100');
if (date.getHours() < 12) {
if( img.src.indexOf('Kiss') < 0 ) {
img.src = 'images/3.jpeg'
}
} else {
if( img.src.indexOf('Kiss100') < 0 ) {
img.src = 'images/1.jpeg'
}
}
},60000);
As you can see I tried setting a specific resolution in CSS but I want it to change depending on the platform. Also, in the JavaScript I wanted it to be more specific but I got stuck.
Thanks in advance.
Instead of img.src.indexOf('Kiss') < 0, try - if (!img).
Use the Conditional (ternary) operator to get rid of if-else.
Finally, if you want a full-screen image, give it full width and auto height.
Below is a working snippet. You should see that according to the condition the image will be updated after 5 seconds.
(I tried random images, you can use your own.)
setInterval(function () {
var imgEl = document.getElementById('Kiss100');
if (!imgEl) return;
var date = new Date();
imgEl.src = date.getHours() < 12
? 'https://source.unsplash.com/user/c_v_r/100×100'
: 'https://www.kasandbox.org/programming-images/avatars/cs-hopper-happy.png'
}, 5000);
body {
background-image:linear-gradient(white, dimgray);
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</body>
</html>
I'm Tring to get a user to chose with 2 buttons, which site will be presented in iframe tag.
Option1.html does work as default, but Option1.html & Option2.html do not work with user button.
When Clicking the buttons, I Get the default browser error "Can’t reach this page".
Please Take into account, that I a beginner with HTML and JS.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "Option1.htm";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "Option2.htm";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
Ok first make a folder and put this code in that and make another html document named same as given in your code...
Or see this
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "index.html";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "index2.html";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
This will be the main page...
And this will be inbdex.html. When user clicks option1 then this will be shown...
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>
And the below thing will be index2.html. So when user clicks option2 then this will be shown!
<html>
this is other page
</html>
Can anyone help :
The scenario is when the user1 click the button it will increment
Example : user1 clicks 5 times and then the user2 when it clicks the next number will be 6. and then when the user1 click again it will be 7
i think it works with ajax and save to db, anyone can help me how to do it. Im a begginer in ajax and database
Here is the code i just know:
<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>
</body>
</html>
<script type="text/javascript">
var counter= 0;
function counter() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
</script>
Please use session storage to store the incremental values.
like store the values using sessionStorage.setItem("userclicks",variablevalue);
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
I have an image at the URL http://192.168.1.53/html/cam.jpg (from a Raspberry Pi) and this image is changing very fast (it is from a camera).
So I want to have some JavaScript on a website that will reload this image every second for example.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<style>
img,body {
padding: 0px;
margin: 0px;
}
</style>
<img id="img" src="http://192.168.1.53/html/cam.jpg">
<img id="img1" src="http://192.168.1.53/html/cam.jpg">
<script src="script.js"></script>
</body>
</html>
And my script:
function update() {
window.alert("aa");
document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
setTimeout(update, 1000);
}
setTimeout(update, 1000);
alert is working, but the image is not changing :/ (I have 2 images (they are the same))
The problem is that the image src is not altered so the image is not reloaded.
You need to convince the browser that the image is new. A good trick is to append a timestamp to the url so that it is always considered new.
function update() {
var source = 'http://192.168.1.53/html/cam.jpg',
timestamp = (new Date()).getTime(),
newUrl = source + '?_=' + timestamp;
document.getElementById("img").src = newUrl;
document.getElementById("img1").src = newUrl;
setTimeout(update, 1000);
}
Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...