- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 随机验证码
- </title>
- <style type="text/CSS">
- *{ padding:0; margin:0; } .box{ top:200px; left:200px; position: relative;
- } #box{ background-color: #b0b0b0; height: 150px; width:150px; text-align:
- center; color: #ff6700; line-height: 150px; font-size:30px; font-weight:
- bold; }
- </style>
- </head>
- <body>
- <div class="box">
- <div id="box">
- </div>
- <input type="text" id="inp">
- <button id="btn">
- 验证
- </button>
- </div>
- </body>
- <script type="text/javascript">
- var code = '';
- 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'];
- function $(id) {
- return typeof id === 'string' ? document.getElementById(id) : null
- }
- function random(min, max) {
- return Math.floor(min + Math.random() * (max - min))
- }
- function createCode(num) {
- code = '';
- for (var i = 0; i < num; i++) {
- code += randomCode[random(0, randomCode.length)]
- }
- $('box').innerHTML = code;
- }
- Windows.onload = function() {
- createCode(4);
- $('btn').onclick = function() {
- var val = $('inp').value.toUpperCase().trim();
- if (!val) {
- console.log('请输入验证码!');
- } else if (val === code) {
- Windows.location.href = 'http://www.baidu.com';
- } else {
- console.log('输入的验证码不正确!');
- $('inp').value = '';
- createCode(4);
- }
- }
- }
- </script>
- </HTML>
发表评论
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 发表评论
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } #box{ width:800px; border:1px solid #ddd;
- padding:20px; margin:100px auto; outline: none; } #comment{ width: 80%;
- font-size: 20px; outline: none; } ul{ list-style:none; } ul li{ border-bottom:
- 1px dashed #ccc; width: 640px; color: red; line-height: 45px; } ul li a{
- float: right; overflow: hidden; }
- </style>
- </head>
- <body>
- <div id="box">
- <textarea name="" id="comment" cols="80" rows="10" placeholder=" 评论......">
- </textarea>
- <button id="btn">
- 发表
- </button>
- <ul id="content">
- <!--<li>adfadfha <a href="javascript:void(0)"> 删除 </a></li>-->
- </ul>
- </div>
- <script type="text/javascript">
- function $(id) {
- return typeof id === 'string' ? document.getElementById(id) : null
- }
- Windows.onload = function() {
- $('btn').onclick = function() {
- var content = $('comment').value.trim();
- if (content) {
- var newLi = document.createElement('li');
- newLi.innerHTML = `$ {
- content
- } < a href = "javascript:void(0)" > 删除 < /a></li > `;
- $('content').insertBefore(newLi, $('content').children[0]);
- $('comment').value = '';
- } else {
- alert('内容不能为空!')
- }
- var aNodes = document.getElementsByTagName('a');
- for (var i = 0; i < aNodes.length; i++) {
- aNodes[i].onclick = function() {
- this.parentNode.remove();
- }
- }
- };
- };
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3112553.html