20 随机验证码&发表评论

Posted 2022-03-13 znyyy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20 随机验证码&发表评论相关的知识，希望对你有一定的参考价值。

随机验证码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>随机验证码</title>
 6     <style type="text/css">
 7         *
 8             padding:0;
 9             margin:0;
10         
11         .box
12             top:200px;
13             left:200px;
14             position: relative;
15         
16         #box
17             background-color: #b0b0b0;
18             height: 150px;
19             width:150px;
20             text-align: center;
21             color: #ff6700;
22             line-height: 150px;
23             font-size:30px;
24             font-weight: bold;
25         
26     </style>
27 </head>
28 <body>
29     <div class="box">
30         <div id="box"></div>
31         <input type="text" id="inp">
32         <button id="btn">验证</button>
33     </div>
34 </body>
35 <script type="text/javascript">
36     var code = ‘‘;
37     var randomCode = [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‘];
38     function $(id) 
39         return typeof id === ‘string‘ ? document.getElementById(id) : null
40     
41     function random(min,max) 
42         return Math.floor(min+Math.random()*(max-min))
43     
44     function createCode(num) 
45         code = ‘‘;
46         for(var i = 0; i < num; i++)
47             code += randomCode[random(0,randomCode.length)]
48         
49         $(‘box‘).innerHTML = code;
50     
51     window.onload = function () 
52         createCode(4);
53         $(‘btn‘).onclick = function () 
54             var val = $(‘inp‘).value.toUpperCase().trim();
55             if(!val)
56                 console.log(‘请输入验证码！‘);
57             else if(val === code)
58                 window.location.href = ‘http://www.baidu.com‘;
59             else
60                 console.log(‘输入的验证码不正确！‘);
61                 $(‘inp‘).value = ‘‘;
62                 createCode(4);
63             
64         
65     
66 </script>
67 </html>

发表评论

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>发表评论</title>
 6     <style type="text/css">
 7         *
 8             padding: 0;
 9             margin: 0;
10         
11         #box
12             width:800px;
13             border:1px solid #ddd;
14             padding:20px;
15             margin:100px auto;
16             outline: none;
17         
18         #comment
19             width: 80%;
20             font-size: 20px;
21             outline: none;
22         
23         ul
24             list-style:none;
25         
26         ul li
27             border-bottom: 1px dashed #ccc;
28             width: 640px;
29             color: red;
30             line-height: 45px;
31         
32         ul li a
33             float: right;
34             overflow: hidden;
35         
36     </style>
37 </head>
38 <body>
39 <div id="box">
40     <textarea name="" id="comment" cols="80" rows="10" placeholder="评论......"></textarea>
41     <button id="btn">发表</button>
42     <ul id="content">
43         <!--<li>adfadfha <a href="javascript:void(0)">删除</a></li>-->
44     </ul>
45 </div>
46 <script type="text/javascript">
47     function $(id) 
48         return typeof id === ‘string‘ ? document.getElementById(id) : null
49     
50     window.onload = function () 
51         $(‘btn‘).onclick = function () 
52             var content = $(‘comment‘).value.trim();
53             if(content)
54                 var newLi = document.createElement(‘li‘);
55                 newLi.innerHTML = `$content<a href="javascript:void(0)">删除</a></li>`;
56                 $(‘content‘).insertBefore(newLi,$(‘content‘).children[0]);
57                 $(‘comment‘).value = ‘‘;
58             else
59                 alert(‘内容不能为空！‘)
60             
61             var aNodes = document.getElementsByTagName(‘a‘);
62             for(var i = 0; i < aNodes.length; i++)
63                 aNodes[i].onclick = function () 
64                     this.parentNode.remove();
65                 
66             
67         ;
68 
69 
70     ;
71 </script>
72 </body>
73 </html>

以上是关于20 随机验证码&发表评论的主要内容，如果未能解决你的问题，请参考以下文章

Python之路09-随机验证码&发红包

day20 project+查看新闻列表 + 点赞 + 图片验证码 + 评论和多级评论 + 后台管理 + webSocket + kindEditor