HTML Script elements
Elements that are used for scripting.
Scripting elements are not rendered.
Scripting elements provide functionality for the user.
Scripting elements are
HTML <script> tag example using <meter> and <progress> Tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML script tag example using Meter and Progress Tag</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
.setvalue {
margin: 20px 0px;
padding: 10px 20px;
}
button,
input {
margin: 20px 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML script tag example using Meter and Progress Tag</h3>
<p>The max attribute specifies the maximum value acceptable for an element.</p>
<p>Click on the bar to start process.</p>
<input class="setvalue" id="setvalueid" type="number" value="50" min="0" max="100" />
<button class="setvalue" onclick="setValue()">Set value</button><br><br>
<label for="meterbar">CPU Usage:</label>
<meter id="meterbar" value="29" min="0" max="100" low="30" high="80" onclick="startMeter()">29%</meter><span
id="meterbarspan">29
</span>%<br><br>
<label for="progressbar">HD Consumption:</label>
<progress id="progressbar" value="0" max="100" onclick="startProgress()"></progress><span id="progressbarspan">
</span>%
<br>
<button onclick="startProcess()">Start all Process</button>
<button onclick="clearValue()">Clear Values</button>
</div>
</body>
<script>
let setvalueId = document.querySelector("#setvalueid");
let meterBar = document.querySelector("#meterbar");
let meterBarSpan = document.querySelector("#meterbarspan");
function startMeter() {
let currentValue = meterBar.value;
if (currentValue >= meterBar.max) {
meterBar.value = 0;
}
const intervalId = setInterval(function () {
if (meterBar.value >= meterBar.max) {
clearInterval(intervalId);
} else {
meterBar.value += 1;
progressBar.style.accentColor = "#ff0000";
meterBarSpan.textContent = meterBar.value;
}
}, 100);
}
const progressBar = document.querySelector("#progressbar");
const progressBarSpan = document.querySelector("#progressbarspan");
function startProgress() {
let currentValue = progressBar.value;
if (currentValue >= progressBar.max) {
progressBar.value = 0;
}
const intervalId = setInterval(function () {
if (progressBar.value >= progressBar.max) {
clearInterval(intervalId);
} else {
progressBar.value += 1;
progressBar.style.accentColor = "#ff0000";
progressBarSpan.textContent = progressBar.value;
}
}, 100);
}
function startProcess() {
startMeter();
startProgress();
}
function setValue() {
meterBar.value = setvalueId.value;
meterBarSpan.textContent = setvalueId.value;
progressBar.value = setvalueId.value;
progressBarSpan.textContent = setvalueId.value;
}
function clearValue() {
meterBar.value = 0;
meterBarSpan.textContent = 0;
progressBar.value = 0;
progressBarSpan.textContent = 0;
}
</script>
</html>
Copy code and click on the "Try it Now" button to see how it works.