JS实现一个简单的动态进度条

最新推荐文章于 2023-11-09 11:24:12 发布

兜兜君

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量1k

点赞数 1

文章标签： js html

本文链接：https://blog.csdn.net/m0_46371790/article/details/106394014

版权

JS实现一个简单的动态进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <script>
        //实现进度条的动态功能
        // 页面执行完之后立即执行该function函数，类比Axure中的交互动作
        window.onload = function(){
            //动作  选中进度条
            var one = document.getElementById('one');
            var two = document.getElementById('two');
            //设置进度条的值
            //one.value = 50;
            //定时器  每隔多少每秒调用一次
            setInterval(function(){
                //获取progress原先的值，在原先的基础上，设置到现在的值上。
                if (one.value<100){
                    one.value = one.value+1;
                    //设置span的内容
                    two.innerHTML = one.value + '%

最低0.47元/天解锁文章

兜兜君

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现一个简单的动态进度条

JS实现一个简单的动态进度条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>进度条</title> <script> //实现进度条
复制链接

扫一扫