| 二、（9）JavaScript常见交互效果 | 您所在的位置：网站首页 › 交互案例有哪些 › 二、（9）JavaScript常见交互效果 |
二、（9）JavaScript常见交互效果
|
JavaScript-交互效果 返回顶部效果：
正则表达式：是一种字符串中查找、替换、拆分、数据匹配的模式。 正则表达式的定义1.字面量方式（常用）： var reg=/正则表达式规则/修饰符;2.实例化方式: var reg=new RegExp("正则表达式","修饰符"); 3.修饰符： i 不区分大小写 m 多行匹配，如果在一行找不到就继续找下一行直到结束 g 全局匹配，找到一个继续找下一个4.正则表达式的使用 1）正则表达式对象方法： 正则表达式.test(字符串) //测试字符串中是否能找到正则表达式匹配结果，返回真或假 正则表达式.exec(字符串) // 匹配出字符串和正则表达式的子字符串 2）字符串对象方法： 字符串.match(正则表达式) //匹配字符串 字符串.replace(正则表达式,""**) // 替换匹配到的字符 字符串.split(正则表达式) //将正则表达式匹配到的字符作为拆分间隔符 案例： DOCTYPE html> Title /** * 正则表达式：是一种字符串中查找、替换、拆分、数据匹配的模式 * 正则表达式的定义： * 1.字面量方式（常用）： * var reg=/正则表达式规则/修饰符; * * 2.实例化方式: * var reg=new RegExp("正则表达式","修饰符"); * * 3.修饰符： * i 不区分大小写 * m 多行匹配，如果在一行找不到就继续找下一行直到结束 * g 全局匹配，找到一个继续找下一个 * * 4.正则表达式的使用： * 1）正则表达式对象方法： * 正则表达式.test(字符串) //测试字符串中是否能找到正则表达式匹配结果，返回真或假 * 正则表达式.exec(字符串) // 匹配出字符串和正则表达式的子字符串 * 2）字符串对象方法： * 字符串.match(正则表达式) //匹配字符串 * 字符串.replace(正则表达式,""**) // 替换匹配到的字符 * 字符串.split(正则表达式) //将正则表达式匹配到的字符作为拆分间隔符 */ var str="姓名：张三，年龄：90，电话：13900000000，爱好：打篮球。姓名：李四，电话：15912341234"; //字面量方式 var reg=/[0-9]{11}/g; console.log(str.match(reg)); //实例化方式 var reg1=new RegExp("[0-9]{11}","g"); //对象方法 console.log(reg.test(str));//test console.log(reg.exec(str));//exec console.log(str.match(reg1));//匹配字符串 console.log(str.replace(reg,"***"));//字符串替换 console.log(str.split(reg));//以XX作为间隔拆分 正则表达式的编写正则表达式的编写：三段式：字符+数量+匹配模式 1.匹配字符 [0-9] 匹配到括号中出现的所有字符(0123456789) [a-z] 小写字母 [A-Z] 大写字母 [A-z] 不区分大小写 \d 匹配数字，相当于[0-9] \D 匹配非数字，除数字以外的所有字符 \w 匹配单词字符，相当于[0-9A-z] \W 匹配非单词字符 \t 匹配table键（缩进符） \r 匹配回车符 \n 匹配换行符 . 匹配除换行以外的所有字符 ^ 字符串开始 $ 字符串结束2.数量 * 前面匹配的字符出现0次或多次 + 前面匹配的字符出现1次或多次 {n} 字符出现n次 {n,m} n Title /* 正则表达式的编写： 三段式：字符+数量+匹配模式 1.匹配字符 [0-9] 匹配到括号中出现的所有字符(0123456789) [a-z] 小写字母 [A-Z] 大写字母 [A-z] 不区分大小写 \d 匹配数字，相当于[0-9] \D 匹配非数字，除数字以外的所有字符 \w 匹配单词字符，相当于[0-9A-z] \W 匹配非单词字符 \t 匹配table键（缩进符） \r 匹配回车符 \n 匹配换行符 . 匹配除换行以外的所有字符 ^ 字符串开始 $ 字符串结束 2.数量 * 前面匹配的字符出现0次或多次 + 前面匹配的字符出现1次或多次 {n} 字符出现n次 {n,m} nDOCTYPE html> Title span{ font-size: 12px; margin-left: 10px; } .red{color: #f00;} .green{color: #0a0;} 账号： 手机： 密码： 验证码： 注册 /** * 失去焦点时做客户端验证，验证用户名，密码，手机号，验证码是否符合格式要求 * 用户名;2字以上，12字以下 * 手机号11位数字,1开头 * 密码：6个字以上，16个字以下，由字母数字下划线组成 * 验证码6位 */ //定义一个全局状态对象，用于保存验证状态 var checkstate={username:0,phone:0,pad:0,captcha:0}; //用户名验证 username.onblur=function () { var reg=/^\w{2,12}$/;//正则表达式 if (reg.test(this.value)){ this.style.border="2px solid #0a0"; usernameinfo.innerHTML="恭喜你，用户名可用！" usernameinfo.className="green"; checkstate.username=1;//通过用户名验证时，将状态修改为1，表示已通过 }else{ this.style.border="2px solid #f00"; usernameinfo.innerHTML="用户名不合法！" usernameinfo.className="red"; checkstate.username=0;//未通过验证，将状态修改为0 } } //手机号验证 phone.onblur=function () { var reg=/^1[356789]\d{9}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.phone=1; }else{ this.style.border="2px solid #f00"; checkstate.phone=0; } } //密码验证 pad.onblur=function () { var reg=/^[A-z0-9_]{6,16}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.pad=1; }else{ this.style.border="2px solid #f00"; checkstate.pad=0; } } //验证码 captcha.onblur=function () { var reg=/^\d{6}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.captcha=1; }else{ this.style.border="2px solid #f00"; checkstate.captcha=0; } } //提交按钮，再次验证所有表单信息是否合法 myform.onsubmit=function () { //遍历checkstate状态信息 var flag=true; for (var i in checkstate){ if (checkstate[i]===0){ var obj = document.getElementById(i); obj.style.border="2px solid #f00"; // alert("不能提交，有输入未通过验证！"); flag=false; } } return flag; } Tab滑动菜单效果效果：
代码： DOCTYPE html> Title .btns a{ background: #dddddd; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: #333333; } .btns>a:hover,.btns a.on{ background: red; color: #ffffff; } .box{padding-top: 10px} .box>div{ width: 400px; height: 200px; display: none; } #box1{background: red; display: block;} #box2{background: #00A7EA;} #box3{background: #00aa00;} 企业文化 团队介绍 大事记 content content content //选项卡效果：移动到按钮上显示对应的盒子，切换按钮样式 //1.移动到按钮上 var btns = document.querySelectorAll(".btns a"); var box = document.querySelectorAll(".box div"); for (var i=0;iDOCTYPE html> Title .banner{ width: 1000px; height: 400px; margin: 0 auto; position: relative; } #imgs>img{ width: 1000px; height:400px; display: none; } #imgs>img:first-child{ display: block; } #btns{ position: absolute; top: 350px; width: 100%; text-align: center; } #btns>a{ display: inline-block;/*行内块*/ background: #c2c2c2; border-radius: 100%; width: 16px; height:16px; text-indent: -9999px;/*字符缩进，把文字移走隐藏*/ } #btns>a.on{background: red;} 0 1 2 3 /* 轮播图： 1.移动到某个按钮时，显示对应的图 2.让四个图3秒定时滚动 */ var a = btns.children;//得到所有的元素 var img=imgs.children;//得到所有图片 //批量绑定事件 for (var i=0;iDOCTYPE html> Title ul { margin: 0; padding: 0; list-style: none; } .banner { width: 1000px; height: 400px; margin: 0 auto; overflow: hidden; position: relative; } #imgs > li { float: left; } #btns { position: absolute; top: 350px; width: 100%; text-align: center; } #btns > a { display: inline-block; background: #c2c2c2; width: 16px; height: 16px; border-radius: 100%; margin: 0 4px; text-indent: -9999px; } #btns > a.on { background: red; } var img = imgs.children; //根据图片的数量自动生成对应的按钮 var html = ""; for (var i = 0; i = 1000) { clearInterval(timer1); } if (n>0){ var start=-(btn[n].index-1); }else { var start=-(btn.index-1); } imgs.style.marginLeft = (start * 1000 - i) + "px"; i += 50; }, 20); } 作业1. 完成上课演示的三个交互效果 2. 制作一个二级下拉菜单（移到顶级菜单时显示子菜单） 3. 制作一个企业网站，练习HTML和CSS，要做界面交互效果 基础版：只做回到顶部交互 挑战版：完成所有交互效果，如：轮播图、选项卡、回到顶部等 |
【本文地址】
公司简介
联系我们