js实现验证码干扰（静态）

2024-10-06 21:23:28

本文实例为大家分享了js实现验证码干扰的具体代码，供大家参考，具体内容如下

效果

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
  padding: 0;
  margin: 0;
  }
  canvas{
  background: #272822;
  }
 </style>
 </head>
 <body>
 <canvas id='canvas' width='800' height='500'></canvas>
 <script>
  //获得画板
  var canvas=document.getElementById('canvas');
  //获得绘画环境
  var cv=canvas.getContext('2d');

  cv.fillStyle='#272822';
  cv.fillRect(0,0,800,500);
  cv.font='80px 微软雅黑';
  cv.fillStyle='greenyellow';
  cv.fillText( Math.floor(Math.random()*10000),200,200);

  //获得所有的图像像素点信息
  var alldata=cv.getImageData(0,0,800,500);
  //获得像素点的个数
  var dian=alldata.data.length/4;
  for(var i=0;i<10000;i++){
  //取随机数
  var num=Math.floor(Math.random()*dian);
  //计算像素点对应的四条信息从几号开始
  var start=(num-1)*4;
  alldata.data[start]=Math.floor(Math.random()*256);
  alldata.data[start+1]=Math.floor(Math.random()*256);
  alldata.data[start+2]=Math.floor(Math.random()*256);
  }
  //将数据写回画板
  cv.putImageData(alldata,0,0);
 </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript编写带旋转+线条干扰的验证码脚本实例

基础版从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成. 那么接下来楼主将带领大家一步步用JavaScript做出一个验证码脚本! 先给出成品,方便大家理解: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #securityCode{ background-color: #008000; width
js实现验证码干扰（静态）

本文实例为大家分享了js实现验证码干扰的具体代码,供大家参考,具体内容如下效果代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } canvas{ background: #272822; } </style> </hea
js实现验证码干扰(动态)

本文实例为大家分享了js实现验证码动态干扰的具体代码,供大家参考,具体内容如下效果一效果二代码一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js简单验证码使用</title> <style> .code { font-family:Arial; font-style:italic; color:blue; font-si
原生js生成图片验证码

本文实例为大家分享了js生成图片验证码的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" style="width: 200px;hei
js生成验证码并直接在前端判断

js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局定义验证码 var code2; //在全局定义验证码 function cr
解决springMVC 跳转js css图片等静态资源无法加载的问题

web.xml中 servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-va
javascript实现动态导入js与css等静态资源文件的方法

本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法.分享给大家供大家参考.具体实现方法如下: /** * 动态导入静态资源文件js/css */ var $import = function(){ return function(rId, res, callback){ if(res && 'string' == typeof res){ if(rId){ if($($('#' + rId), $('head')).length>0){ return; }
js实现验证码功能

本文实例为大家分享了js实现验证码功能的具体代码,供大家参考,具体内容如下 #前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮 <body> <input type="text"> <div></div> <button>提交</button> </body> 然后加一些样式 input { width: 150px;
js实现验证码案例

本文实例为大家分享了js实现验证码的具体代码,供大家参考,具体内容如下 css代码: input{ width: 200px; height: 32px; border: 1px solid #000; box-sizing: border-box; } #c1{ vertical-align: middle; box-sizing: border-box; cursor: pointer; } #btn{ display: block; margin-top: 20px; height: 32
js 实现验证码输入框示例详解

目录前言思路遇到的问题 HTML CSS JS 前言验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位
原生js实现验证码功能

效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js验证码</title> <style type="text/css"> #code{ width:80px; height:30px; font-size:20px; font-family:Aria

js实现验证码干扰（静态）

相关推荐

随机推荐