Jak vložit na stránky jednoduchou kalkulačku

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ů).

panel_tools
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.


Vložit kalkulačku jako widget (miniaplikaci)

 V nabídce nastavení blogu otevřeme položku "Rozvržení". Klikneme na "Přidat miniaplikaci" a zvolíme kartu "HTML/JavaScript". Dále je postup stejný jako v předchozím případě. Vložíme zkopírovaný kód a uložíme. Tak a máme to hotové.

¡Sdílet!

3 komentářů:

Viktor Marko

nazdar ja to neviem ako to mám vložiť skušal som rozloženie, šablone aj v nastavení neviem to najsť pridat miniaplikaciu a to preput na HTML/javascrip ............ porad mi díki ...;)

R2D2

Ta miniaplikace se jmenuje HTML/JavaScript. Takže, přidat miniaplikaci, vybereš ze seznamu výše jmenovanou, zkopíruješ do okna "obsah" kód, uložíš, hotovo.

Anonymní

Vćhybí mi zde desetiná tečka :-( Vašek

Okomentovat

Můžete použít některé značky HTML, jako například <b>, <i>, <a>,  Nápověda

Hledat

 

DC Bublina v síti

Qwimbyho sloupek

Qwimby je nájemný zabiják, ze staré školy, s neomylnou muškou. Svou práci si nebere osobně, a v duchu jeho vlastního hesla: "Jeden výstřel, jedna mrtvola, jedna odměna", kráčí vpřed od jednoho kšeftu ke druhému a ještě stačí prohodit některé ze svých "hlubokých mouder."

Nové články

DC Bublina © 2012 obsah volně šiřitelný s uvedením zdroje | Články: RSS | Pohání: Blogger