htmledit_views">
1、用js实现验证码的获取和验证
html" title=javascript>javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>body {margin: 0;}.v_code {width: 300px;height: 200px;border: 1px solid red;margin: 100px auto;}.code {/*设置验证码*/font-style: italic;/*设置字体样式为斜体*/background-color: #f5f5f5;/*背景颜色*/color: blue;/*文字颜色*/font-size: 30px;letter-spacing: 3px;/*字符间距*/font-weight: bold;/* float:left; */cursor: pointer;/*手指样式*/padding: 0 5px;text-align: center;}a {text-decoration: none;font-size: 12px;color: #288bc4;cursor: pointer;}a:hover {text-decoration: underline;}#inputCode {/*设置文本框的宽高*/width: 100px;height: 30px;}.v_code>input {/*文本框设置*/width: 60px;height: 36px;margin-top: 10px;}</style>
</head><body><div class="v_code"><div class="code_show"><span class="code" id="checkCode"></span><!--通过js随机动态改变的--><a id="linkbt">看不清换一张</a></div><div class="input_code"><label for="inputCode">验证码：</label><input type="text" id="inputCode" /></div><input id="Button1" type="button" value="确定" /></div><script>//1.生成验证码const code = document.querySelector('.code')const linkbt = document.getElementById('linkbt')let str = '012345678901234567890123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'let yan = ''function create() {for (let i = 0; i < 6; i++) {let random = parseInt(Math.random() * str.length)yan += str[random]}code.innerHTML = yan}create()//2、点击看不清验证码，重新生成linkbt.addEventListener('click', function () {yan = ''create()})//3.进行验证 点击按钮时，进行对对比const inputCode = document.getElementById('inputCode')const Button1 = document.getElementById('Button1')Button1.addEventListener('click', function () {if (inputCode.value === '') {return alert('输入不能为空')}if (code.innerHTML === inputCode.value) {alert('验证成功')} else {alert('验证失败')}})</script>
</body></html>2、键盘操作移动盒子，按下键盘上下左右键能够让盒子移动
html" title=javascript>javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.box1 {width: 100px;height: 100px;background-color: red;position: absolute;/* left: 50px */}</style>
</head><body><div class="box1"></div><script>const box1 = document.querySelector('.box1')let l = 0, t = 0document.addEventListener('keydown', function (e) {switch (e.keyCode) {case 37:l -= 10box1.style.left = `${l}px`breakcase 38:t -= 10box1.style.top = `${t}px`breakcase 39:l += 10box1.style.left = `${l}px`breakcase 40:t += 10box1.style.top = `${t}px`}})</script>
</body></html>3、鼠标操作移动盒子，盒子会随着鼠标的移动而移动，鼠标到哪，它就到哪
html" title=javascript>javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.box1 {width: 100px;height: 100px;background-color: red;/* 开启box1的绝对定位 */position: absolute;}</style></head><body style="height: 1000px"><div class="box1"></div></body><script>const box1 = document.querySelector('.box1')window.addEventListener('mousemove', function(e) {box1.style.top = `${e.pageY - 50}px`box1.style.left = `${e.pageX - 50}px`})</script>
</html>
