javascript原型_使用JavaScript的示例报告卡Web应用程序原型
javascript原型
Hi! At times, beginners always find it hard getting the application of the theory they learn In programming or a particular language.
嗨！ 有時(shí)，初學(xué)者總是很??難在編程或特定語言中應(yīng)用他們學(xué)到的理論。
In this article, we'll see another application of JavaScript. We'll simply use HTML/CSS/JS.
在本文中，我們將看到JavaScript的另一個(gè)應(yīng)用程序。 我們將只使用HTML / CSS / JS。
We'll make use of :
我們將利用：
HTML tables
HTML表格
Basic CSS
基本CSS
JavaScript functions and variable
JavaScript函數(shù)和變量
We'll play around the things mentioned above to get what we desire. So having some idea about them will be needed to understand this article.
我們將圍繞上述問題進(jìn)行嘗試，以獲取我們想要的東西。 因此，需要對(duì)它們有一些了解才能理解本文。
Our project here is solving the problem of calculating the marks using a pen, paper, and calculator.
我們這里的項(xiàng)目正在解決使用筆，紙和計(jì)算器計(jì)算標(biāo)記的問題。
So we are going to create a table where the cells can collect input with specific data types.
因此，我們將創(chuàng)建一個(gè)表格，單元格可以在其中收集具有特定數(shù)據(jù)類型的輸入。
The table will then collect input and calculate the total in a particular cell.
然后，該表將收集輸入并計(jì)算特定單元格中的總數(shù)。
NOTE: You can perform any calculation of your choice. I used this easy calculation for simple understanding.
注意：您可以執(zhí)行選擇的任何計(jì)算。 我使用這種簡單的計(jì)算方法來進(jìn)行簡單的理解。
Also, we need to add an event in the cell where we want to get our results or output.
另外，我們需要在要獲取結(jié)果或輸出的單元格中添加一個(gè)事件。
So in this project, I used the onkeypress event which executes a function to get the final output.
因此，在此項(xiàng)目中，我使用了onkeypress事件，該事件執(zhí)行一個(gè)函數(shù)以獲取最終輸出。
The input data is stored in a variable and used.
輸入數(shù)據(jù)存儲(chǔ)在變量中并使用。
HTML file:
HTML檔案：
Open a text editor and type the code below. Save the file with the name academia.html.
打開文本編輯器，然后輸入以下代碼。 保存文件名為academia.html 。
NB: You can still use your desired CSS style!
注意：您仍然可以使用所需CSS樣式！
<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>In this project, I used my own CSS styles. You can feel free to use any you desire.
在這個(gè)項(xiàng)目中，我使用了自己CSS樣式。 您可以隨意使用任何您想要的東西。
Open the html file and test out your web application.
打開html文件并測試您的Web應(yīng)用程序。
JavaScript file:
JavaScript文件：
Save the code below as academia.js
將下面的代碼另存為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; }Some points to note:
需要注意的幾點(diǎn)：
There's a print function added to print out the table when done.
完成后添加了打印功能以打印出表格。
A rotating GIF has been added.
旋轉(zhuǎn)GIF已添加。
If you look at the JavaScript code, you'll notice that each row has it's function. This makes it difficult and stressful to create a table of about 50 to 1000 students.
如果查看JavaScript代碼，則會(huì)注意到每一行都有它的功能。 這使得創(chuàng)建約50至1000個(gè)學(xué)生的表變得困難且壓力很大。
Also, you realize that you must perform the key press event to get the calculated output for that row.
此外，您意識(shí)到必須執(zhí)行按鍵事件才能獲得該行的計(jì)算輸出。
Coding challenge:
編碼挑戰(zhàn)：
To solve this problem, customize your own application to create several tables without writing different functions for each row.
要解決此問題，請自定義您自己的應(yīng)用程序以創(chuàng)建多個(gè)表，而無需為每一行編寫不同的函數(shù)。
Add a button at the bottom of the table to perform the calculation for the entire table and print them in each cell.
在表格底部添加一個(gè)按鈕，以執(zhí)行整個(gè)表格的計(jì)算并將其打印在每個(gè)單元格中。
Successful attempt will get a little gift from IncludeHelp team. Send your attempt to [email?protected]
成功的嘗試將從IncludeHelp團(tuán)隊(duì)那里得到一些禮物。 將您的嘗試發(fā)送到[受電子郵件保護(hù)]
Thanks for coding with me. Your comments are most welcome.
感謝您與我一起編碼。 非常歡迎您發(fā)表評(píng)論。
翻譯自: https://www.includehelp.com/code-snippets/sample-report-card-web-application-prototype-using-javascript.aspx
javascript原型
總結(jié)
以上是生活随笔為你收集整理的javascript原型_使用JavaScript的示例报告卡Web应用程序原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Python3中将字符串转换为字节的最
- 下一篇： to_number用法示例_Number