正则表达式、3D拖拽相册
正则表达式
需求：找出一串字符串中的数字
var str = 'fsalf6784h./#@$%hf12938';
for(var i=0;i<str.length;i++){
/*
// 方法一
var s = str.charAt(i);
if( s == parseInt(s) ) {
console.log(s)
}
*/
/*
// 方法二
var code = str.charCodeAt(i)
if(code>=48 && code<=57){
console.log(str.charAt(i));
}
*/
// 方法三
var s = str.charAt(i);
if(s>='0' && s<='9'){
console.log(s);
}
}
// 封装方法
var str = 'fsalf6784h./#@$%hf12938';
// alert( getNum(str) ); // [6,7,8,4,1,2,9,3,8]
alert( getNum2(str) ); // [6784,12938]
function getNum(str){
var arr = [];
for(var i=0;i<str.length;i++){
var s = str.charAt(i);
if(s>='0' && s<='9'){
arr.push(s);
}
}
return arr;
}
/*要求输出 [6784, 12938]*/
function getNum2(str){
var arr = [];
var res = '';
for(var i=0;i<str.length;i++){
var s = str.charAt(i);
if(s>='0' && s<='9'){
res += s;
}else{
if(res != ''){
arr.push(res);
res = '';
}
}
}
if(res != ''){
arr.push(res);
}
return arr;
}
初识正则表达式
var str = 'fsalf6784h./#@$%hf12938';
function getNum(str){
return str.match(/\d+/g);
}
alert( getNum(str) ); // [6784,12938]
var str = '0123456789';
var reg = /\D/;
if(reg.test(str)){
alert('不是纯数字');
}else{
alert('是纯数字')
}
var str = '123adsad';
console.log(str.search(/a/)); // 3
console.log(str.search(/A/)); // -1
console.log(str.search(/A/i)); // 3
str = 'djal124849hf189029jfwa-3,.#@@skf89';
console.log( str.match(/\d+/g) ); // ["124849", "189029", "3", "89"]
var newStr = str.replace(/a/g, 'y');
console.log(newStr); // djyl124849hf189029jfwy-3,.#@@skf89
正则表达式：规则，让计算机认识的一套规则
定义：
1）var reg = //;
2）var reg = new RegExp();
方法：
1）test：匹配成功返回true，否则返回失败
reg.test(str)
2）search：匹配成功返回成功后的位置的下标，否则返回-1
str.search(reg)
3）match：匹配成功返回匹配字符的数组，否则返回null
str.match(reg)
4）replace：匹配成功把匹配的字符串改变成新的字符串
str.replace(reg, newStr)
转义字符 \
\d:数字 \D:非数字
\s:用于匹配单个空格符，包括tab键和空格键
\S:用于匹配单个空格符之外的所有字符
\w:用于匹配字母，数字，下划线[a-zA-Z0-9_]
\W:[^a-zA-Z0-9_]
标识：
i:不区分大小写，默认是区分大小写
g:匹配所有的
标量（量词）:
+:一次或多次
案例-留言板屏蔽恶意留言
<input type="text" id="txt"><input type="button" id="btn" value="留言">
<div id="box"></div>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oTxt = document.querySelector('#txt');
var oBox = document.querySelector('#box');
var reg = /垃圾|笨蛋|狗屎|傻逼/g;
oBtn.onclick = function(){
var val = oTxt.value;
if(val){
// val = val.replace(reg, '*');
val = val.replace(reg, function(s){
var res = '';
for(var i=0; i<s.length; i++){
res += '*';
}
return res;
});
var op = document.createElement('p');
op.innerHTML = val;
oBox.appendChild(op);
oTxt.value = '';
}
}
}
正则表达式-匹配子项
<!--
匹配子项()
正则表达式的整体 ===> 母体
从左边的第一个小括号开始，成为第一个子项
-->
<script type="text/javascript">
var str = '2018-12-12';
// var reg = /\d+/g;
// console.log(str.match(reg)); // ["2018", "12", "12"]
var reg = /(\d+)(-)/g
/*
str.replace(reg, function(s, s0, s1){
alert(s); // 2018- 12-
// s: 与母体相匹配
// s0：与第一个子项相匹配的
// s1：与第二个子项相匹配的
alert(s0); // 2018 12
alert(s1); // - -
});
*/
// 需求 '2018-12-12' ==> '2018.12.12'
str = str.replace(reg, function(s, s0, s1, s2){
// // 方法一
// return s.substring(0, s.length-1) + '.';
// 方法二
return s0+'.';
});
alert(str)
</script>
正则表达式-转义字符
转义字符：
\d \D \s \S \w([a-zA-Z0-9_]) \W([^a-zA-Z0-9_])
.所有的字符
\b 独立的部分（匹配起始、结束、空格）
/*
var str = 'a.cd';
var reg = /a\.cd/;
alert(reg.test(str)); // true
*/
var str = 'abcd';
alert(/abc/.test(str)); // true
alert(/abc\b/.test(str)); // false
alert(/abc\b/.test('abc d')); // true
\b应用案例
<div id="box">
<p class="con"></p>
<p class="con"></p>
<p class="con con1"></p>
<p class="con"></p>
</div>
alert( getClass('con').length );
function getClass(className, obj){
obj = obj || document;
if(obj.getElementsByClassName){
return obj.getElementsByClassName(className);
}else{// 兼容IE678
var arr = [];
var reg = new RegExp('\\b' + className + '\\b');
var allE = obj.getElementsByTagName('*');
for(var i=0;i<allE.length;i++){
if(reg.test(allE[i].className)){
arr.push(allE[i])
}
}
return arr;
}
}
\1的使用
/*
var str = 'abcdab';
var reg = /(ab)(cd)\1/; // \1:表示匹配第一个子项，即abcdab
alert(reg.test(str)); // true
alert(/(ab)(cd)\2/.test(str)); // \2:表示匹配第二个子项，即abcdcd 所以 false
*/
alert( /(\d)\1/.test('asd33sd') ); // true
alert( /(\d)\1/.test('asd34sd') ); // false
正则表达式-字符集
正则表达式之字符集
匹配字符集 []
例如：[a-z] [f-h] [A-Z] [0-9]
alert( /abc/.test('abcd') ); // true
alert( /a[a-z]c/.test('abcd') ); // true
alert( /a[c-z]c/.test('abcd') ); // false
alert( /a[z-a]c/.test('abcd') ); // Uncaught SyntaxError: Invalid regular expression: /a[z-a]c/: Range out of order in character class
正则表达式-量词
+：（至少出现一次）出现一次或多次 >= 1
{1,5} : 至少出现1次，最多5次
{5, } : 至少出现5次
* ：至少出现 0 次
? ：{0, 1} 出现1次或者 0 次
var str = '1234adas45das890das';
var reg = /\d/;
// alert( str.match(reg) ); // 1
// alert( str.match(/\d/g) ); // 1,2,3,4,4,5,8,9,0
// alert( str.match(/\d+/g) ); // 1234,45,890
// alert( str.match(/\d{1,}/g) ); // 1234,45,890
// alert( str.match(/\d{1,3}/g) ); // 123,4,45,890
// alert( str.match(/\d?/g) ); // 1,2,3,4,,,,,4,5,,,,8,9,0,,,,
常用正则表达式
// 匹配QQ号码 5-10位： 第一位是1-9，所以剩下的是[0-9]的数字
// var reg = /^[1-9]\d{4, 9}$/
// 注册账号 字母开头（^[a-zA-Z]）长度8-12不包括空格符
// var reg = /^[a-zA-Z]\S{7,11}$/
// 邮箱匹配
// var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+){1,3}$/
// 手机号码
// var reg = /^1\d{10}$/
// 身份证 18 15
// var reg = /^[1-9]\d{14}$ | ^[1-9]\d{17}$ | ^[1-9]\d{16}x$/
// 匹配中文
var reg = /^[\u4E00-\u9FA5]+$/
/*工作的时候*/
var regJson = {
"QQ":/^[1-9]\d{4,9}$/,
"regist":/^[a-zA-Z]\S{7,11}$/,
"eamil":/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+){1,3}$/,
//。。。。
};
总结
正则表达式总结
规则：让计算机去看的一套规则
匹配字符串的方法
test() ==> 返回 true or false
match() ==> 返回匹配的数组
search() ==> 返回匹配的索引，没有匹配就返回-1
replace(reg, function(s){})
转义字符：
\d \D \s \S \w \W \b \. \1
() : 子项
[] : 字符集
{} ：+ * ？
标识：
g匹配所有
i忽略大小写
m
^ : 起始，注意在字符集里面[^ ]就是非
$ : 结束
3D拖拽相册
阶段一：
实现图片3D展示效果，鼠标随意拖拽旋转预览图片等
*{padding:0px;margin:0px;}
body{background:#000;}
#perspective{perspective: 800px;}
#wrap{width: 120px;height: 180px;margin: 50px auto;position: relative;/*设置3D环境*/transform-style: preserve-3d;transform: rotateX(-10deg);}
#wrap img{width: 100%;height: 100%;position: absolute;box-shadow:0 0 1em pink;border-radius:4px;-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));}
#wrap p{width: 1200px;height: 1200px;background:#fff;position: absolute;border-radius: 50%;left: 50%;top:102%;margin-left: -600px;margin-top: -600px;transform: rotateX(90deg);background:-webkit-radial-gradient(center center,600px 600px,rgba(242,79,242,0.4),rgba(0,0,0,0));}
/*
box-shadow：阴影
-webkit-box-reflect：倒影
下方 间隔 线性渐变（top(0) ==> 40%(0.5)）
below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5))
background: -webkit-radial-gradient:镜像渐变;
*/
<div id="perspective">
<div id="wrap">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
<img src="img/8.jpg">
<img src="img/9.jpg">
<img src="img/10.jpg">
<img src="img/11.jpg">
<p></p>
</div>
</div>
var wrap = document.getElementById('wrap');
var imgs = wrap.getElementsByTagName('img');
var imgLen = imgs.length;
var deg = 360/imgLen;
var nowX, nowY, lastX, lastY, minusX, minusY;
var roX = -10, roY = 0;
for(var i=0; i<imgLen; i++){
imgs[i].style.transform = 'rotateY('+(i*deg)+'deg) translateZ(350px)';
}
// 拖拽 三个事件：按下、移动、抬起
// 鼠标按下
document.onmousedown = function(ev){
var e = ev || event;
// 鼠标按下时，给前一点坐标赋值
lastX = e.clientX;
lastY = e.clientY;
// 鼠标移动
this.onmousemove = function(ev){
var e = ev || event;
/*
var x = e.clientX;
var y = e.clientY;
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:5px;height:5px;background:yellow;position:absolute;left:'+x+'px;top:'+y+'px'
this.body.appendChild(oDiv);
*/
// 获取当前坐标的值
nowX = e.clientX;
nowY = e.clientY;
// 获取差值
minusX = nowX - lastX;
minusY = nowY - lastY;
roY += minusX*0.2;//乘以一个摩擦系数
roX -= minusY*0.2;//乘以一个摩擦系数
// console.log(minusX, minusY);
wrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';
// 获取上一个坐标的值
lastX = nowX;
lastY = nowY;
}
// 鼠标抬起
this.onmouseup = function(){
this.onmousemove = null;
}
return false;// 阻止默认事件
}
阶段二：
实现动画展开预览
window.onload = function(){
var wrap = document.getElementById('wrap');
var imgs = wrap.getElementsByTagName('img');
var imgLen = imgs.length;
var deg = 360/imgLen;
var nowX, nowY, lastX, lastY, minusX, minusY;
var roX = -10, roY = 0;
var timer = null;
for(var i=0; i<imgLen; i++){
imgs[i].style.transform = 'rotateY('+(i*deg)+'deg) translateZ(350px)';
imgs[i].style.transition = 'transform 1s '+((imgLen-i)*0.2)+'s';
}
window.onresize = mTop;
function mTop(){
var wH = window.innerHeight;
wrap.style.marginTop = (wH/2-180)+'px'
}
mTop();
// 拖拽 三个事件：按下、移动、抬起
// 鼠标按下
document.onmousedown = function(ev){
var e = ev || event;
// 鼠标按下时，给前一点坐标赋值
lastX = e.clientX;
lastY = e.clientY;
// 鼠标移动
this.onmousemove = function(ev){
var e = ev || event;
clearInterval(timer);
/*
var x = e.clientX;
var y = e.clientY;
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:5px;height:5px;background:yellow;position:absolute;left:'+x+'px;top:'+y+'px'
this.body.appendChild(oDiv);
*/
// 获取当前坐标的值
nowX = e.clientX;
nowY = e.clientY;
// 获取差值
minusX = nowX - lastX;
minusY = nowY - lastY;
roY += minusX*0.2;//乘以一个摩擦系数
roX -= minusY*0.2;//乘以一个摩擦系数
// console.log(minusX, minusY);
wrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';
// 获取上一个坐标的值
lastX = nowX;
lastY = nowY;
}
// 鼠标抬起
this.onmouseup = function(){
this.onmousemove = null;
timer = setInterval(function(){
minusX *= 0.95;
minusY *= 0.95;
roY += minusX*0.2;
roX -= minusY*0.2;
wrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';
if(Math.abs(minusX)<0.5){
clearInterval(timer);
}
}, 30);
}
return false;// 阻止默认事件
}
}