html。PROGRESS进度条使用测试

效果图：

代码：

-----------------------------------

//本文来自：https://www.cnblogs.com/java2sap/p/11199126.html

<!DOCTYPE html>

<html>

<style>

progress

{

height:30px;

width :300px;

   color:orange; /*兼容IE10的已完成进度背景*/

//border:none;

   border-radius: 0.3rem;

   background:#d7d7d7;

  /*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/

}

/* 表示总长度背景色 */

progress::-webkit-progress-bar

{

   background:#d7d7d7;

   border-radius: 0.5rem;

}

progress::-webkit-progress-value

{

border-radius: 0.5rem;

}

progress#myProgress2::-webkit-progress-value

{

background:blue;

}

progress#myProgress3::-webkit-progress-value

{

background:red;

}

progress::-moz-progress-bar

{

     background:orange;

border-radius: 0.5rem;

}

 </style>

<body>

<h3>演示如何访问 PROGRESS 元素</h3>

释放进度：

<progress id="myProgress1" value="100" max="100">123123</progress>

<span id="demo1"></span>

<br><br>

完成进度：

<progress id="myProgress2" value="0" max="100">

</progress>

<span id="demo2"></span>

<br><br>

释放失败：

<progress id="myProgress3" value="0" max="100">

</progress>

<span id="demo3"></span>

<script>

//设置浏览器轮询任务，（方法名，间隔ms)

var intz1 = window.setInterval(myFunction, 1000);

//每秒查询后台类

function myFunction()

{

var x = document.getElementById("myProgress1").value;

if(x == 0) {

//关闭轮询

clearInterval(intz1);

//alert("轮询完成");

return;

}

//TODO ajax查询后台类赋值

//模拟赋值start

document.getElementById("myProgress1").value=(x-5);

document.getElementById("demo1").innerHTML = (x-5);

var r = Math.random();

if(r > 0.5) {

var x2 = document.getElementById("myProgress2").value;

document.getElementById("myProgress2").value = (x2+5);

document.getElementById("demo2").innerHTML = (x2+5);

} else {

var x3 = document.getElementById("myProgress3").value;

document.getElementById("myProgress3").value=(x3+5);

document.getElementById("demo3").innerHTML =(x3+5);

 }

//模拟赋值end

}

</script>

</body>

</html>

巴特西

html。PROGRESS进度条使用测试

最新文章

热门文章