验证码—基本功能实现02_点击重新获取验证码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_36282409/article/details/87775576
样例:HTML中代码生成:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <style>
        *{
            margin:0;
            padding:0;  
        }
        
        #codeBox{
           width: 100px;
           height:60px;
           border: solid red 1px;
           letter-spacing: 2px;
           line-height: 60px;
           margin: 50px auto;
           text-align:center;
           -webkit-user-select:none;
        }
        
    </style>
</head>
<body>
    
    <div id="codeBox">
        Xd4Y
    </div>
        <script src="js/code.js"></script>
</body>
样例:js中代码生成:
/**
  • @author lyj
    */
    var codeBox=document.getElementById(‘codeBox’);
    //=>queryCode:获取四位验证码。
    function queryCode(){

     var result='',
     areaStr='https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=javascript&oq=javascript&rsv_pq=a777ee1c00660426&rsv_t=cdffxtPRtWpq5Z3F6jhBicUGds57tE';
     //{wd:'javascript',rsv_pq:a777ee1c00660426,rsv_t:cdffxtPRtWpq5Z3F6jhBicUGds57tE}
    for(var i=0;i<4;i++){
    		var ran=Math.round(Math.random()*61);
    		result +=areaStr[ran];
    }
       codeBox.innerHTML=result; 
     }
     	//=>加载页面时需要执行一次这个方法:生成4位验证码。
     queryCode();
     //=>点击盒子重新生成验证码。(此处不加小括号,只是把函数绑定给元			素的点击事件。)
     codeBox.onclick=queryCode;
    

猜你喜欢

转载自blog.csdn.net/weixin_36282409/article/details/87775576