A case study of Web front end

Making 404 pages

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Login and registration page design</title>
        /*universal selector */
            margin: 0;
            padding: 0;
            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%);
            border-bottom: 1px solid #fff;
            font-size:20px ;
            background-color: #20a7ff;
            border-radius: 10px;
            height: 30px;
            width: 80px;
            padding: 5px;
            color: white;
<div class="box">
    <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"/>

Note: linear gradient (direction, color-stop1, color-stop2,...): color gradient function

Calculate debit and credit expenditure amount

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Automatically calculate debit and credit expense amount</title>

<body bgcolor="white">
    <!--Form name-->
    <form name="loandata">
            <!--The first line has three columns of text-->
            <tr><td colspan="3"><b>Enter loan information:</b></td> </tr>
                <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>

                <td>Annual interest rate(%):</td>
                <td><input type="text" name="interest" size="12" onchange="calculate()"/></td>

                <td>Loan period(year):</td>
                <td><input type="text" name="years" size="12" onchange="calculate()"/></td>

            <tr><td colspan="3"><input type="button" value="Calculation" onclick="calculate()"/></td></tr>

            <tr><td colspan="3"><b>Output repayment information:</b></td> </tr>

                <td>Monthly repayment amount:</td>
                <td><input type="text" name="payment" size="12"/></td>
                <td>Total repayment amount:</td>
                <td><input type="text" name="total" size="12"/></td>
                <td>Total interest on repayment:</td>
                <td><input type="text" name="totalinterest" size="12"/></td>
    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
        else {
    function round(x) {
        return Math.round(x*100)/100;


  1. Gets or passes a value to a text box by its name
  2. 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")
  3. 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
  4. isNaN(): check whether the parameter is a non numeric value and the return value is of boolean type
  5. Math.round(): round the parameter to the nearest integer
Published 11 original articles, won praise 1, visited 307
Private letter follow

Posted by Velausanakha on Sat, 01 Feb 2020 07:22:51 -0800