卵形进度条 不用图片 (js)
日期：2014-05-16 浏览次数：20454 次
椭圆形进度条 不用图片 (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属性堆叠成圆角效果，但是代码太繁杂啦！
请你取舍以上方法！
我想要如上形状的进度条，但是只有在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属性堆叠成圆角效果，但是代码太繁杂啦！
请你取舍以上方法！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
