JavaScript基础（十一）正则表达式、3D拖拽相册

最新推荐文章于 2019-07-09 17:46:40 发布

讲文明的喜羊羊拒绝pua

最新推荐文章于 2019-07-09 17:46:40 发布

阅读量285

点赞数

分类专栏： HTML/CSS/JavaScrript

本文链接：https://blog.csdn.net/yangwei234/article/details/84995963

版权

HTML/CSS/JavaScrript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

正则表达式、3D拖拽相册

正则表达式
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;// 阻止默认事件
	}
}