[zhiluotang learning notes]_ Functions in Js

Keywords: PHP

Please pay attention to "zhiluotang learning community", address: http://www.zhiliaotang.com/portal.php
1. The meaning of function
Function is also called method. Simply put, a function is to put multiple lines of code together and give it a name, and then we can call it when the program needs to use it. For example, the changecode () in the verification code below is called when the user clicks switch to regenerate a new verification code for us.
Officially, a function is an event driven or reusable block of code that can be reused when it is called.
2. Function definition syntax

function functionname(){
    Here is the code block to execute
}

When the function is called, the code block inside is executed
3. Function return value syntax
When the function returns the value of an operation result after execution, a return value needs to be defined for the function.
Function return value:

function Myfunction(){
   var a = 9;
   return a;
}

The return value of this function is 5.
Let's continue with a demo:
Randomly generated captcha

css Style

    <style type="text/css">
        div{
            width: 400px;
            height: 500px;
        }
        .ipt{
            width: 150px;
            height: 20px;
}
        .sp{
            width: 120px;
            height: 40px;
            border: 1px solid black;
            color: black;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
        }

    </style>

Inside the body:

<body>
<div>
<input type="text" placeholder="Please enter the verification code in the figure" class="ipt" onkeyup="inpcheck(this)">
<a href="###" onclick="changecode()"><span class="sp" id="change"></span>Change it</a><br>
    <span id="check"></span>
</div>
</body>

js style:

    <script>
window.onload = function(){
     var code;
    changecode();
}
        function changecode(){
            code = "";
            var codeLength = 4;
            var changecode = document.getElementById("change");
            var codechar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','G','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
            for(var i= 0;i<codeLength;i++){
                var codenum = Math.floor(Math.random()*52);
                code +=codechar[codenum]
            }
            if(changecode){
                changecode.innerHTML= code;
            }

        }
        function inpcheck(obj){
            var check = document.getElementById("check");
            var inp = obj.value;
            if(inp.length<0){
                check.innerText="Verification code cannot be empty";
                check.style.color="red";
            }else if(inp.toUpperCase()!=code.toUpperCase()){
                check.innerText="Verification code input error"
                check.style.color="red";
            }else{
                check.innerText="Verification code entered successfully"
                check.style.color="green";
            }
        }

    </script>

Posted by kenwvs on Wed, 01 Jul 2020 07:41:56 -0700

Programmer Group

[zhiluotang learning notes]_ Functions in Js

Hot Keywords