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 以及更早的版本不支 ...
随机推荐
- C# 跨线程访问UI不报错，必须使用Invoke。
代码有时跨线程访问UI,修改按钮Enable属性不报异常.调试发现修改按钮属性的线程是Background,执行不报异常. 在窗体构造中添加 Control.CheckForIllegalCrossT ...
- 解决FastCGI 进程超过了配置的活动超时时限的问题
近日,需要满足测试需求,进行大数据并发测试时,报出[HTTP 错误 500.0 - Internal Server Error E:\PHP\php-cgi.exe - FastCGI 进程超过了配置 ...
- mssql like 优化
SqlServer中like 的查询一般我们都不推荐,但是当数据库某个字段的值是用分隔符区分的多个链接字符,比如,12,11,23等这样的类型.可能我们需要判断是否包含12. 这个时候我们想到的当然是 ...
- Git上传到码云及其常见问题详解
1.git init 初始化 2.git remote origin add https://gitee.com/su_yong_qing/SyqSystem.git 这里注意把链接替换为自己的仓库 ...
- vue-router简易的实现原理
class VueRouter { constructor(options) { this.$options = options; this.routeMap = {}; // 路由响应式 this. ...
- Google Analytics 学习笔记二 —— GA部署
一.直接部署 直接复制GA跟踪代码 放到所有页面 跟踪代码放到 "head"前面 二.GTM部署方法一 三.GTM部署方法二 Tacking ID 四.测试.参数配置与调优
- linux下oracle无法删除用户
Oracle删除用户的提示无法删除当前已连接用户.且无法kill掉用户进程的两种解决方法如下: 1.先锁定用户.然后查询进程号,最后删除对应的进程.在删除对应的用户 SQL>alter user ...
- 五、select的5种子句
1.Where 条件查询 比较运算符: 运算符 说明 > < = >= <= !=或<> In 在某集合内 between 在某范围内 In ...
- linux(02)基础shell命令
Linux(02)之shell命令 一,Linux命令行的组成结构 在我们的linux启动,登陆成功之后会显示: 这就是linux的命令行的组成结构 二,常见命令 1,Linux系统命令操作语法格式 ...
- python gyp
https://github.com/bnoordhuis/gyp 所以,手动加了这个变量 https://blog.csdn.net/weixin_30576827/article/details/ ...