版权声明:本文为博主原创文章,未经博主允许不得转载。 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;