November 7
Lavorare con JavaScript in Dreamweaver vi offre la possibilità di effettuare un calcolatore che è possibile aggiungere alla tua pagina web. I visitatori del tuo sito sarà in grado di fare clic sui pulsanti l'immagine calcolatrice come se si trattasse di una vera e propria calcolatrice, e saranno in grado di utilizzare le funzioni di addizione, sottrazione, moltiplicazione e divisione per calcolare i risultati in base alla loro voci. Tutto il lavoro è fatto sulla pagina, quindi non c'è bisogno di costruire o di accedere a un database per il processo di corretto funzionamento.
1 Avviare Dreamweaver.
2 Fai clic su "File" nella parte superiore della finestra, fare clic su "Apri", selezionare il file in cui si desidera inserire la calcolatrice, e quindi fare doppio clic sul file.
3 Fai clic su "Codice" nella parte superiore della finestra, e poi selezionare il percorso nella pagina Web in cui si desidera visualizzare la calcolatrice.
4 Digitare il seguente codice nella pagina Web in cui si desidera visualizzare la calcolatrice.
<Table class = "calcbuttons" cellpadding = "4">
<Tr> <td colspan = 4> <div style = "text-align: center;">
<Class input = "inputform" id = "calcolatrice" type = "text" />
</ Div> </ td> </ tr>
<Tr>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "1" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "2" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "3" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = '/' onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "4" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "5" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "6" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = '*' onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "7" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "8" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "9" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = '-' onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr>
<Td> <input class = "calcbuttons" type = valore "pulsante" = "0" onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = '.' onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = 'C' onclick = "calcbutton (this.value);" /> </ td>
<Td> <input class = "calcbuttons" type = valore "pulsante" = '+' onclick = "calcbutton (this.value);" /> </ td>
</ Tr>
<Tr> <td colspan = 4> <div style = "text-align: center;">
<Class input = "inputform" type = valore "pulsante" = '=' onclick = "calcolare (document.getElementById () valore 'calcolatrice'.);" />
</ Div> </ td> </ tr>
</ Table>
5 Sfoglia la sezione "<head>" della pagina, e quindi inserire il seguente codice prima del "</ 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">
Funzione calcbutton (buttonValue) {
if (buttonValue == 'C') {
document.getElementById('calculator').value = '';
}
else {
document.getElementById('calculator').value += buttonValue;
}
}
funzione di calcolo (equazione) {
var answer = eval(equation);
document.getElementById('calculator').value = answer;
}
</ Script>
6 Fai clic su "File" nella parte superiore della finestra, quindi fare clic su "Salva". È possibile fare clic sul pulsante "Design" nella parte superiore della finestra, e poi cliccare su "Live View" per verificare la funzionalità della calcolatrice in Dreamweaver.