卵形进度条不用图片 (js)-JavaSript-爱易网页

卵形进度条不用图片 (js)

日期：2014-05-16　浏览次数：20432 次

椭圆形进度条不用图片 (js)

我想要如上形状的进度条，但是只有在firefox下是可行的，如何让大部分浏览器都支持呢？以下是进度条的代码，麻烦大家帮帮忙，如何修改，谢谢！
<html>

<head>

    <title>js 进度条</title>

</head>

<body>

    <p align="center">

    <span id="show" style="border:1px solid red;width:800px;height:30px;">

        <hr id="bar" align="left" style="height:30px;width:0px;" color="red">

    </span>

    <span id="total"></span>

    </p>

</body>

    <script language="JavaScript">

        var per=0;

        function run(){

            per+=parseInt(Math.random()*1000000%20);

            document.getElementById("bar").style.width=per;

            if(per>=200)per=200;

            document.getElementById("total").innerHTML=parseInt((per/200)*100)+'%';

            if(per>=200){

                clearTimeout(timeout);

                return;

            }

            var timeout=setTimeout("run()",100);

        }

        onload=run();

    </script>

</html>

</html>
------解决方案--------------------
设置border-radius吧，IE9以上及其它大多浏览器支持
你这只是利用火狐hr元素的奇怪特性实现的
------解决方案--------------------
如果不考虑浏览器的兼容性，那么用html5的border-radius属性就能实现圆角；
如果要兼顾ie低版本系列，那么最简洁的就是用背景圆角的图片，而且这类图片gif格式就可以了，1K左右的大小；
当然了，如果你执意要用代码去实现，且又要兼顾ie浏览器，那么用N个div的css border属性堆叠成圆角效果，但是代码太繁杂啦！
请你取舍以上方法！