为什么验证码需要点击才出现
为什么验证码需要点击才出现？请各位帮帮忙！！
*{margin:0 auto;padding:0;}
a,li,input{
text-decoration: none;
list-style: none;
}
html,body{
height: 100%;
}
/* 头部 */
.header{
height: 80px;
width: 100%;
}
.head{
width: 70%;
height: 80px;
}
.logo{
float: left;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 80px;
line-height: 80px;
}
.sign{
float: right;
height: 80px;
line-height: 80px;
font-size: 14px;
}
.sign i{
font-style: normal;
color: #aaa;
}
.sign a{
color: #fff;
background: slategrey;
padding:2px 10px ;
margin-left: 20px;
border-radius: 3px;
}
/* 内容 */
.content{
width: 100%;
height: 600px;
position: relative;
}
.bkgd{
position: absolute;
width: 100%;
height: 600px;
}
.bkgd img{
height: 100%;
width: 100%;
}
.login{
height: 400px;
width: 400px;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%);
border:1px solid #ddd;
box-sizing: border-box;
background: rgba(245, 243, 243,0.5);
}
.login ul{
width: 100%;
/* background: #f1f1f1; */
}
.login ul li{
height: 50px;
font-size: 24px;
font-family: 'Times New Roman', Times, serif;
line-height: 50px
}
.login ul li span{
width: 50%;
text-align: center;
}
.login ul li span:nth-child(1){
float: left;
}
.login ul li span:nth-child(2){
float: right;
}
.login ul li span:hover{
background: #fff;
}
.login form{
width: 350px;
margin-top: 40px;
}
.login form>p{
position: relative;
line-height: 40px;
padding-bottom: 30px;
}
.login form input{
height: 36px;
outline: none;
}
.phone{
padding:0 10px 0 40px;
width: 300px;
}
.input-code{
padding:0 10px 0 40px;
margin-right: 14px;
display: inline-block;
}
.code{
font-family:Arial;
font-style:italic;
font-size: 20px;
width: 108px;
display: inline-block;
line-height: 40px;
height: 40px;
cursor: pointer;
text-align: center;
background: #a5232e;
color:blue;
}
.MobileCode{
padding:0 10px 0 40px;
margin-right: 14px;
}
.btn-sent{
width: 108px;
display: inline-block;
line-height: 40px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.btn-red{
color: #fff;
background: #a5232e;
border-radius: 3px;
text-align: center;
}
.submit{
font-size: 18px;
border: none;
cursor: pointer;
width: 350px;
}
/* 尾部 */
.footer{
width: 100%;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/login.css">
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_2987334_h3wm5joazd.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="head">
<div class="logo">
<img src="../images/logo.PNG">
</div>
<div class="sign">
<i>没有账号</i>
<a href="">注册</a>
</div>
</div>
</div>
<!-- 内容 -->
<div class="content">
<div class="bkgd">
<img src="../images/login-bkgd.jpg" alt="">
</div>
<div class="login">
<ul>
<li>
<span>短信登录</span>
<span>账号登录</span>
</li>
</ul>
<form action="" id="form1" runat="server">
<p>
<!-- <label for="" class="icon-shouji"></label> -->
<input type="text" placeholder="请输入手机号" maxlength="11" class="phone">
</p>
<p>
<label for="" class="icon-"></label>
<input type="text" placeholder="请输入验证码" class="input-code">
<span class="code" id="checkCode" onclick="createCode()" ></span>
</p>
<p>
<label for="" class="icon-"></label>
<input type="text" placeholder="请输入手机验证码" class="MobileCode">
<span class="btn-sent btn-red">发送验证码</span>
</p>
<a href="#">
<input type="submit" value="登录" class="submit btn-red">
</a>
</form>
</div>
</div>
<!-- 尾部 -->
<div class="footer">
</div>
<script type="text/javascript">
var code; //定义一个变量，用来保存验证码
//生成验证码
function createCode() {
code = "";
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById("checkCode");
var codeChars = 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', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
for(var i = 0; i < codeLength; i++) {
var charNum = Math.floor(Math.random() * codeChars.length);
code += codeChars[charNum];
}
if(checkCode) {
checkCode.innerHTML = code;
}
}
//校验验证码
function validateCode() {
var inputCode=document.getElementById("inputCode").value;
console.log(inputCode);
if(inputCode.length <= 0) {
alert("请输入验证码！");
}
//toUpperCase() 方法用于把字符串转换为大写
//toLowerCase（）方法用于把字符串转换为小写
else if(inputCode.toUpperCase() != code.toUpperCase()) {
alert("验证码输入有误！");
createCode();
}
else {
alert("验证码正确！");
}
}
</script>
</body>
</html>
<span class="code" id="checkCode" onclick="createCode()" ></span>
你这不是写了onclick了吗
你试试
<body onload="createCode()">
你在 页面加载的时候调用一下 createCode() 方法，函数不执行肯定是没有值得
你是写的是点击事件，你把你的createCode()函数在开始进来的时候执行一下就出来了