JavaScript基础学习笔记之JavaScript进阶
焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点事件</title>
</head>
<body>
<input type="text" name="in" id="put" />
<script type="text/javascript">
//焦点事件：一般用于文本框上
var jsInput = document.getElementById("put");
//获取焦点
jsInput.addEventListener("focus", funcFocus, false);
function funcFocus() {
console.log("聚焦");
}
//失去焦点
jsInput.addEventListener("blur", funcBlur, false);
function funcBlur() {
console.log("离焦");
}
</script>
</body>
</html>
鼠标事件-单击与双击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件-单击与双击</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
// console.log(jsDiv);
//区分单击还是双击，使用延时定时器
var timer;
//添加单击事件
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
clearTimeout(timer);
timer = setTimeout(function(){
console.log("单击");
}, 300);
}
//添加双击加事件
jsDiv.addEventListener("dblclick", funcDoubleClick, false);
function funcDoubleClick() {
clearTimeout(timer);
console.log("双击");
}
</script>
</body>
</html>
鼠标事件-mouseover、mouserout、mousedown、mouseup、mousemove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件-mouseover、mouserout、mousedown、mouseup、mousemove</title>
</head>
<body>
<ul>
<li>鼠标进入改变颜色</li>
<li>鼠标离开恢复颜色</li>
<li>鼠标按下字体变大</li>
<li>鼠标抬起字体恢复</li>
</ul>
<script type="text/javascript" src="sunck.js"></script>
<script type="text/javascript">
var jsLis = document.getElementsByTagName("li");
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].onmouseover = func1;
function func1() {
this.style.backgroundColor = "red";
}
jsLis[i].onmouseout = func2;
function func2() {
this.style.backgroundColor = "#fff";
}
jsLis[i].onmousedown = func3;
function func3() {
this.style.fontSize = parseInt( getStyle(this, "fontSize") ) * 2 + "px";
}
jsLis[i].onmouseup = func4;
function func4() {
this.style.fontSize = parseInt( getStyle(this, "fontSize") ) / 2 + "px";
}
}
//mousemove事件：鼠标移动触发
document.onmousemove = function(){
console.log("鼠标移动");
};
</script>
</body>
</html>
sunck.js文件中的内容
//获取滚动高度
function $scrollTop(){
return document.documentElement.scrollTop||document.body.scrollTop;
}
//根据id获取元素节点
function $(idName){
return document.getElementById(idName);
}
//获取可视窗口的宽度
function $w(){
return document.body.width||document.documentElement.width||window.innerWidth;
}
//获取可视窗口的高度
function $h(){
return document.body.height||document.documentElement.height||window.innerHeight;
}
//随机颜色
function randomColor(){
//rgb(255,255,255)
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
// "#ffffff"
}
//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
if(obj.currentStyle){
//IE
return obj.currentStyle[at];
}else{
return window.getComputedStyle(obj,null)[at];
}
}
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<script type="text/javascript">
/**键盘事件：一般绑定在document上
*
* keydown 按下键盘的任意键(连续调用)
* keyup 抬起键盘的任意键(连续调用)
* keypress 按下键盘的非ctrl/shift/alt/capsLock/ NumLock键(非键盘功能键)(连续调用)
*
*
* 只要触发了事件就会自动产生一个事件对象
* 事件对象包含了本次事件的所有信息
* 在事件的处理程序中来获取事件对象
*/
// 参数为事件对象
document.onkeydown = function(e) {
// 非IE IE
var evt = e || window.event;
console.log(evt);
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
};
//键盘抬起
document.onkeyup = function(e) {
var evt = e || window.event;
console.log(evt);
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
};
document.onkeypress = function(e) {
console.log("*****************1");
var evt = e || window.event;
console.log(evt);
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
console.log("*****************2");
};
</script>
</body>
</html>
键盘事件应用下例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件应用下例子</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red;position: absolute;
}
</style>
</head>
<body>
<!-- 1.在页面有一个div,按下shift+C键的时候给div随机改变背景色； -->
<!-- 2.通过上下左右方向键来控制div在页面上移动 -->
<div id="box"></div>
<script type="text/javascript" src="sunck.js"></script>
<script type="text/javascript">
var jsDiv = $("box");
console.log(jsDiv);
//改变颜色
document.onkeydown = function(e) {
var evt = e || window.event;
if (evt.shiftKey == true && evt.keyCode == 67) {
jsDiv.style.backgroundColor = randomColor();
}
};
//移动
document.addEventListener("keydown", funcMove, false);
function funcMove(e) {
var evt = e || window.event;
switch(e.keyCode)
{
case 37:
jsDiv.style.left = jsDiv.offsetLeft - 5 + "px";
break;
case 38:
jsDiv.style.top = jsDiv.offsetTop - 5 + "px";
break;
case 39:
jsDiv.style.left = jsDiv.offsetLeft + 5 + "px";
break;
case 40:
jsDiv.style.top = jsDiv.offsetTop + 5 + "px";
break;
}
}
</script>
</body>
</html>
sunck.js文件中的内容
//获取滚动高度
function $scrollTop(){
return document.documentElement.scrollTop||document.body.scrollTop;
}
//根据id获取元素节点
function $(idName){
return document.getElementById(idName);
}
//获取可视窗口的宽度
function $w(){
return document.body.width||document.documentElement.width||window.innerWidth;
}
//获取可视窗口的高度
function $h(){
return document.body.height||document.documentElement.height||window.innerHeight;
}
//随机颜色
function randomColor(){
//rgb(255,255,255)
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
// "#ffffff"
}
//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
if(obj.currentStyle){
//IE
return obj.currentStyle[at];
}else{
return window.getComputedStyle(obj,null)[at];
}
}
事件流
事件流的概念
事件流
验证事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证事件流</title>
<style type="text/css">
#box1{
width: 200px;height: 200px;background-color: red
}
#box2{
width: 100px;height: 100px;background-color: yellow
}
#box3{
width: 50px;height: 50px;background-color: blue
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
<script type="text/javascript">
var jsDiv1 = document.getElementById("box1");
var jsDiv2 = document.getElementById("box2");
var jsDiv3 = document.getElementById("box3");
//true 捕获阶段触发事件 box1--box2 -- box3
//false 冒泡阶段触发事件 box3--box2 -- box1
jsDiv1.addEventListener("click", func, true);
jsDiv2.addEventListener("click", func, true);
jsDiv3.addEventListener("click", func, true);
function func() {
console.log(this);
}
</script>
</body>
</html>
事件对象(阻止冒泡、阻止默认行为)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象(阻止冒泡、阻止默认行为)</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" name="in" id="put" />
<a href="red.html" id="link">点我跳转</a>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
var jsInput = $("put");
var jsA = $("link");
document.body.onclick = jsDiv.onclick = function(e) {
var evt = window.event || e;
this.style.backgroundColor = randomColor();
//属性在图片里
console.log(evt);
//阻止冒泡
evt.stopPropagation();
};
//输入框
jsInput.onfocus = function(e) {
var evt = window.event || e;
console.log(evt);
};
jsInput.onclick = function(e) {
var evt = window.event || e;
evt.stopPropagation();
};
//阻止默认行为
jsA.addEventListener("click", func, false);
function func(e) {
var evt = window.event || e;
console.log(evt);
var d = window.confirm("您访问的网站存在非法内容，确认访问?");
if (d === false) {
//阻止冒泡
evt.stopPropagation();
//阻止默认行为
evt.preventDefault();
}
}
</script>
</body>
</html>
sunckBase.js文件中的内容
//获取滚动高度
function $sckGetScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
//获取可视窗口的宽度
function $sckGetVisibleWindowWidth(){
return document.body.width || document.documentElement.width || window.innerWidth;
}
//获取可视窗口的高度
function $sckGetVisibleWindowHeight(){
return document.body.height || document.documentElement.height || window.innerHeight;
}
//根据id获取元素节点
function $(idName){
return document.getElementById(idName);
}
//根据class属性获取元素节点列表
function $sckGetElementByClassName(className){
return document.getElementByClassName(className);
}
//根据属性名获取元素节点列表
function $sckGetElementByTagName(tagName){
return document.getElementsByTagName(tagName);
}
//根据name属性获取元素节点列表
function $sckGetElementByName(name){
return document.getElementsByName(name);
}
//随机颜色
function randomColor(){
//rgb(255,255,255)
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
// "#ffffff"
}
//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
if(obj.currentStyle){
//IE
return obj.currentStyle[at];
}else{
return window.getComputedStyle(obj,null)[at];
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>red</title>
</head>
<body style="background-color: red">
</body>
</html>
事件的常用属性
鼠标事件的event对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件的event对象</title>
<style type="text/css">
#box{
width: 200px;height: 200px;background-color: red;position: absolute;
}
</style>
</head>
<body style="height: 2000px">
<div id="box"></div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
jsDiv.onclick = function(e) {
var evt = window.event || e;
console.log(evt);
//浏览器可视窗口坐标
console.log(evt.clientX, evt.clientY);
//页面坐标
console.log(evt.pageX, evt.pageY);
//电脑屏幕坐标
console.log(evt.screenX, evt.screenY);
//按键
console.log(evt.button);
};
//点击屏幕，让红色方块到指定位置
document.body.onclick = function(e) {
var evt = window.event || e;
jsDiv.style.left = evt.pageX + "px";
jsDiv.style.top = evt.pageY + "px";
};
</script>
</body>
</html>
鼠标事件的event对象
拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽效果</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red;position: absolute;left: 50px;top: 50px
}
</style>
</head>
<body">
<div id="box"></div>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
var baseX = 0;
var baseY = 0;
var moveX = 0;
var moveY = 0;
jsDiv.onmousedown = function(e) {
var evt = window.event || e;
baseX = evt.pageX;
baseY = evt.pageY;
document.onmousemove = function(e) {
var evt = window.event || e;
moveX = evt.pageX - baseX;
baseX = evt.pageX;
moveY = evt.pageY - baseY;
baseY = evt.pageY;
jsDiv.style.left = jsDiv.offsetLeft + moveX + "px";
jsDiv.style.top = jsDiv.offsetTop + moveY + "px";
};
};
jsDiv.onmouseup = function(e) {
document.onmousemove = null;
};
</script>
</body>
</html>
sunckBase.js文件中的内容
//获取滚动高度
function $sckGetScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
//获取可视窗口的宽度
function $sckGetVisibleWindowWidth(){
return document.body.width || document.documentElement.width || window.innerWidth;
}
//获取可视窗口的高度
function $sckGetVisibleWindowHeight(){
return document.body.height || document.documentElement.height || window.innerHeight;
}
//根据id获取元素节点
function $(idName){
return document.getElementById(idName);
}
//根据class属性获取元素节点列表
function $sckGetElementByClassName(className){
return document.getElementByClassName(className);
}
//根据属性名获取元素节点列表
function $sckGetElementByTagName(tagName){
return document.getElementsByTagName(tagName);
}
//根据name属性获取元素节点列表
function $sckGetElementByName(name){
return document.getElementsByName(name);
}
//随机颜色
function randomColor(){
//rgb(255,255,255)
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
// "#ffffff"
}
//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
if(obj.currentStyle){
//IE
return obj.currentStyle[at];
}else{
return window.getComputedStyle(obj,null)[at];
}
}
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 什么是正则表达式?
* 要检索某个文本的时候，可以使用一种模式对这个文本的内容进行解析，这个模式可以是一个单独的字符，也可以是一系列复杂的字符，可以实现对文本内容的解析、校验、替换等功能。RegExp是正则表达式的缩写。
*
* 为什么要用正则表达式？
* 前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻。
*
* 假设用户需要在HTML表单中填写姓名、地址、出生日期等，那么在将表单提交到服务器进一步处理前，JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的
*/
</script>
</body>
</html>
创建正则表达式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建正则表达式对象</title>
</head>
<body>
<script type="text/javascript">
//构造函数法
//new RegExp("模式", "模式修饰词")
//模式：匹配文本的规则
//模式修饰符：用来修饰模式用的，有"g" 和 "i"
// "g"表示全局匹配，"i"表示忽略字母的大小写
//注意：第二个参数，模式修饰符，是可选参数。
var pattern1 = new RegExp("good");
var pattern2 = new RegExp("good", "gi");
//字面量法
var pattern3 = /box/;
var pattern3 = /box/gi;
</script>
</body>
</html>
RegExp的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp的方法</title>
</head>
<body>
<script type="text/javascript">
var str = "sunck is a good Good good man";
var parrent = new RegExp("good", "gi");
//1、test()
//方法：查找字符串是否存在正则表达式所写的模式规则
//返回值：布尔值，true表示找到符合，false表示没找到
//注意：这个方法只要找到匹配模式中的规则，就立即返回true，就不会再往下找了，所以这个方法用“全局模式匹配”没用
//var ret1 = parrent.test(str);
//console.log(ret1);
//2、exec()
//方法：查找字符串是否存在正则表达式所描述的模式规则
//返回值：数组或者null，存在的话返回的是数组，数组中的第一个元素就是符合要求的字符串，不存在则返回null
var ret2 = parrent.exec(str);
//通过instanceof运算符可以对通过构造函数创建出来的对象进行类型判断
console.log(ret2 instanceof Array);
console.log(ret2);
ret2 = parrent.exec(str);
console.log(ret2);
ret2 = parrent.exec(str);
console.log(ret2);
ret2 = parrent.exec(str);
console.log(ret2);
ret2 = parrent.exec(str);
console.log(ret2);
/*
由以上代码可以总结出：
如果正则表达式的模式修饰符写成"g"，exec()的工作原理：找到第一个匹配的字符串，并存储它所在的位置（下标），如果再次运行exec()检索同一个字符串的话，则从刚才存储的位置开始检索，并找到下一个匹配到的字符串，然后把该字符串的位置存储起来，以此类推。当检索到结果为null的时候，下一次在调用exec()方法时，会从头开始。
注意：使用test()方法检索同一个字符串的话，也会对位置进行存储，所以当test()和exec()方法混合使用的时候，要注意。
如果正则表达式的模式修饰符没有用"g"，则每次都是从头开始查找，返回的是第一次查找到的位置。
*/
//3、compile()
//方法：用于修改正则表达式模式的方法，也可以修改模式修饰符(可选)。
parrent.compile("nice");
console.log(parrent.test(str));
</script>
</body>
</html>
String类型中的正则表达式的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String类型中的正则表达式的应用</title>
</head>
<body>
<script type="text/javascript">
//1、字符串.match(正则表达式对象)
//返回值是数组(这个是数组和我们传统常见的那个数组是一摸一样的) 或者 null
var str1 = "sunck is a good Good good man";
var ret1 = str1.match(/good/gi);
console.log(ret1);
console.log(ret1.length);
//2、字符串.search(正则表达式对象)
//功能：查找子串
//返回值：返回字符串中匹配到的下标 或 -1(没有匹配到的情形)
//全局无用
var str2 = "sunck is a good Good good man";
var ret2 = str2.search(/good/i);
console.log(ret2);
console.log(str2.search(/nice/i));
//3、字符串.replace(被替换的字符串或正则表达式, 新的字符串)
var str3 = "sunck is a good Good good man";
var ret3 = str3.replace(/good/gi, "nice");
console.log(ret3);
//4、字符串.split(要切割的字符串或正则表达式)
var str4 = "sunck is a good Good good man";
var ret4 = str4.split(/good/gi);
console.log(ret4);
</script>
</body>
</html>
碰撞检测V1(边界)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰撞检测V1(边界)</title>
<style type="text/css">
#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
#boll{width: 50px;height: 50px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div id="box">
<div id="boll"></div>
</div>
<script type="text/javascript">
var jsBoxDiv = document.getElementById("box");
var jsBollDiv = document.getElementById("boll");
var speedX = 5;
var speedY = 2;
var timer = setInterval(function(){
if (jsBollDiv.offsetLeft + jsBollDiv.offsetWidth >= jsBoxDiv.offsetWidth || jsBollDiv.offsetLeft < 0 ) {
speedX *= -1;
}
if (jsBollDiv.offsetTop + jsBollDiv.offsetHeight >= jsBoxDiv.offsetHeight || jsBollDiv.offsetTop < 0) {
speedY *= -1;
}
jsBollDiv.style.left = jsBollDiv.offsetLeft + speedX + "px";
jsBollDiv.style.top = jsBollDiv.offsetTop + speedY + "px";
}, 10);
</script>
</body>
</html>
正则表达式的元字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式的元字符</title>
</head>
<body>
<script type="text/javascript">
/*转义字符
* \ 转义字符,将下一个字符转换成为一个特殊字符或一个原义字符
*
* 例如'n'匹配原义字符"n"。'\n'匹配特殊字符换行符;
* "[]"匹配特殊字符[],而"\[\]"则匹配原义字符"[]"。
*
* '\' 这个字符很特殊，在字符串也需要转义。用'\\'表示。
*/
console.log("sunck \n sunck");
console.log("sunck \[\] sunck");
console.log("sunck \\ sunck");
/**匹配单个字符与数字
*
* . 匹配除换行符外的任意字符
* [a-z0-9] []是字符集合，表示匹配方括号中所包含的任意一个字符, -表示字符范围。匹配指定范围内的任意一个字符. 这里表示匹配a到z或0到9(即所有的小写字母或数字)中的任意一个字符 注意!!!!是一个字符!
* [^a-z0-9] []中的^(脱字符)表示非,这里表示匹配除了a-z和0-9(即除了所有的小写字母或数字)以外的任意一个字符
* \d 匹配数字,效果同[0-9]
* \D 匹配非数字,效果同[^0-9]
* \w 匹配数字,字母,下划线,效果同[0-9a-zA-Z_]
* \W 匹配非数字,字母,下划线,效果同[^0-9a-zA-Z_]
* \s 匹配任何空白字符，包括空格、换页符、换行符、回车符、制表符等等。等价于[ \f\n\r\t]。
* \S 匹配非空字符,等价于[^ \f\n\r\t]
*/
var str1 = "$sunck is a good manaABC";
//匹配 数字、字母中的任意一个和ABC
parrent = /[a-z0-9A-Z]ABC/;
console.log(parrent.test(str1));
//匹配 数字、空白符中的任意一个
parrent = /[\d\s]/;
console.log(parrent.test(str1));
console.log("*****");
/**锚字符
* ^ 行首匹配 和 在[]字符集和中的 ^ 不是一个意思。
* $ 行尾匹配
*/
var str2 = "sunck is a good man!aABC";
//首字母不能是数字
parrent = /^\D/;
console.log(parrent.test(str2));
//首字母必须是数字
parrent = /^\d/;
//必须以字母结尾
parrent = /[a-zA-Z]$/;
console.log(parrent.test(str2));
/**匹配多个字符
* 说明：以下的x,y,z均为假设的普通字符,不是正则表达式元字符
* (xyz) 匹配括号内的xyz(作为一组整体去匹配)
* x? 匹配0个或1个x
* x* 匹配0个或者任意多个x 延伸: .* 表示匹配0个或者任意多个任意字符(除换行符以外)
* x+ 匹配至少一个x
* x{n} 匹配确定的n个x (n是一个非负整数) 注意：是连续的
* x{n,} 匹配至少n个x (n是一个非负整数) 注意：是连续的
* x{n,m} 匹配至少n个,最多m个x (n,m是非负整数,n<=m) 注意：是连续的
* x|y |表示或 ,这里指匹配x或y
*/
console.log("**************");
var str3 = "sunck is a good good good man!";
//匹配2-4个good
parrent = /(good){2,4}/;
console.log(parrent.test(str3));
//匹配 sunck或kaige或kaishen
parrent = /sunck|kaige|kaishen/i;
console.log(parrent.test(str3));
</script>
</body>
</html>
常用的正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的正则表达式</title>
</head>
<body>
<script type="text/javascript">
//1、检查邮政编码
//共6位数字
pattern = /^[\d]{6}$/;
console.log(pattern.test("223300"));
//2、检查文件压缩包
pattern = /^[\w]+\.zip$|rar$|gz$/;
console.log(pattern.test("sunck.zip"));
//3、删除多余空格
//g 必须全局，才能全部匹配
pattern = /\s/g;
var str1 = "sunck is a good man";
var str2 = str1.replace(pattern, "");
console.log("str2 = " + str2);
//4、删除开始和结尾的空格
var str3 = " sunck is a good man ";
pattern = /^\s+/;
var str4 = str3.replace(pattern, "");
console.log("str4 = " + str4 + "!");
pattern = /\s+$/;
var str5 = str4.replace(pattern, "");
console.log("str5 = " + str5 + "!");
//5、简单的电子邮件验证163邮箱
parrent = /^[a-zA-Z_]\w*@163.com$/
console.log(parrent.test("sunck@163.com"));
</script>
</body>
</html>
碰撞检测V2(矩形)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰撞检测V2(矩形)</title>
<style type="text/css">
*{margin: 0;padding: 0}
#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
#rectangle1{width: 50px;height: 50px;background-color: red;left: 100px;top: 100px;position: absolute;}
#rectangle2{width: 50px;height: 50px;background-color: yellow;left: 200px;top: 200px;position: absolute;}
</style>
</head>
<body>
<div id="box">
<div id="rectangle1"></div>
<div id="rectangle2"></div>
</div>
<script type="text/javascript">
//添加拖动
var rectangles = document.querySelectorAll('#box>div');
for (var i = 0; i < rectangles.length; i++) {
rectangles[i].onmousedown = function(e){
var evt = e || window.event;
var disx = evt.clientX - this.offsetLeft;
var disy = evt.clientY - this.offsetTop;
var self = this;
document.onmousemove = function(e){
var ev = e || window.event;
var x = ev.clientX - disx;
var y = ev.clientY - disy;
self.style.left = x + "px";
self.style.top = y + "px";
//检测是否发生碰撞
pzjcFunc(rectangles[0], rectangles[1]);
};
// return false;
};
}
document.onmouseup = function(){
document.onmousemove = document.onmousedown = null;
};
//检测是否发生碰撞的方法
function pzjcFunc(obj1, obj2){
var obj1Left = obj1.offsetLeft;
var obj1Width = obj1Left + obj1.offsetWidth;
var obj1Top = obj1.offsetTop;
var obj1Height = obj1Top + obj1.offsetHeight;
var obj2Left = obj2.offsetLeft;
var obj2Width = obj2Left + obj2.offsetWidth;
var obj2Top = obj2.offsetTop;
var obj2Height = obj2Top + obj2.offsetHeight;
if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
obj1.style.backgroundColor = "black";
} else {
obj1.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
碰撞检测V3(圆形)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰撞检测V3(圆形)</title>
<style type="text/css">
*{margin: 0;padding: 0}
#box{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
#rectangle1{width: 50px;height: 50px;background-color: red;left: 100px;top: 100px;position: absolute;border-radius: 50%;}
#rectangle2{width: 50px;height: 50px;background-color: yellow;left: 200px;top: 200px;position: absolute;border-radius: 50%;}
</style>
</head>
<body>
<div id="box">
<div id="rectangle1"></div>
<div id="rectangle2"></div>
</div>
<script type="text/javascript">
//添加拖动
var rectangles = document.querySelectorAll('#box>div');
for (var i = 0; i < rectangles.length; i++) {
rectangles[i].onmousedown = function(e){
var evt = e || window.event;
var disx = evt.clientX - this.offsetLeft;
var disy = evt.clientY - this.offsetTop;
var self = this;
document.onmousemove = function(e){
var ev = e || window.event;
var x = ev.clientX - disx;
var y = ev.clientY - disy;
self.style.left = x + "px";
self.style.top = y + "px";
//检测是否发生碰撞
pzjcFunc(rectangles[0], rectangles[1]);
};
// return false;
};
}
document.onmouseup = function(){
document.onmousemove = document.onmousedown = null;
};
//检测是否发生碰撞的方法
function pzjcFunc(obj1, obj2) {
//第一个圆形的圆心点坐标
var obj1x = obj1.offsetLeft + obj1.offsetWidth / 2;
var obj1y = obj1.offsetTop + obj1.offsetHeight / 2;
//第二个圆形的圆心点坐标
var obj2x = obj2.offsetLeft + obj2.offsetWidth / 2;
var obj2y = obj2.offsetTop + obj2.offsetHeight / 2;
//求两个圆的圆心距
var le = Math.sqrt((obj1x - obj2x) * (obj1x - obj2x) + (obj1y - obj2y) * (obj1y - obj2y));
//var le = Math.sqrt((obj2x - obj1x) * (obj2x - obj1x) + (obj2y - obj1y) * (obj2y - obj1y));
if (le <= (obj1.offsetWidth / 2 + obj2.offsetWidth / 2)) {
obj1.style.backgroundColor = "black";
} else {
obj1.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
