revision:
Click the button and wait for 3 seconds.
code:
<p class="spec">Click the button and wait for 3 seconds.</p>
<button onclick="setTimeout(wait, 3000);">press me</button>
<p class="spec" style="font-size:1.15vw; color: magenta;"></p>
<script>
function wait() {
var pText = document.getElementsByTagName("p")[2];
pText.innerHTML = "Welcome to this page!";
}
</script>
Press the first button and wait 4 seconds.
Press the second button before 4 seconds to prevent the first button to execute.
code:
<div>
<p class="spec">Press the first button and wait 4 seconds.</p>
<p class="spec">Press the second button before 4 seconds to prevent the
first button to execute. </p>
<button style="margin-right:1vw" onclick="startFunction()">press
me</button>
<button onclick="stopFunction()">stop</button>
<p class="spec" style="font-size:1.15vw; color: red;"></p>
</div>
<script>
var setTimeout_ID;
function startFunction() {
setTimeout_ID = setTimeout(function () {
var pText2 = document.getElementsByTagName("p")[5];
pText2.innerHTML = "Again, welcome to this page!";
}, 4000);
}
function stopFunction() {
clearTimeout(setTimeout_ID);
}
</script>
code:
<div>
<h3 style="margin-left:5vw; font-size: 2vw;">10</h3>
<button onclick="counter()">press me</button>
</div>
<script>
let count = 10;
function counter() {
var h3Heading = document.getElementsByTagName("h3")[0];
var countDown_ID = setInterval(function () {
count--;
h3Heading.innerHTML = count;
if (count <= 0) {
h3Heading.innerHTML = "Welcome to this page!";
clearInterval(countDown_ID);
}
}, 1000);
}
</script>
A script on this page starts this clock:
code:
<div>
<p class="spec">A script on this page starts this clock:</p>
<p class="spec" id="demo"></p>
</div>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
A script on this page starts this clock:
code:
<div>
<p class="spec">A script on this page starts this clock:</p>
<p class="spec" id="demo2"></p>
<button onclick="stop()">stop time</button>
</div>
<script>
var Var = setInterval(Timer, 1000);
function Timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo2").innerHTML = t;
}
function stop() {
clearInterval(Var);
}
</script>
The setInterval() method executes the setColor() function once every second, which will toggle between two background colors.
code:
<div>
<p class="spec">The setInterval() method executes the setColor() function
once every second, which will toggle between two background colors.</p>
<div id="div1"></div>
<button onclick="stopColor()">stop toggling</button>
</div>
<script>
const div = document.getElementById("div1")
var color = setInterval(setColor, 1000);
function setColor() {
div.style.backgroundColor = div.style.backgroundColor == "yellow" ? "red" :
"yellow";
}
function stopColor() {
clearInterval(color);
}
</script>
code:
<div>
<button onclick="move()">move</button><br><br>
<div id="moveBar">this is a div element</div>
</div>
<script>
function move() {
var elem = document.getElementById("moveBar");
var width = 0;
var idVar = setInterval(change, 10);
function change() {
if (width == 100) {
clearInterval(idVar)
}
else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Coffee list:
code:
<div>
<p class="spec" style="text-decoration: underline;">Coffee list:</p>
<ul style="margin-left: 3vw;" id="coffees"></ul>
</div>
<script>
var ul = document.getElementById("coffees");
let i = 0;
let coffees = ["Cortado", "Macchiato", "Mocha", "Latte", "Capuccino", "Americano"];
let numberOfCoffees = coffees.length ;
function iterateOverArray() {
var li = document.createElement("li");
li.innerText = coffees[i];
ul.appendChild(li);
i++;
}
var printCoffees = setInterval(iterateOverArray, 1000);
setTimeout(() => {
clearInterval(printCoffees);
}, numberOfCoffees * 1001);
</script>