css基础--验证设计

1滑块验证

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滑块验证码</title>
<style>
* {
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}

.drag {
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin: 0 auto;
}

.bg {
width: 40px;
height: 100%;
position: absolute;
background-color: #75CDF9;
}

.text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
user-select: none;
}

.btn {
width: 40px;
height: 38px;
position: absolute;
border: 1px solid #ccc;
cursor: move;
font-family: "宋体";
text-align: center;
background-color: #fff;
user-select: none;
color: #666;
}
</style>
</head>

<body>
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false">请拖动滑块解锁</div>
<div class="btn">>></div>
</div>
<script>
//一、定义一个获取DOM元素的方法
var $ = function (selector) {
return document.querySelector(selector);
},
box = $(".drag"),//容器
bg = $(".bg"),//背景
text = $(".text"),//文字
btn = $(".btn"),//滑块
success = false,//是否通过验证的标志

distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）

//二、给滑块注册鼠标按下事件
btn.onmousedown = function (e) {
//1.鼠标按下之前必须清除掉后面设置的过渡属性
btn.style.transition = "";
bg.style.transition = "";

//说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。

//2.当滑块位于初始位置时，得到鼠标按下时的水平位置
var e = e || window.event;
var downX = e.clientX;
//三、给文档注册鼠标移动事件
document.onmousemove = function (e) {

var e = e || window.event;//是为了更好的兼容IE浏览器和非ie浏览器。在ie浏览器中,window.event是全局变量,在非ie中，就需要自己传入一个参数来获取event啦，所以就有了var e = e||window.event
//1.获取鼠标移动后的水平位置
var moveX = e.clientX;

//2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
var offsetX = moveX - downX;

//3.在这里判断一下：鼠标水平移动的距离与滑动成功的距离之间的关系
if (offsetX > distance) {
offsetX = distance;//如果滑过了终点，就将它停留在终点位置
} else if (offsetX < 0) {
offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
}

//4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";

//如果鼠标的水平移动距离 = 滑动成功的宽度
if (offsetX == distance) {

//1.设置滑动成功后的样式
text.innerHTML = "验证通过";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";

//2.设置滑动成功后的状态
success = true;
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
btn.onmousedown = null;
document.onmousemove = null;

//3.成功解锁后的回调函数
setTimeout(function () {
alert('解锁成功！');
}, 100);
}
}

//四、给文档注册鼠标松开事件
document.onmouseup = function (e) {
//如果鼠标松开时，滑到了终点，则验证通过
if (success) {
return;
} else {
//反之，则将滑块复位（设置了1s的属性过渡效果）
btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
}
//只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
document.onmousemove = null;
document.onmouseup = null;
}

}
</script>
</body>

</html>

2、点线干扰验证码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<canvas id="canvas" width="120" height="40"></canvas>
<script>
var canvas = document.getElementById("canvas");//
var context = canvas.getContext("2d");//舞台
draw();
canvas.onclick = function () {
context.clearRect(0, 0, 120, 40);
draw();
}
function getColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
function draw() {
context.strokeRect(0, 0, 120, 40);
var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
for (var i = 0; i < 4; i++) {
var x = 20 + i * 20;
var y = 20 + 10 * Math.random();
var index = Math.floor(Math.random() * aCode.length);//随机索引值
var txt = aCode[index];
context.font = "bold 20px 微软雅黑";
context.fillStyle=getColor();
context.translate(x,y);
var deg=90*Math.random()*Math.PI/180;
context.rotate(deg);
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x,-y);
}
for (var i = 0; i < 8; i++) {
context.beginPath();
context.moveTo(Math.random() * 120, Math.random() * 40);
context.lineTo(Math.random() * 120, Math.random() * 40);
context.strokeStyle=getColor();
context.stroke();
}
for (var i = 0; i < 20; i++) {
context.beginPath();
var x = Math.random() * 120;
var y = Math.random() * 40;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.strokeStyle=getColor();
context.stroke();
}
}

</script>
</body>

</html>

3、短信验证码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text" id="txt1" />
<button id="btn">获取验证码</button>
<button id="btnLogin">登录</button>
<script>

var rcode = "";
$("#btn").click(function () {
$.post("/Handler1.ashx", {}, function (data) {
rcode=data;
});
});
$("#btnLogin").click(function () {
var txt = $.trim($("#txt1").val());
if (rcode == "error") {
alert("程序出错");
}
else {
if (txt == rcode) {
alert("登录成功");
}
else {
alert("验证码错误");
}
}
});
</script>
</body>
</html>

服务器端：Handler1.ashx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using qcloudsms_csharp;
using qcloudsms_csharp.json;
using qcloudsms_csharp.httpclient;
namespace WebApplication1
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
// 短信应用 SDK AppID
int appid = ;

// 短信应用 SDK AppKey
string appkey = "";

// 需要发送短信的手机号码
string[] phoneNumbers = { "15019241497" };

// 短信模板 ID，需要在短信控制台中申请
int templateId = 7839; // NOTE: 这里的模板 ID`7839`只是示例，真实的模板 ID 需要在短信控制台中申请

// 签名
string smsSign = "腾讯云"; // NOTE: 签名参数使用的是`签名内容`，而不是`签名ID`。这里的签名"腾讯云"只是示例，真实的签名需要在短信控制台申请
public void ProcessRequest(HttpContext context)
{
try
{
string code = new Random().Next(1000, 10000).ToString();
SmsSingleSender ssender = new SmsSingleSender(appid, appkey);
var result = ssender.send(0, "86", phoneNumbers[0],
"【尊敬的Owen】你的验证码为："+ code + "，请于2分钟内填写。如非本人操作，请忽略本短信。", "", "");
if (result.errMsg == "OK")
{
context.Response.Write(code);
}
else {
context.Response.Write("error");
}
}
catch (JSONException e)
{
context.Response.Write("error");
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

css基础--验证设计相关推荐

我的基础css网站页码设计
1. 基础页码效果下面的代码是上图效果的基础样式设计:为了保持浏览器兼容性,最好设置a的display样式为inline-block:后续可以为页码添加点击事件. 2. 参考源码 <!DOCT ...
HTML+css 基础语法
title: HTML+css 基础语法 categories: HTML tags: [语法,HTML,css] 一.HTML 什是么网站? 网站(Website)开始是指在因特网上根据一定的规 ...
前端开发--CSS基础
快速生成css样式采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...
html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
CSS基础_Day03
CSS基础一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...

css基础--验证设计

css基础--验证设计相关推荐

最新文章

热门文章