<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用range类型</title>
<link rel="shortcut icon" href="hpu.ico">
<style>
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); }
</style>
<script>
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;
}
</script>
</head>
<body>
<form>
<form>
<fieldset>
<legend>滑动条动态调整颜色</legend>
<div id="slide">
<input type="range" id="txtR" min="0" max="255" value="0" oninput="setColor()">
<input type="range" id="txtG" min="0" max="255" value="0" oninput="setColor()">
<input type="range" id="txtB" min="0" max="255" value="0" oninput="setColor()">
</div>
<div id="preview"></div>
<p id="strclr">rgb(0,0,0)</p>
</fieldset>
</form>
</form>
<br><br>
<!--进度条绑定输出结果示例-->
<progress id="prg" min="0" max="100" value="0"></progress>
<output id="output"></output>%
<script>
var prg1=document.getElementById("prg");
setInterval(function(){
prg1.value+=1;
output.value=prg.value;
},100)
</script>
<br><br>
<!--滑动条绑定输出结果示例-->
<form oninput="out.value=x.value">
<input type="range" id="x" min="0" max="100" value="0">
<output id="out">0</output>
</form>
<!--通过before和target伪类添加图标-->
<p id="hpu">xxxx大学计算机学院文件</p>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
