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:
Let niet op de namen.
P.S. Ik doe het op de iPad met de app Nitro HTML
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>
P.S. Ik doe het op de iPad met de app Nitro HTML
Laatst bewerkt: