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>

 

posted @ 2019-07-03 23:40  毛斯钢  阅读(113)  评论(0)  编辑  收藏  举报