导入
while 循环用于追踪步数
通过构建一个每日步数追踪器来学习 JavaScript 的 while 循环，该追踪器会持续询问步数，直到用户完成输入。
...
1let count = 1; 2 3while (count <= 5) { 4 console.log("This is loop number " + count); 5 count = count + 1; 6}
No configuration found for ID: 9a1445156960cc49d64ff30fd1d6c59ff09a11ef13406615c7936a5c495140c3
PageFlux AI 助手
💡 选中文本后点击"AI 询问"，或 Ctrl+Enter 发送消息
Hey AI, make an HTML page with daily step input and a button labeled “Add steps.” When I click, it should add the number to a running total and display the updated total on the page.
No configuration found for ID: 7563c9f1a28502938142a62e14bc3c16bbbca0efb4494392a1c58ce1ddc9b1bb
1<!DOCTYPE html> 2<html> 3<body> 4 5<h1>Daily Step Tracker</h1> 6 7<p>Enter your steps:</p> 8 9<!-- Input box where the user types the number of steps --> 10<input type="text" id="stepInput" value="0"> 11 12<!-- Button that calls the addSteps() function when clicked --> 13<button onclick="addSteps()">Add steps</button> 14 15<!-- Paragraph showing the running total of steps --> 16<p>Total steps: <span id="totalSteps">0</span></p> 17 18<script> 19 // Keep track of the running total of steps 20 var totalSteps = 0; 21 22 // Function that adds the input steps to the total 23 function addSteps() { 24 // Get the value typed into the input box 25 var steps = document.getElementById("stepInput").value; 26 27 // Check if the input is a valid number 28 if (!isNaN(steps)) { 29 // Convert input to a number and add to the running total 30 totalSteps += Number(steps); 31 32 // Update the <span> on the page with the new total 33 document.getElementById("totalSteps").innerHTML = totalSteps; 34 35 // Clear the input box after adding steps 36 document.getElementById("stepInput").value = "0"; 37 } 38 } 39</script> 40 41</body> 42</html>
1<!DOCTYPE html> 2<html> 3<body> 4 5<h1>Daily Step Tracker</h1> 6 7<p>Enter your steps:</p> 8 9<!-- Input box where the user types the number of steps --> 10<input type="text" id="stepInput" value="0"> 11 12<!-- Button that calls the addSteps() function when clicked --> 13<button onclick="addSteps()">Add steps</button> 14 15<!-- Paragraph showing the running total of steps --> 16<p>Total steps: <span id="totalSteps">0</span></p> 17 18<script> 19 // Keep track of the running total of steps 20 var totalSteps = 0; 21 22 // Function that adds the input steps to the total 23 function addSteps() { 24 // Get the value typed into the input box 25 var steps = document.getElementById("stepInput").value; 26 27 // Check if the input is a valid number 28 if (!isNaN(steps)) { 29 // Convert input to a number and add to the running total 30 totalSteps += Number(steps); 31 32 // Update the <span> on the page with the new total 33 document.getElementById("totalSteps").innerHTML = totalSteps; 34 35 // Clear the input box after adding steps 36 document.getElementById("stepInput").value = "0"; 37 } 38 } 39</script> 40 41</body> 42</html>
No configuration found for ID: a4e6dc8a48aa806a0a19fb27bc25629d2a087273074c4a4f38858fefb8f7f90b
1<!DOCTYPE html> 2<html> 3<body> 4 5<h1>Daily Step Tracker</h1> 6 7<p>Enter your steps:</p> 8 9<input type="text" id="stepInput" value="0"> 10 11<button onclick="addSteps()">Add steps</button> 12 13<button onclick="resetSteps()">Reset total</button> 14 15<p>Total steps: <span id="totalSteps">0</span></p> 16 17<script> 18 var totalSteps = 0; 19 20 function addSteps() { 21 var steps = document.getElementById("stepInput").value; 22 23 if (!isNaN(steps)) { 24 totalSteps += Number(steps); 25 26 document.getElementById("totalSteps").innerHTML = totalSteps; 27 28 document.getElementById("stepInput").value = "0"; 29 } 30 } 31 32 // Function that resets the step total back to 0 33 function resetSteps() { 34 // Reset the totalSteps variable 35 totalSteps = 0; 36 37 document.getElementById("totalSteps").innerHTML = totalSteps; 38 } 39</script> 40 41</body> 42</html>
1<!DOCTYPE html> 2<html> 3<body> 4 5<h1>Daily Step Tracker</h1> 6 7<p>Enter your steps:</p> 8 9<input type="text" id="stepInput" value="0"> 10 11<button onclick="addSteps()">Add steps</button> 12 13<button onclick="resetSteps()">Reset total</button> 14 15<p>Total steps: <span id="totalSteps">0</span></p> 16 17<script> 18 var totalSteps = 0; 19 20 function addSteps() { 21 var steps = document.getElementById("stepInput").value; 22 23 if (!isNaN(steps)) { 24 totalSteps += Number(steps); 25 26 document.getElementById("totalSteps").innerHTML = totalSteps; 27 28 document.getElementById("stepInput").value = "0"; 29 } 30 } 31 32 // Function that resets the step total back to 0 33 function resetSteps() { 34 // Reset the totalSteps variable 35 totalSteps = 0; 36 37 document.getElementById("totalSteps").innerHTML = totalSteps; 38 } 39</script> 40 41</body> 42</html>