随机验证码
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>