Esse foi um exercício bastante interessante que tive semana passada na faculdade durante a aula de Linguagem de Script do professor Carlos Sicsu. Nesse aplicativo que faremos será utilizado as tecnologias HTML, DOM e JAVASCRIPT.
O enunciado do exercício era o seguinte:
Construir uma página que contenha uma tabela chamada “produto-preco”. A cada selecao de um produto, o preco total de compra deve ser visualizado ao final da tabela. O preço poderá conter casas decimais.
Criando função calc_value_of_selected_products() em JavaScript que calculará o preço total dos produtos:
<script language="javascript"> function calc_price_of_selected_products() { // Obtendo formulário que contém os checkboxes com o valor dos produtos var products = document.getElementById("product") // Preço será do tipo float por causa dos produtos que podem ter // centavos em seu valor var total_price = 0.0 // Verificando quais checkboxes foram selecionados e somando seu valor; for(i = 0; i < products.length; i++) { if (products[i].checked == true) { total_price = total_price + parseFloat(products[i].value) } } // Atualizando div que contém o preço total dos produtos document.getElementById("total").innerHTML = "Total: R$ " + total_price.toFixed(2) } </script>
Para que o valor em centavos fique com 2 casas decimais é necessário usar a função toFixed(). Exemplo de seu uso:
parseFloat("10.2").toFixed(2) // 10.20 parseFloat("100").toFixed(2) // 100.00
O preço de cada produto ficará dentro do value em cada checkbox. O checkbox deverá chamar a função calc_price_of_selected_product() que criamos toda vez que for clicado nele.
<input type="checkbox" value="135.00" onclick="calc_price_of_selected_products()">
A Construindo a estrutura da tabela em HTML com alguns produtos e seus respectivos preços:
<form id="product"> <table border="1"> <tr> <td></td> <td>Produtos</td> <td>R$</td> </tr> <tr> <td><input type="checkbox" value="135.99" onclick="calc_price_of_selected_products()"></td> <td>Oculos</td> <td>135.99</td> </tr> <tr> <td><input type="checkbox" value="53.20" onclick="calc_price_of_selected_products()"></td> <td>Sunga</td> <td>53.20</td> </tr> <tr> <td><input type="checkbox" value="97.30" onclick="calc_price_of_selected_products()"></td> <td>Biquini</td> <td>97.30</td> </tr> </table> </form>
A soma de todos os valores selecionados deverá ser exibido pela div total. Essa div deverá ser inserida após o formulário.
<div id="total">Total: R$ 0.00</div>
O funcionamento desse script pode ser visto no endereço abaixo:
http://www.noelrocha.com/blog/examples/tabela_produtos_preco.html
Depois da uma olhada no site
http://www.codigopronto.com.br
Qualquer um pode compartilhar códigos e o melhor, seus códigos ficam organizados dessa forma você pode fazer o backup deles.
Comments RSS TrackBack Identifier URI
Leave a comment
1 Comment(s)