HTML5与CSS3开发实战小记

HTML表单与进度条实战
本文介绍如何使用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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值