码迷,mamicode.com
首页 > 其他好文 > 详细

进度条------小案例

时间:2018-11-05 19:20:14      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:gets   var   idt   box   color   turn   type   int   script   

很少会用到,简单的写一下

代码如下:

<style type="text/css">
        #box {
            width: 400px;
            height: 40px;
            border: 1px dashed #ccc;
            position: relative;
        }

        #div2 {
            width: 0;
            height: 40px;
            background-color: blue;
        }

        #div3 {
            position: absolute;
            right: -50px;
            top: 10px;
        }
    </style>
    <script>
        //获取内部或外部样式的属性值
        function getStyle(obj, att) {
            return obj.currentStyle ? obj.currentStyle[att] : getComputedStyle(obj, null)[att];
        }
        window.onload = function () {
            var div2 = document.getElementById(div2);
            var div3 = document.getElementById(div3);
            var timer = null;
            var num = 0;

            //获取div2的宽度值
            //console.log(parseInt(getStyle(div2,‘width‘)));

            function show() {
                var _width = parseInt(getStyle(div2, width));
                if (_width >= 400) {
                    clearInterval(timer);
                } else {
                    div2.style.width = _width + 4 + px;
                    div3.innerHTML = ++num + %;
                }

            }

            show();
            timer = setInterval(show, 50);
        };
    </script>
</head>

<body>
    <div id="box">
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>

 

进度条------小案例

标签:gets   var   idt   box   color   turn   type   int   script   

原文地址:https://www.cnblogs.com/yd-MM/p/9910320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!