Skinnysite.net

... un modo di esprimersi.

Skip to content

Homa Page di Daniele Franceschini

Semplice prograss bar

Valutazione attuale:

/ 0

Dettagli: Categoria principale: Code Snippets; Pubblicato Sabato, 16 Aprile 2011 13:57; Visite: 281

L'esempio sottostante mostra come creare una piccola progress bar da cui si può partire per implementare funzionalità sempre più complesse.

<html>
<style>
hr{
	height:10px;
	border: 1px solid  green;
}
</style>
	<head>
	<script language ="javascript">
		function setLine(len){
			if (len <= 100){
				if (len > 0){
					document.getElementById("line1").width = len;
					document.getElementById("txtValue").value = len;
				}
			}
		}
		
	</script>
	</head>
	<div style="border:1px solid  blue;width:150px;">
	Semplice progress bar
	<hr id="line1" width="1" align="left" color="red" />
	<input type="button" id="myButton1" value="<" 
	onclick="javascript:setLine(parseInt(document.getElementById('line1').width) - 1)" />
	<input type="button" id="myButton2" value=">" 
	onclick="javascript:setLine(parseInt(document.getElementById('line1').width) + 1)" />
	<input type="text" id="txtValue" value="1" readonly="readonly" style="width:50px;" 
	dir="rtl" />
	<div />
</html>