Před časem jsem potřeboval vložit na webové stránky jednoduchou kalkulačku. Někde na internetu, bohužel nevím kde, jsem našel šikovný kód k vložení na stránky. Nejsem žádný odborník, ale myslím, že je to docela jednoduché a parádní řešení. Komu stačí základní kalkulačka s funkcemi, sčítání, odčítání, násobení a dělení, může být následující postup dobrým řešením.
Protože používám Blogger, popíši postup pro tuto platformu, ale kalkulačka bude jistě fungovat i jinde.
Vložení kalkulačky na blogger.com
Nejprve si zvolíme umístění kalkulačky. Kalkulačku můžeme vložit do článku na blogu, nebo jako widget (miniaplikace). Funguje v obou případech, takže volba je jen na vlastním uvážení.Vložení do článku
Po přihlášení na blog, vytvoříme nový příspěvek. Když máme hotovo, zvolíme místo v článku kde chceme kalkulačku zobrazit. V panelu nástrojů pro editaci příspěvku, přepneme zobrazení na html kód, tak, že klikneme na tlačítko s názvem "HTML" (dvojice tlačítek nahoře vlevo v panelu nástrojů).Tlačítko pro přepnutí zobrazení |
V náhledu kódu přesuneme kurzor na místo zvolené pro zobrazení kalkulačky a vložíme kód uvedený níže.
Příklad HTML kódu:
<form name="calculator">
<table bgcolor="#73B27B" border="4" bordercolor="#FFFFFF" cellpadding="1" cellspacing="2" style="width: 222px;"><tbody>
<tr> <td>
<input length="25" name="ans" size="25" style="background: beige; color: black;" type="text" value="" /></td> </tr>
</tbody></table>
<table bgcolor="#73B27B" border="4" bordercolor="#FFFFFF" cellpadding="2" cellspacing="2" style="width: 222px;"><tbody>
<tr> <td align="center">
<input name="seven" onclick="document.calculator.ans.value+='7'" type="button" value=" 7 " /></td> <td align="center">
<input name="eight" onclick="document.calculator.ans.value+='8'" type="button" value=" 8 " /></td> <td align="center">
<input name="nine" onclick="document.calculator.ans.value+='9'" type="button" value=" 9 " /></td> <td align="center">
<input name="divide" onclick="document.calculator.ans.value+='/'" type="button" value=" / " /></td> </tr>
<tr> <td align="center">
<input name="four" onclick="document.calculator.ans.value+='4'" type="button" value=" 4 " /></td> <td align="center">
<input name="five" onclick="document.calculator.ans.value+='5'" type="button" value=" 5 " /></td> <td align="center">
<input name="six" onclick="document.calculator.ans.value+='6'" type="button" value=" 6 " /></td> <td align="center">
<input name="multiply" onclick="document.calculator.ans.value+='*'" type="button" value=" * " /></td> </tr>
<tr> <td align="center">
<input name="one" onclick="document.calculator.ans.value+='1'" type="button" value=" 1 " /></td> <td align="center">
<input name="two" onclick="document.calculator.ans.value+='2'" type="button" value=" 2 " /></td> <td align="center">
<input name="three" onclick="document.calculator.ans.value+='3'" type="button" value=" 3 " /></td> <td align="center">
<input name="subtract" onclick="document.calculator.ans.value+='-'" type="button" value=" - " /></td> </tr>
<tr> <td align="center">
<input name="clear" onclick="document.calculator.ans.value=''" type="button" value=" C " /></td> <td align="center">
<input name="zero" onclick="document.calculator.ans.value+='0'" type="button" value=" 0 " /></td> <td align="center">
<input name="equal" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)" type="button" value=" = " /></td> <td align="center">
<input name="add" onclick="document.calculator.ans.value+='+'" type="button" value=" + " /></td> </tr>
</tbody></table>
</form>
Uložíme a můžeme zhodnotit výsledek. V článku máme funkční kalkulačku.
Pro základní úpravu vzhledu kalkulačky lze změnit barvy pozadí, textu a orámování, editací položek označených červeně.
Výsledek může vypadat třeba takhle.