1、效果图
2、下载js、css文件
3、html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滑动拼图验证码</title> 6 <link rel="stylesheet" href="jigsaw.css"> 7 <style> 8 .container { 9 width: 310px; 10 margin: 100px auto; 11 } 12 input { 13 display: block; 14 width: 290px; 15 line-height: 40px; 16 margin: 10px 0; 17 padding: 0 10px; 18 outline: none; 19 border:1px solid #c8cccf; 20 border-radius: 4px; 21 color:#6a6f77; 22 } 23 #msg { 24 width: 100%; 25 line-height: 40px; 26 font-size: 14px; 27 text-align: center; 28 } 29 a:link,a:visited,a:hover,a:active { 30 margin-left: 100px; 31 color: #0366D6; 32 } 33 34 </style> 35 </head> 36 <body> 37 <div class="container"> 38 <input value="admin" readonly/> 39 <input type="password" value="1234567890" readonly/> 40 <div id="captcha" style="position: relative"></div> 41 <div id="msg"></div> 42 </div> 43 <script src="jigsaw.js"></script> 44 <script> 45 jigsaw.init(document.getElementById('captcha'), function () { 46 document.getElementById('msg').innerHTML = '登录成功!' 47 }) 48 </script> 49 </body> 50 </html>