脚本宝典收集整理的这篇文章主要介绍了html5教程-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教程,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的html5教程-HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例全部内容,希望文章能够帮你解决html5教程-HTML5进度条绑定输出结果示例及滑动条动态调整颜色示例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。