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 以及更早的版本不支 ...
随机推荐
- NIO你真正了解多少？
解释一下java.io.Serializable接口 类通过实现 Java.io.Serializable 接口以启用其序列化功能.未实现此接口的类将无法使其任何状态序列化或反序列化. IO操作最佳实 ...
- Java网络编程 -- AIO异步网络编程
AIO中的A即Asynchronous,AIO即异步IO.它是异步非阻塞的,客户端的I/O请求都是由OS先完成了再通知服务器应用去启动线程进行处理,一般我们的业务处理逻辑会变成一个回调函数,等待IO操 ...
- git使用读书笔记
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- 利用Injecttion优化编辑的速度，你不是缺一台性能优化的电脑而是缺一个快速编译的工具~
请前往如下的链接查看优化编译速度: https://www.jianshu.com/p/b2a2f15a3283
- 电信NBIOT 3 - 数据下行
电信NBIOT 1 - 数据上行(中国电信开发者平台对接流程) 电信NBIOT 2 - 数据上行(中间件获取电信消息通知) 电信NBIOT 3 - 数据下行 电信NBIOT 4 - NB73模块上行测 ...
- 澄清Fundebug录屏技术的几点误会
1. "视频"并非真的视频.也不是通过连续播放大量截图来实现 首先请大家观看这个视频: 视频中,当鼠标点击"场景重现",会立即播放一段"视频" ...
- BeautyWe.js 一套专注于微信小程序的开发范式
摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...
- Linux计划任务，定时清空日志
以Ubuntu为例,利用系统自带计划任务,即cron ,计划任务,是任务在约定的时间执行已经计划好的工作,这是表面的意思.在Linux中,我们经常用到 cron 服务器来完成这项工作.cron服务器可 ...
- odoo10学习笔记十六：定时任务
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189382.html 一:定义定时器数据模型 模型中定义需要用到的字段.定时方法 from odoo im ...
- [PHP] 项目实践中的自动加载实现
1.使用spl_autoload_register函数注册一个自己定义的自动加载函数2.当在代码中new一个不存在的类的时候,上面的函数会被调用,不存在的类名会被作为参数传入该函数中3.兼容了两种方式 ...