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 以及更早的版本不支 ...
随机推荐
- Unity中AndroidManifest增加权限，打开应用时不弹出权限申请
一 屏蔽第一次打开apk时权限弹窗: 在Activity下添加<meta-data android:name="unityplayer.SkipPermissionsDialog&qu ...
- 多线程学习笔记(一) InvokeRequired 和 delegate
入门示例: 假如有一个label,我们希望像走马灯一样,从1显示到100 private void button1_Click(object sender, EventArgs e) { ; i &l ...
- UGUI在两个UI间坐标转换
在UGUI中,在两个Canvas之间进行坐标转换,从CanvasA下的坐标转换到CanvasB下. 或者在同一个界面下,从不同的节点下,转成相同的坐标. 函数定义 public static bool ...
- React 受控组件和非受控组件
需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...
- conan使用(四)--打包二进制库
前面总结过如何打包一个存头文件库,那种情况下非常简单,因为只需要将源文件拷贝就行了.现在来研究下如何打包一个正常情况下会生成动态库或静态库的包.参考文档:https://docs.conan.io/e ...
- 第13节-BLE协议L2CAP层
学习资料:官方手册 Vol 3: Core System Package [Host volume] Part A: Logical Link Control and Adaptation Proto ...
- 201871010133-赵永军《面向对象程序设计（java）》第十周学习总结
201871010133-赵永军<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- java+selenium3学习
http://blog.csdn.net/u011541946/article/details/72898514 http://git.oschina.net/zhengshuheng https:/ ...
- 3.GO-项目结构、包访问权限、闭包和值传递引用传递
3.1.goland中项目结构 (1)在goland中创建标准Go项目 (2)goland配置 创建项目Learn-Go file-settings-go-GOPATH-添加 在项目目录下创建src目 ...
- Newcoder 小白月赛20 H 好点
Newcoder 小白月赛20 H 好点 自我感觉不错然后就拿出来了. 读读题之后我们会发现这是让我们求一堆数,然后这些数一定是递减的. 就像这样我们选的就是框起来的,然后我们可以看出来这一定是一个单 ...