Making 404 pages
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login and registration page design</title> <style> /*universal selector */ *{ margin: 0; padding: 0; } .box{ font-family: "Microsoft YaHei UI"; font-size: 80px; color: #f1ebe5; /*Font shadow*/ text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73); /*Set font bold*/ font-weight: bold; text-align: center; padding: 20px 100px; /*Set color gradient*/ background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%); } h1{ border-bottom: 1px solid #fff; } h2{ font-size:20px ; } input{ background-color: #20a7ff; border-radius: 10px; border:0; height: 30px; width: 80px; padding: 5px; color: white; } </style> </head> <body> <div class="box"> <h1>404</h1> <h2>I'm sorry...The page you are looking for no longer exists</h2> <input type="button" value="Back to home page"/> <input type="button" value="Contact management"/> </div> </body> </html>
Note: linear gradient (direction, color-stop1, color-stop2,...): color gradient function
Calculate debit and credit expenditure amount
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Automatically calculate debit and credit expense amount</title> <style> </style> </head> <body bgcolor="white"> <!--Form name--> <form name="loandata"> <table> <!--The first line has three columns of text--> <tr><td colspan="3"><b>Enter loan information:</b></td> </tr> <tr> <td>(1)</td> <td>Total loans:</td> <!--onchange Events occur when the content of the domain changes, and can also be used for events triggered after a radio or check box changes--> <td><input type="text" name="principal" size="12" onchange="calculate()"/></td> </tr> <tr> <td>(2)</td> <td>Annual interest rate(%):</td> <td><input type="text" name="interest" size="12" onchange="calculate()"/></td> </tr> <tr> <td>(3)</td> <td>Loan period(year):</td> <td><input type="text" name="years" size="12" onchange="calculate()"/></td> </tr> <tr><td colspan="3"><input type="button" value="Calculation" onclick="calculate()"/></td></tr> <tr><td colspan="3"><b>Output repayment information:</b></td> </tr> <tr> <td>(4)</td> <td>Monthly repayment amount:</td> <td><input type="text" name="payment" size="12"/></td> </tr> <tr> <td>(5)</td> <td>Total repayment amount:</td> <td><input type="text" name="total" size="12"/></td> </tr> <tr> <td>(6)</td> <td>Total interest on repayment:</td> <td><input type="text" name="totalinterest" size="12"/></td> </tr> </table> </form> </body> <script> function calculate() { //Total loans //Convert annual interest rate from percentage to decimal to monthly interest rate //Repayment months //Get the value of the text box var principal=document.loandata.principal.value; var interest=document.loandata.interest.value/100/12; var payments=document.loandata.years.value*12; //Calculate monthly payment var x=Math.pow(1+interest,payments); var monthly=(principal*x*interest)/(x-1); //Check whether the result is an infinite number if(!isNaN(monthly)&&(monthly!=Number.POSITIVE_INFINITY)&&(monthly!=Number.NEGATIVE_INFINITY)){ document.loandata.payment.value=round(monthly); document.loandata.total.value=round(monthly*payments); document.loandata.totalinterest.value=round(monthly*payments)-principal; } else { document.loandata.payment.value=""; document.loandata.total.value=""; document.loandata.totalinterest.value=""; } } function round(x) { return Math.round(x*100)/100; } </script> </html>
Notes:
- Gets or passes a value to a text box by its name
- Methods to get the value of the input text box:. Value, document.getElementById("idName").value, $("#idName").val(), $("input [id ='idname ']). Val(), $(" #idName").attr("value "), $(" input [id ='idname']). Attr ("value")
- Math.pow(X,Y) function: returns the value of the Y power of X, NaN if the result is an imaginary or negative number, or number.posive-infinity or number.negative-infinity if the result is too large
- isNaN(): check whether the parameter is a non numeric value and the return value is of boolean type
- Math.round(): round the parameter to the nearest integer
