1、效果图
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>
over！over！over！