HTML5中實現進度條繫結輸出結果以及滑動條動態調整顏色案例

貓哥的魚庫發表於2017-12-09
HTML

這裡寫圖片描述

<!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>

相關文章