tarjeta de informe de ejemplo prototipo de aplicaciones web utilizando JavaScript

Aquí, vamos a poner en práctica un proyecto de ejemplo / uso de JavaScript class informe de muestra prototipo de aplicación de tarjeta web .

Hola! A veces, los principiantes siempre les resulta difícil conseguir la aplicación de la teoría que aprenden en la programación o un idioma determinado.

En este artículo, vamos a ver otra aplicación de JavaScript. Vamos a simplemente usar HTML / CSS / JS.

Haremos uso de:

  • HTML tablas
  • básico CSS
  • JavaScript funciones y variables

Jugaremos alrededor de las cosas mencionadas anteriormente para conseguir lo que deseamos. Así que tener una idea acerca de ellos serán necesarios para entender este artículo.

Nuestro proyecto aquí es resolver el problema de calcular las marcas con un lápiz, papel y calculadora.

Así que vamos a crear una tabla en la que las células se pueden recoger de entrada con tipos de datos específicos.

Sample report card web application prototype using JavaScript - 4

La tabla de entrada entonces recoger y calcular el total en una célula particular.

NOTA: Se puede realizar cualquier cálculo de su elección. He utilizado este fácil comprensión simple cálculo for.

Además, tenemos que añadir un evento en la celda donde queremos conseguir nuestros resultados o salida.

Así que en este proyecto, he utilizado el evento onkeypress que ejecuta una función para obtener la salida class.

Los datos de entrada se almacena en una variable y se utiliza.

archivo HTML:

Abra un editor de texto y escriba el código de abajo. Guarde el archivo con el nombre academia.html .

NB: Puede seguir utilizando su estilo CSS deseada!

<html>
<head>
<style>
body {
background-color: white;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: center;
}
table {
width: 40%;
background-color: #f1f1c1;
}
table {
text-align: center;
}
</style>
<script type="text/javascript" src="academia js.js">
</script>
</head>
<body>
<center>
<a href="https://www.go237.com"><img src="images/logo.png"></a>
</center>
<br/>
<br/>
<br/>
<br/>
<center>
<table>
<caption><b><font size = 1 >Total = (Mark * Coef)</caption></b></font>
<tr>
<th>STUDENT</th>
<th>MARKS</th>
<th>COEF</th>
<th>TOTAL</th>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s' required />
</td>
<td>
<input type="number" placeholder="Score" id='m' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c' required />
</td>
<td>
<input type="key" onkeypress='calculate();' placeholder="Total" id='t' />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s2' required />
</td>
<td>
<input type="number" placeholder="Score" id='m2' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c2' required />
</td>
<td>
<input type="key" onkeypress='calculate2();' placeholder="Total" id='t2' />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s3' required />
</td>
<td>
<input type="number" placeholder="Score" id='m3' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c3' required />
</td>
<td>
<input type="key" onkeypress='calculate3();' placeholder="Total" id='t3' />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s4' required />
</td>
<td>
<input type="number" placeholder="Score" id='m4' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c4' required />
</td>
<td>
<input type="key" onkeypress='calculate4();' placeholder="Total" id='t4' />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s5' required />
</td>
<td>
<input type="number" placeholder="Score" id='m5' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c5' required />
</td>
<td>
<input type="key" onkeypress='calculate5();' placeholder="Total" id='t5' />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Student" id='s6' required />
</td>
<td>
<input type="number" placeholder="Score" id='m6' required />
</td>
<td>
<input type="number" placeholder="Coef" id='c6' required />
</td>
<td>
<input type="key" onkeypress='calculate6();' placeholder="Total" id='t6' />
</td>
</tr>
</table>
<br/>
<br/>
<img id='pic' src="1.gif" width: '30%'>
<br/>
<br/>
<a href='javascript:Print()'> Print! </a>
<br/>
<br/>
<b><font size = 1 >Tip: press enter at the level of total cell (or total input) to get results.</b></font>
<br/><b><font size = 1 >- Few student fields for prove implementation.</b></font>
<br/><b><font size = 1 >- No full page loading or response needed to get results.</b></font>
<br/><b><font size = 1 >NB: Do not refresh page during or after form filling.</b></font>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="background-color:black; color:white; padding:1px;">
UPGRADE COMING SOON!
</div>
</center>
</body>
</html>

En este proyecto, utilicé mis propios estilos CSS. Usted puede sentirse libre de utilizar cualquier que desee.

abrir el archivo HTML y poner a prueba su aplicación web.

archivo JavaScript:

Guardar el código de abajo como academia.js

function Print() {
window.print();
}
function calculate() {
var j = document.getElementById('s').value;
var e = document.getElementById('m').value;
var s = document.getElementById('c').value;
var u = document.getElementById('t').value;
var g = e * s;
document.getElementById('t').value = g;
document.getElementById('s').value = j;
}
function calculate2() {
var j2 = document.getElementById('s2').value;
var e2 = document.getElementById('m2').value;
var s2 = document.getElementById('c2').value;
var u2 = document.getElementById('t2').value;
var g2 = e2 * s2;
document.getElementById('t2').value = g2;
document.getElementById('s2').value = j2;
}
function calculate3() {
var j3 = document.getElementById('s3').value;
var e3 = document.getElementById('m3').value;
var s3 = document.getElementById('c3').value;
var u3 = document.getElementById('t3').value;
var g3 = e3 * s3;
document.getElementById('t3').value = g3;
document.getElementById('s3').value = j3;
}
function calculate4() {
var j4 = document.getElementById('s4').value;
var e4 = document.getElementById('m4').value;
var s4 = document.getElementById('c4').value;
var u4 = document.getElementById('t4').value;
var g4 = e4 * s4;
document.getElementById('t4').value = g4;
document.getElementById('s4').value = j4;
}
function calculate5() {
var j5 = document.getElementById('s5').value;
var e5 = document.getElementById('m5').value;
var s5 = document.getElementById('c5').value;
var u5 = document.getElementById('t5').value;
var g5 = e5 * s5;
document.getElementById('t5').value = g5;
document.getElementById('s5').value = j5;
}
function calculate6() {
var j6 = document.getElementById('s6').value;
var e6 = document.getElementById('m6').value;
var s6 = document.getElementById('c6').value;
var u6 = document.getElementById('t6').value;
var g6 = e6 * s6;
document.getElementById('t6').value = g6;
document.getElementById('s6').value = j6;
}

Sample report card web application prototype using JavaScript - 5

Algunos puntos a destacar:

  • Hay una función de impresión añadido para imprimir la tabla cuando termine.
  • A GIF giratorio se ha añadido.
  • Si nos fijamos en el código JavaScript, usted notará que cada fila tiene su función. Esto hace que sea difícil y estresante para crear una tabla de aproximadamente 50 a 1000 estudiantes.
  • Además, se da cuenta de que debe realizar el evento de pulsación de tecla para obtener el for salida calculada esa fila.

Codificación reto:

  • Para resolver este problema, modifique su propia aplicación para crear varias tablas sin tener que escribir diferentes funciones final cada fila.
  • Añadir un botón en la parte inferior de la tabla para realizar el cálculo class toda la tabla e imprimirlos en cada celda.

intento con éxito recibirán un pequeño regalo del equipo IncludeHelp. Envíe su intento de [email & # 160; for]

Gracias for de codificación conmigo. Tus comentarios son mas que bienvenidos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *