HTML5与CSS3开发实战小记

HTML表单与进度条实战

最新推荐文章于 2021-06-17 05:21:49 发布

转载最新推荐文章于 2021-06-17 05:21:49 发布 · 1k 阅读

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用HTML的output标签实现表单输入的实时计算功能，以及progress标签创建动态更新的进度条，通过JavaScript控制进度显示，适用于前端开发初学者实践。

关于output

output标签可直接计算

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
        <input name="a" id="a" type="number" step="any"> +
        <input name="b" id="b" type="number" step="any"> =
        <output name="o" for="a b"></output>
 </form>

在这里插入图片描述

关于progress

<p>这是一个进度条</p>
    <progress id="p" max="100" value="0">
    </progress>
    <span id="completed">0</span>%
    <script>
        var progress = document.getElementById('p');
        function updateProg(newValue){
            progress.value = newValue;
            document.getElementById('completed').innerText = newValue;
        }
        var i = 0;
        var t = setInterval(function(){
            i = i + 1;
            updateProg(i)
            if(i >= 100){
                clearInterval(t);
            }
        }, 500);
    </script>