HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例
HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例
使用range类型
fieldset{ width:280px; height:150px; padding:10px; }
#slide{ width:150px; float:left; margin-bottom:20px; }
#preview{ width:80px;
height:80px;
float:right;
border:1px solid blue;
}
#strclr{ clear:both; text-align:center; font-weight:bold; }
#hpu:before{ content:"5"; font-family:webdings; color:red; }
#hpu:after{ content:url(img/ppt.jpg); }
VAR intR,intG,intB,strColor; function setColor(){ intR=document.getElementById("txtR").value; intG=document.getElementById("txtG").value; intB=document.getElementById("txtB").value; strColor="rgb("+intR+","+intG+","+intB+")"; document.getElementById("strclr").innerHTML=strColor; document.getElementById("PReview").style.backgroundColor=strColor; }
滑动条动态调整颜色
rgb(0,0,0)
%
var prg1=document.getElementById("prg"); setInterval(function(){ prg1.value+=1; output.value=prg.value; } ,100)
0
xxxx大学计算机学院文件
HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例
使用range类型
fieldset{ width:280px; height:150px; padding:10px; }
#slide{ width:150px; float:left; margin-bottom:20px; }
#preview{ width:80px;
height:80px;
float:right;
border:1px solid blue;
}
#strclr{ clear:both; text-align:center; font-weight:bold; }
#hpu:before{ content:"5"; font-family:webdings; color:red; }
#hpu:after{ content:url(img/ppt.jpg); }
var intR,intG,intB,strColor; function setColor(){ intR=document.getElementById("txtR").value; intG=document.getElementById("txtG").value; intB=document.getElementById("txtB").value; strColor="rgb("+intR+","+intG+","+intB+")"; document.getElementById("strclr").innerHTML=strColor; document.getElementById("preview").style.backgroundColor=strColor; }
滑动条动态调整颜色
rgb(0,0,0)
%
var prg1=document.getElementById("prg"); setInterval(function(){ prg1.value+=1; output.value=prg.value; } ,100)
0
xxxx大学计算机学院文件
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例
本文地址: https://pptw.com/jishu/587159.html