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进度条使用测试的更多相关文章
- 微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序 progress 进度条 内部圆角及内部条渐变色
微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...
- android中progress进度条的使用
activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- progress 进度条
进度条. 属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...
- progress进度条的样式修改
由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...
- bootstrap3的 progress 进度条
: 2.3版 3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...
- [Cocos2d-x For WP8]Progress 进度条
Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...
- 使用div实现progress进度条
在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*) 可以在CSS里改样式,可以JS里改进度. <div cla ...
- 详解HTML5中的进度条progress元素简介及兼容性处理
一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...
随机推荐
- Java面向对象——相关基本定义
Java面向对象——相关基本定义 摘要:本文简单介绍了面向对象的编程方式,以及与之有关的一些基本定义. 面向对象 什么是面向对象 面向对象编程是一种对现实世界建立计算机模型的一种编程方法.简称OOP( ...
- 超时空英雄传说2复仇魔神完全攻略&秘技
╓─╥───────────────────────────────────────────────────╥─╖ ║ ║ 超 時 空 英 雄 傳 說 2 ║ ║ ║ ║ --復 仇 魔 神-- ║ ...
- mysql判断是否包含某个字符的方法
mysql判断是否包含某个字符的方法用locate 是最快的,like 最慢.position一般实战例子:select * from historydatawhere locate('0',open ...
- JS高阶---原型链
[大纲] [主体] 1.创建函数 注意:Object内置原生对象原来就有 2.添加实例方法 3.根据构造函数创建实例对象 原型链寻找 1.本身有在本身找 2.本身没有往摸着隐式原型链往里找 或者再上层 ...
- pdfium舍弃v8依赖
Step 3 去除v8依赖 用文本编辑器打开pdfium根目录下的pdfium.gyp文件,找到'javascript'及'jsapi'依赖(47行左右): 'dependencies': [ 'sa ...
- JS中的实例方法、静态方法、实例属性、静态属性
一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么? 静态方法: function A(){} A.col='red' //静态属性 A.sayMeS=f ...
- 201777010217-金云馨《面向对象程序设计（Java）》第十二周学习总结
内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...
- shell-处理用户输入
命令行参数 #./admin 10 30 读取参数 [root@localhost scrips]# vi test28.sh #!/bin/bashfactorial=1for ((number=1 ...
- RST复位报文
复位报文段: 一些特殊情况,TCP一端向另一端发送复位报文,以通知对方关闭链接或者重新建立链接. 产生复位报文的三种情况: 1. 当客户端访问一个不存在的端口时,目标主机会给客户端发送一个复位报文段. ...
- k8s进入指定pod下的指定容器的命令
访问某pod的某个容器: kubectl --namespace=default exec -it user-deployment-54469dd57-vg87g --container user - ...