在网上找的一个纯css实现loading动画的代码，自己精简了下
官方网站：https://connoratherton.com/loaders
github：https://github.com/ConnorAtherton/loaders.css
自己写的在线获取代码的页面：CodePen Loaders.CSS纯css加载动画-精简版-在线获取代码
<?php
$downloadData=[
'downloadSite'=>SITE.'-'.DOMAIN,//需要操作的站点
'requestTime'=>时间戳,
'requestKey'=>'',//请求秘钥（为requestTime和配置的秘钥md5）
'downloadTo'=>'info',//保存哪个栏目目录
'downloadToDeep'=>'hy',//移动到downloadTo的子目录（比如hy）
'remotePics'=>['http://www.baidu.com/1.jpg','http://www.baidu.com/2.jpg',....],//远程图片数组,一维或者二维[from=>to,from=>to]
'needReturnPicFileSise'=>0,//是否需要返回保存后的图片文件大小（byte字节数），可不传递，1需要返回，默认0（统一返回size下标等于0）
'needReturnPicPx'=>0,//是否需要返回保存后的图片文件长高（px），可不传递，1需要返回，默认0（统一返回px下标等于0）
#####水印相关请求
#1:参数为水印图片路径，比如:http://static.vancdn.com/public/img/water/watermark.pngwater.png，只需要传递：public/img/water/watermark.png
#2:$config['waterImg']是指原图是否需要水印,,如果设置则最原始图片会被水印图覆盖（不保留原图,只会生成一个带水印的原图）
#3:$config['thumb']数组中的waterImg为缩略图使用的水印图片地址（参数格式和说明1一致）
'waterImg'=>'public/img/water/water.jpg',
'waterPos'=>0,
'thumb'=>array(
//缩略图：多个请指定多个数组，缩略图宽度，缩略图名称前缀，缩略图是否需要增加水印(参数为水印图片路径)
array('sizeWidth'=>750,'name'=>'_middle','waterImg'=>'public/img/water/water.middle.jpg','waterPos'=>-1),
array('sizeWidth'=>450,'name'=>'_small','waterImg'=>'public/img/water/water.small.png','waterPos'=>-1),
)
];
$myCurl=new myCurl();
$result=json_decode($myCurl->post('请求的保存url',$downloadData),true);
echo '<pre>';
var_dump($result);
?>1：/老/app/static/html/forceUrl/android5.4UpdateTips.html
2：/老/app/static/php/update/updateConfig.php
3：/新/config/api/app/update.php
/*
require ROOT.'config/class/sendSms.php';
require ROOT.'class/sendSms.php';#用到了autoload就不用require了
$sendSms=new sendSms($smsConfig);
$res=$sendSms->send(array(
'language'=>'cn',//cn or en
'site'=>'vpp',//支持的站点请看配置文件,自己的项目可以用SITE常量
'countryCode'=>'+86',//cn=+86(使用阿里云或者163发送,其他使用twilio),ca=+1,us=+1
'phone'=>'手机号',
'action'=>'confirmCode',//发送类型，具体请看配置文件
'sendParam'=>array('code'=>'123456'),//为模板变量，具体请看配置文件，必须是数组
));
//成功返回true,失败返回数组[code,msg]
var_dump($res);
*/我们需要如下：demo.html+ajax/doConfirmCode.php+demoSave.php+confirmCode.php（php类，不提供）+confirmCode.js（js类，不提供）
我们先看看demo.html的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>验证码Demo</title>
<style>
* {box-sizing:border-box;}
#code{border:#ababab solid 1px;width:100px;height:30px;line-height:30px;vertical-align:middle;border-radius:6px;}
#img{border:1px solid red;cursor:pointer;vertical-align:middle;border-radius:6px;width:100px; height:30px; display: inline-block;}
#button{cursor:pointer;vertical-align:middle;width:100px;height:30px;line-height:30px;background:#000;color:#fff;display:inline-block;text-align:center;border-radius:6px;border:none;margin-left:30px;}
#box{width:90%;margin:0 auto;margin-top:100px;}
</style>
</head>
<body>
<div id="box">
<input type="text" id="code" value="" />
<img id="img" />
<input id="button" type="button" value="保存提交" />
</div>
<script type="text/ecmascript" src="static/jquery-1.12.4.min.js"></script>
<script type="text/ecmascript" src="static/confirmCode.js"></script>
<script type="text/ecmascript">
$(function(){
var yzm = new confirmCode({
//基本配置
input:'#code',//必填，验证码输入框id或css选择器，比如: '#code'或者'.input_captcha'
input_maxlength:4,//可以不填，验证码长度, 默认是4(js会自动将控件的maxlength改为input_maxlength,并且input_onblur_check的参数也会先判断长度然后来处理)
input_first_auto_focus:false,//可以不填，验证码输入框第一次加载是否自动获取焦点并清空值，默认false
img:'#img',//必填，显示验证码的容器id或css选择器，比如: '#imgcode'或者'.img_captcha'
img_loading:{
first_unautoload_default_img:'',//可以不填，填写了代表验证码第一次默认不自动加载所设置的默认图片，可以用远程地址：https://static.vancdn.com/public/img/yzm/click2load.png
first_load_delay:2000,//第一次延迟加载的毫秒，默认0（如果first_unautoload_default_img设置为非空，则无效）
loading_img:'static/loading.png',//可以不填，加载验证码过程中的默认图片，可以用远程地址：https://static.vancdn.com/public/img/yzm/loading.png
loading_fail_img:'static/error.png',//可以不填，加载验证码失败的图片，可以用远程地址：https://static.vancdn.com/public/img/yzm/error.png
loading_fail_func:function(msg){//验证加载失败的回调函数，如果不操作请申明空function
alert('验证码加载失败：'+msg+'；在此进行相关书写');
}
},
get_url:'ajax/doConfirmCode.php',//必填，获取验证码的url
//第一种情况：在提交保存数据的js代码中验证验证码的合法性（验证长度之后，是否进行js的md5验证）
//第二种情况：如果开启了input_onblur.open,则先走js的md5验证再走input_onblur.server_check_url（如果设置了的话）
verify_by_js_md5:true,//可以不填，默认false
//input控件onblur的监控处理
input_onblur:{
open:true,//是否在input的onblur时交互检查,总开关（当设置为true的时候，如果verify_by_js_md5==true，那么先走js的md5验证，再走服务端验证）
server_check_url:'ajax/doConfirmCode.php',//启用服务器端验证时请求的url（如果没设置，则不走服务端验证）
success:function(){//验证成功的回调函数，如果不操作请申明空function
alert('onblur验证成功；在此进行相关书写');
},
fail:function(msg){//验证失败的回调函数，如果不操作请申明空function
alert('onblur验证失败：'+msg+'；在此进行相关书写');
}
},
console_test:true,//是否调试console日志，默认false
});
//适合保存的时候检查验证码是否有效,根据yzm.verify_save()返回值进行相关操作
$("#button").on('click',function(){
//这里仅仅只做验证码的逻辑处理，自己其他业务自己处理
if(yzm.verify_save()==true){
//在这里获取到输入框的值和key
var yzmValue=yzm.getYzm();
alert("yzmkey:"+yzmValue.yzmkey+",yzmvalue:"+yzmValue.yzmkey);
alert('验证码验证成功，书写自己需要的代码，比如请求ajax...');
}
else {
alert('验证码验证失败，书写自己需要的代码，比如return false');
}
});
});
</script>
</body>
</html>再看看ajax/doConfirmCode.php
<?php
header('content-type:text/plain; charset=utf-8');
//本代码基本可以不用重写,除非遇到参数不一致
switch($_POST['action']){
case 'get':
echo json_encode(Myzm()->get(
array(
'width'=>100,//图片宽度px,默认100
'height'=>30,//图片高度px,默认30
'textNum'=>4,//验证码(字母+数字)数量,默认4
'timeout'=>600,//验证码有效期秒,默认600
)
));
break;
case 'onblurcheck':
echo json_encode(Myzm()->check(
array(
'yzmcode'=>$_POST['yzmcode'],//用户输入的code
'yzmkey'=>$_POST['yzmkey'],//验证码的key
'textNum'=>4,//验证码长度，默认为4
'delyzmkey'=>false,//是否删除key，默认为true，特别注意：ajax执行check时不删除key, 待form提交后再删除
)
));
break;
default:break;
}在看看demoSave.php
<?php
header('content-type:text/plain; charset=utf-8');
/***示例检查验证码的代码-开始***/
$yzmCheck=Myzm()->check(
array(
'yzmcode'=>$_POST['yzmcode'],//用户输入的code
'yzmkey'=>$_POST['yzmkey'],//验证码的key
'textNum'=>4,//验证码长度，默认为4
'delyzmkey'=>true,//是否删除key，默认为true，特别注意：ajax执行check时不删除key, 待form提交后再删除
)
);
if($yzmCheck['status']=='error'){
echo $yzmCheck['errorStr'];//通过$yzmCheck['errorStr']进行自己的相关操作
}
/***示例检查验证码的代码-结束***/
近期评论