effect:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<Title> digital increment assembly </ title>
<! - introduced jquery ->
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
</head>
<body>
<! - do a playback controls ->
<div id="movie">
<! - definition of the slide assembly ->
<input type="range" id="slider" min="0" max="1000" step="1" value="0" onchange="print()" />
<! - Displays the current value of the slider assembly ->
<P> Current values: <span id = "print"> 0 </ span> </ p>
<-! Control buttons ->
<button id="start" onclick="start()">播放</button>
<button id="stop" onclick="stop()">停止</button>
</div>
</body>
</html>
<script type="text/javascript">
// define an identifier that is used to determine the user clicks on the Start button or the pause button
var choose = true
// This function is used to display the current value of the slider
function print() {
//getting information
var value = parseFloat ($ ( '# slider'). val ()) // displaying information
$('#print').text(value)
}
// This function is responsible for modifying the value of values
function changeVal() {
// achieve pure js
// var value = parseFloat(document.getElementById("slider").value);
//Display information
// document.getElementById("print").innerHTML = value;
// if (value == 1000 || choose == false) {
// return;
// } else {
// document.getElementById("slider").value = value + 1;
// }
// use jquery to achieve
var value = parseFloat ($ ( '# slider'). val ()) // display information
() // Modify the value of the slider print
if (value == 1000 || choose == false) {
return
} else {
$('#slider').val(value + 1)
}
}
// This function is responsible for the Start button
function start() {
choose = true
setInterval('changeVal()', 10)
}
// This function is responsible for the pause button
function stop() {
choose = false
}
</script>