前端入门经验——进度条-白红宇的个人博客

前端入门经验——进度条

发布日期：2021-05-07 23:20:49 浏览次数：23 分类：原创文章

本文共 1330 字，大约阅读时间需要 4 分钟。

源码

<!DOCTYPE html><html><head> @include('./header.html', { "title": "进度条" }) </head><style>    .container {            display: inline-block;        width: 5.75rem;        height: 0.5rem;        border-radius: 0.125rem;    }        .bar {            display: inline-block;        background: linear-gradient(to right, #198BFB, #35E9FF);        color: black;        font-weight: bold;        border-radius: 0.125rem;        height: 100%;        position: relative;    }        .percentNum {            position: absolute;        display: inline-block;        right: -0.75rem;    }</style><body>    <div class="wrap">        <p class="container">            <span class="bar">                    <em class="percentNum"></em>                </span>        </p>    </div>    <script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script>    <script>        $(document).ready(function() {                var percentage = 1000;            if (percentage <= 100) {                    var widthTemp = (percentage / 100) * 100 + '%';                $('.bar').css('width', widthTemp);                $('.percentNum').text(widthTemp);            } else {                    $('.bar').css('width', '100%');                $('.percentNum').html(" <span style='color: red'>!!!!!</span>");            }        });    </script></body></html>

实现效果

上一篇：Vue项目中引进elementUI和markdown

下一篇：Vue项目引进sass

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章