Hvordan lage en kalkulator med Dreamweaver
Arbeide med Javascript i Dreamweaver gir deg muligheten til å lage en kalkulator som du kan legge til din nettside. Besøkende til nettstedet vil være i stand til å klikke på knappene på kalkulatoren bildet som om det var en ekte kalkulator, og de vil være i stand til å bruke addisjon, subtraksjon, multiplikasjon og divisjon funksjoner for å beregne resultater basert på sine oppføringer. Alt arbeidet er gjort på siden, så du trenger ikke å bygge eller få tilgang til en database for at prosessen skal fungere riktig.
Bruksanvisning
1 Start Dreamweaver.
2 Klikk på "File" øverst i vinduet, klikk "Åpne", bla deg frem til filen du vil sette inn kalkulatoren, og deretter dobbeltklikke på filen.
3 Klikk "Code" øverst i vinduet, og deretter bla til plasseringen på websiden hvor du ønsker å vise kalkulatoren.
4 Skriv inn følgende kode i websiden der du vil kalkulatoren skal vises.
<Table class = "calcbuttons" cellpadding = "4">
<Tr> <td colspan = 4> <div style = "text-align: center;">
<Input class = "inputform" id = "kalkulator" type = "text" />
</ Div> </ td> </ tr>
<Tr>
<Td> <input class = "calcbuttons" type = "button" value = "1" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "2" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "3" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "/" onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = "button" value = "4" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "5" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "6" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "*" onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = "button" value = "7" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "8" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "9" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "-" onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = "button" value = "0" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = '.' onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "C" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = "button" value = "+" onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr> <td colspan = 4> <div style = "text-align: center;">
<Input class = "inputform" type = "button" value = '=' onclick = "beregn (document.getElementById ( 'kalkulator') verdi.);" />
</ Div> </ td> </ tr>
</ Table>
5 Bla til "<head>" delen av siden din, og deretter sette inn følgende kode før "</ head>" tag.
<Style type = "text / css">
table.calcbuttons {
background-color: #cccccc;
border: 1px solid # 000000;
}
input.calcbuttons {
margin: 3px;
width: 90%;
}
</ Style>
<Script type = "text / javascript">
funksjon calcbutton (buttonValue) {
if (buttonValue == 'C') {
document.getElementById('calculator').value = '';
}
else {
document.getElementById('calculator').value += buttonValue;
}
}
funksjon beregne (ligning) {
var answer = eval(equation);
document.getElementById('calculator').value = answer;
}
</ Script>
6 Klikk på "File" øverst i vinduet, og klikk deretter på "Lagre". Du kan klikke på "Design" knappen øverst i vinduet, og klikk deretter på "Live View" for å teste funksjonaliteten til din kalkulator i Dreamweaver.
Hint
- Du kan endre utseendet på kalkulatoren ved å justere CSS-verdier som du legger til "<head>" delen av siden din. For eksempel kan du endre fargen på kalkulatoren ved å justere "background-color: #cccccc;" eiendom.