12、正则表达式对象
定义：正则表达式是规则，是让计算机能够读懂的人类制定的规则
var reg = /规则/;或者 var reg = new RegExp("规则");
正则：
g==>global全局
i==>ignore 忽略大小写
^==>标识 开始位置
$==>标识 结尾
量词：
*：任意次数，
+：至少一次，
？：0次或一次 ，
{n}：n次,n是一个正整数
{n,m}：至少n次，至多m次，n<m,n和m都是正整数
{n,}：至少n次,n是一个正整数
例：var str = "2a3,3A45,3A43,fad,3a4,342";
（1）、分隔
//以3为分界线
var arr = str.split("3");
//输出每一个被3分隔的字符串
for(var i=0; i<arr.length; i++) {
document.write(arr[i]);
document.write("<br>");
}
（2）、替换
//这里将，号替换成| 这里只替换匹配到的第一个
var s = str.replace(",", "|");
//返回新的字符串 12a3|3A45,3A43,fad,3a4,342
document.write(s);
document.write("<br>");
//这里将所有找到的a 不区分大小写 都换成|
var reg=new RegExp("a","gi")
var s1=str.replace(reg,"|");
//var s1=str.replace(/a/gi,"|"); //这个实现的功能相同
//12|3,3|45,3|43,f|d,3|4,342
document.write(s1)
document.write("<br>");
（3）、抓取对应的字符串
var str1="w34r384hugw949843hg37rdfhasi723hhiay29";
//这里匹配 小写子母 和大写子母
var numarr=str1.match(/[a-zA-Z]+/g);
//w,r,hugw,hg,rdfhasi,hhiay
document.write(numarr);
（4）、验证表达式对象，数据
var temp = "2372H";
//这里匹配的是纯数字
var r = /^d+$/;
//bol返回的是布尔值 因为字符串中带有H 所以不是纯数字 因此返回false
var bol = r.test(temp);
alert(bol);
练习12-1：javascipt验证邮箱
HTML代码
js验证邮箱： <input type="text" id="input1" /> <input type="button" id="btn1" value="验证"/>
JavaScipt代码
//var btn=document.getElementById("btn1"); var btn =document.getElementById("input1"); btn.onblur=function(){ var obj=document.getElementById("input1"); //拿到输入框的值 var str=this.value; //创建正则表达式对象 var reg=new RegExp(); //对对象赋值 var reg = /^[a-zA-Z0-9]{6,11}@(sina.cn|126.com|163.com|qq.com)$/; //测试输入的字符串str是否符合正则表达式 if(reg.test(str)){ alert("通过"); } else{ this.style.border="1px solid red"; alert("输入有误"); } }; var dd=document.getElementById("input1"); //鼠标焦点事件 当鼠标焦点在框中就 dd.onfocus=function(){ this.style.border="none"; }
13、窗体对象
提示框confirm
//confirm("提示内容"); 返回Boolean，若点击“确定”，返回true，否则返回flase var f = window.confirm("今天下雨没?"); if(f) { alert("点击了确定"); }else { alert("点击了取消"); }
定时器
每隔一段时间执行的方法
语法： window.setInterval("执行的代码"/"函数名称","时间间隔【毫秒为单位】")
延迟执行
语法：window.setTimeout("可执行的代码"|"函数名","时间【毫秒】");
注意：定时器多次执行，延迟执行只执行一次。
练习13-1：按钮实现时间的暂停和开始
HMTL代码
<input type="button" id="btn1" value="按钮"/> <div id="div1"></div> <input type="button" id="btn2" value="暂停"/> <input type="button" id="btn3" value="开始"/>
JavaScript代码
//定义定时器对象 var inId = window.setInterval(timer, 1000); //定时器函数、 function time() { //定义日期对象 var date = new Date(); //拿到div块元素 var dd = document.getElementById("div1"); //输出日期字符串 dd.innerHTML = date.toString(); } //暂停按钮事件 var bt2 = document.getElementById("btn2"); bt2.onclick = function() { //清除定时器 里面要放入定时器对象 window调用定时器 window.clearInterval(inId); }; //开始按钮绑定事件 var bt3=document.getElementById("btn3"); bt3.onclick = function() { inId = window.setInterval(timer, 1000); };
练习13-2：时间倒数，自动跳转
HTML代码
<div id="div2">5秒以后，跳转至百度首页</div>
JavaScript代码
var timeobj=setInterval(fn2,1000); function fn2() { var d2 = document.getElementById("div2"); //取出div2中的内容 var h = d2.innerHTML; //取到内容中的数字 var n = parseInt(h); //对数字进行减一操作 n--; //div块中内容进行输出，这里是字符串进行拼接 substring 是从1开始向后所有进行截取 d2.innerHTML = n + h.substring(1); //当n=0时，结束定时器 if(n==0) { clearInterval(timeobj); //跳转到百度页面 window.location.href="http://www.baidu.com"; } }
练习13-3：颜色方块从左到右自动移动
HTML代码
<ul> <li class="red"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div style="clear: both;"> <input type="button" value="暂停" id="btn1" /> <input type="button" value="继续" id="btn2" /> </div>
CSS代码
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul>li{
float: left;
50px;
height: 50px;
border: 5px solid black;
background-color: dodgerblue;
margin: 50px 20px;
}
.red{
background-color: red;
}
JavaScript代码
var objid=setInterval(fn,500); function fn(){ var lis=document.getElementsByTagName("li"); //设置方块的索引 var index = 0; for(var i=0; i<lis.length; i++) { //如果当前块的类名是red if(lis[i].className = "red") { index = i; //将类名值设置为空 lis[i].className = ""; } } //跳转到下一个块 index++; //当index加到最大长度 返回最初位置 if(index==lis.length) { index=0; } lis[index].className = "red"; } //暂停定时器 var bt1 = document.getElementById("btn1"); bt1.onclick=function(){ clearInterval(objid); }; //从新开始定时器 var bt2 = document.getElementById("btn2"); bt2.onclick=function(){ objid=setInterval(fn,500); };
练习13-4：图片轮播，有开始、暂停、上一张、下一张、继续按钮
HTML代码
<div id="div1"> <img src="img/Chrysanthemum.jpg" height="500" width="500"> <ul>
//给每个块添加图片 <li><img src="img/Chrysanthemum.jpg" height="80" width="80" class="bored" /></li> <li><img src="img/Desert.jpg" height="80" width="80" /></li> <li><img src="img/Hydrangeas.jpg" height="80" width="80" /></li> <li><img src="img/Jellyfish.jpg" height="80" width="80" /></li> <li><img src="img/Koala.jpg" height="80" width="80" /></li> <li><img src="img/Lighthouse.jpg" height="80" width="80" /></li> <li><img src="img/Penguins.jpg" height="80" width="80" /></li> <li><img src="img/Tulips.jpg" height="80" width="80" /></li> </ul> <div style="clear: both;"> <input type="button" id="btn1" value="开始" /> <input type="button" id="btn2" value="暂停" /> <input type="button" id="btn3" value="继续" /> <input type="button" id="btn4" value="下一张" /> <input type="button" id="btn5" value="上一张" /> </div> </div>
CSS代码
* { padding: 0; margin: 0; } #div1 { width: 800px; height: 700px; text-align: center; margin: 0 auto; } ul>li { list-style: none; float: left; margin-left: 10px; } li>img { border: 3px solid black; } .bored { border: 3px solid red; }
JavaScript代码
var objid = null; var index = 0; //得到所有img标签 var imgs = document.querySelectorAll("li>img"); var bt1 = document.getElementById("btn1"); bt1.onclick = function() { //判断定时对象是否清空 if(objid == null) { objid = setInterval(fn, 2000); } }; function fn() { for (var i=0; i<imgs.length; i++) { if(imgs[i].className == "bored") { index = i; imgs[i].className = ""; break; } } index++; if(index>=imgs.length){ index=0; } //下面框框跟着改变 imgs[index].className="bored"; //获取显示区域的对象 var simg=document.querySelector("#div1>img"); //将li块中的路径赋值给显示区域中 simg.src=imgs[index].src; } //按钮二暂停事件 var bt2=document.getElementById("btn2"); bt2.onclick=function(){ clearInterval(objid); //清空定时对象 objid=null; }; //继续按钮事件 var bt3=document.getElementById("btn3"); bt3.onclick=function(){ if(objid==null){ //重新启动定时器 objid=setInterval(fn,2000); } }; //下一张点击事件 var bt4=document.getElementById("btn4"); bt4.onclick=function(){ //取消定时 clearInterval(objid); objid=null; var temp =document.querySelector(".bored"); temp.className=""; index++; if(index>=imgs.length){ index=0; } imgs[index].className="bored"; var simg=document.querySelector("#div1>img"); simg.src=imgs[index].src; }; //上一张点击事件 var bt5=document.getElementById("btn5"); bt5.onclick=function(){ clearInterval(objid); objid=null; var temp =document.querySelector(".bored"); temp.className=""; index--; if(index<0){ index=imgs.length-1; } imgs[index].className="bored"; var simg=document.querySelector("#div1>img"); simg.src=imgs[index].src; };
