[知了堂学习笔记]_Js中的函数

最新推荐文章于 2022-08-30 00:31:22 发布

YX_车车

最新推荐文章于 2022-08-30 00:31:22 发布

阅读量349

点赞数

文章标签： javascript 函数验证码

本文链接：https://blog.csdn.net/yxuan9826/article/details/78752033

版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
1.函数的意义
函数又称方法。简单来说函数就是将多行代码放到一起，并给这多行代码取一个名字，然后当程序需要使用这些代码的时候我们就可以去调用它。比如下面的验证码中的changecode（），当用户点击切换的时候就调用了该函数为我们重新生成了一段新的验证码。
官方的来说，函数是由事件驱动的或者当它被调用时可以重复使用的代码块。
2.函数的定义语法

function functionname(){
    这里是要执行的代码块
}

当调用该函数的时候，会执行里面的代码块
3.函数返回值语法
函数在执行完成后返回一个运算结果的值，则需要给函数定义一个返回值。
函数返回值：

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

该函数的返回值为5。
下面我们用一个demo来继续介绍函数：
随机生成验证码

css样式

    <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>

body里面：

<body>
<div>
<input type="text" placeholder="请输入图中的验证码" class="ipt" onkeyup="inpcheck(this)">
<a href="###" onclick="changecode()"><span class="sp" id="change"></span>换一张</a><br>
    <span id="check"></span>
</div>
</body>

js样式：

    <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="验证码不能为空";
                check.style.color="red";
            }else if(inp.toUpperCase()!=code.toUpperCase()){
                check.innerText="验证码输入错误"
                check.style.color="red";
            }else{
                check.innerText="验证码输入成功"
                check.style.color="green";
            }
        }

    </script>