Balkje JavaScript en misschien CSS

Status
Niet open voor verdere reacties.

gast0232

Nieuwe gebruiker
Lid geworden
6 mrt 2015
Berichten
4
Hallo allemaal,

Ik ben een website aan het maken waarbij je kunt kijken hoe ver je bent met sparen voor bepaalde computersets. Het laat ook het percentage zien. Dat wil ik ook graag in een code hebben. Ik heb al een calculator: http://www.javascriptkit.com/script/script2/percentage.shtml
Hier is de code:
HTML:
<!DOCTYPE html>
<html>
	<head>
		<title>Set HPL1|Thijs</title>
	</head>
	<body>
		<form name="form2">
			<input value="1332.92" name="d">a
		</form>
		<style>
.top-background { position: absolute; top: 0px; width: 100%; height: 40px; background: #58585a; }

footer { height: 100px; width: 100% background: #88ba2a;  }

.container { width: 960px; margin: 0px auto; }
		</style>
		<div class="top-background"></div>
 			<footer>
   				 <div class="container">
   				 </div>
			</footer>
		</div>
		<h6 style="courier">Hoe ver ben je:</h6>
		<script language="JavaScript">
<!--
//Script by Tom Richardson Jr.
//If you have any questions, e-mail me at gooftroop@geocities.com
//or visit mt web site at http://home.rmci.net/gooftroop
//For this script and more, visit http://javascriptkit.com


function perc1() {
 a = document.form1.a.value/100;
 b = a*document.form2.d.value;
 document.form1.total1.value = b
 }
function perc2() {
 a = document.form1.c.value;
 b = document.form2.d.value;
 c = a/b;
 d = c*100;
 document.form1.total2.value = d
 }
//-->
		</script>
		<noscript>
			Misschien had je het wel verwacht, maar hiervoor heb je JavaScript nodig. Daarom vragen wij je 			vriendelijk om JavaScript aan te zetten.
		</noscript>
		<form name="form1" method="post">
			<table cellspacing="1" cellpadding="1" border="1">
  				<tbody>
  					<tr>
   						 <td align="middle" colspan="3"><b><h1 style="color:red">Set HPL1</h1></b></td>
  					</tr>
					<tr>
   						 <td>Hoeveel euro is dit aantal procent? <input size="5" name="a">% Van: 
							<input type="image" value="€1332.92" name="b">
						</td>
   					 <td>Namelijk €<input maxlength="40" name="total1"></td>
   					 <td><input onclick="perc1()" type="button" value="Bereken"></td>
  					</tr>
					<tr>
    					<td>Voer hier het bedrag in dat je hebt: €<input name="c"> Van de: 
							<input name="d" value="€1332.92" type="image"> 
						</td>
   						 <td>Voortgang: <input name="total2">%</td>
   						 <td><input onclick="perc2()" type="button" value="Bereken"></td>
  					</tr>
					<tr>
   						 <td align="middle" colspan="3"><input type="reset" value="Reset"></td>
					</tr>
				</tbody>
			</table>
		</form>
		<p style="color:orange">
		Computerset HPL1 is een set met een destkop van HP, een monitor van Philips en randapparatuur van 		Logitech. Daar komt de naam vandaan.<br> De laagste totaalprijs van het moment waarop deze website werd 		gemaakt, is €1332,92.<br> Hieronder zie je de producten die bij de set horen, hierboven kun je uitrekenen 		hoe ver je bent.
		</p>
		<div class="saver">
			<br><br><br><br><br><br><br><br><br><br><br><br>
		</div>
		<style type="text/css">
* {
  margin:0;
  padding:0;
  word-spacing:-2px;
}
  

.message {
background:orange;
color:#FFF;
position: absolute;
top: -600px;
left: 0;
width: 100%;
height: 600px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}


#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Items" 
}

.saver {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .saver {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

		</style>
		<input type="checkbox" name="toggle" id="toggle" />
		<label for="toggle"></label>
		<div class="message" style="font-family:courier">
			<h3 id="product1"><b>1.HP Envy 700-409nb</b></h3>
				<img src="https://www.topproduct.nl/img/4426335/cc7f5c-1024-768-max-max/hp-700-409nb-k2c49ea.jpg">
				<p>
					Intel Core i7-4790, 16GB RAM, 1TB, 128 SSD, NVIDIA GeForce GTX 745, WiFi, Mini Tower, Windows 					8.1
				</p>
				<a href="http://tweakers.net/pricewatch/426486/hp-700-409nb.html" style="color:black">Tweakers
				</a>
				<a href="#product2">Volgende</a><br><br><br><br><br><br><br><br><br><br><br>
			<h3 id="product2"><b>2.Philips V-line 223V5LSB - 21,5"</b></h3>
				<img src="http://www.paradigit.nl/components/webhandlers/pimpicture.ashx?										productnumber=20213088&catalogcode=PR&maximumwidth=1000&maximumheight=750&picturetypecode=highresolution" 				width="50%" alt="De afbeelding laadt niet">
				<p>2x<br><br>1920x1080, 5ms, 10.000.000:1, 200cd/m², VGA / DVI</p>
				<a href="http://tweakers.net/pricewatch/355191/philips-223v5lsb-zwart.html" 				style="color:black">Tweakers</a>
				<a href="#product1">Vorige</a> <a href="#product3">Volgende</a><br><br><br><br>
			<h3 id="product3"><b>3.Logitech Wireless Combo MK330 - Combo</b></h3>
				<img src="http://www.logitech.com/assets/46440/logitech-wireless-combo-mk330-gallery-2-emea.png">
				<p>Draadloos</p>
				<a href="http://tweakers.net/pricewatch/319633/logitech-wireless-combo-mk330-qwerty/specificaties/" 				style="color:black">Tweakers</a>
				<a href="#product2">Vorige</a> <a href="#product4">Volgende<a>
				<br><br><br><br><br><br><br><br><br><br><br><br>
			<h3 id="product4"><b>4.Logitech HD Webcam C615</b></h3>
				<img src="http://ic.tweakimg.net/ext/i/1314268899.png">
				<p>8MP, 1080p.</p>
				<a href="http://tweakers.net/pricewatch/288697/logitech-hd-webcam-c615.html" 				style="color:black">Tweakers</a>
				<a href="#product3">Vorige</a> <a href="#product5">Volgende</a><br><br><br><br>
			<h3 id="product5"><b>5.Logitech Speaker System Z323</b></h3>
				<img src="http://www.logitech.com/assets/15620/15620.png" alt="Logitech Speaker System">
				<p>3.5mm jack, 30 Watt, 2.1.</p>
				<a href="http://tweakers.net/pricewatch/243528/logitech-z323/specificaties/" 				style="color:black">Tweakers</a>
				<a href="#product4">Vorige</a>
		</div>
		<!--Copyright BIT Studio's 2015-->
	</body>
</html>
Let niet op de namen.
P.S. Ik doe het op de iPad met de app Nitro HTML
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan