javascript网页特效——文本输入框和下拉菜单特效
来源：互联网 发布：java检查链表是否有环 编辑：程序博客网 时间：2024/06/10 22:37
实例一：让文本框只带有下划线
<script type="text/javascript"> function changeTextStyle(){ //让文本框只带有下划线 //获得文本框的DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //设置边框颜色 myText.style.borderStyle = 'solid'; //设置边框样式为实线 myText.style.borderWidth = '0 0 1px 0'; //设置边框大小，0代表无 }</script>实例二：首字母或全部字母大写
<script type="text/javascript"> //格式校验 function validateInput(){ //获得文本框的DOM var myText1 = document.getElementById("myText1"); var myText2 = document.getElementById("myText2"); var val1 = myText1.value; //文本框1的值 var val2 = myText2.value; //文本框2的值 var errMsg = ''; //定义错误提示字符 //判断是否以大写字母开头 if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){ //拼接错误字符 errMsg = '文本框1的首字母需要大写\n'; alert(errMsg); } if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){ //拼接错误字符 errMsg = '文本框2的需要全部为大写字母\n'; alert(errMsg); } }</script>实例三：只能输入数字的文本框
<script type="text/javascript"> //格式校验 function validateInput(){ //获得文本框的DOM var myText = document.getElementById("myText"); var val = myText.value; //获取用户输入的值 if(!/\b[0-9]+\b/.test(val)){ //使用正则校验 alert('只能输入数字'); //提示错误信息 } }</script>实例四：用正则表达式验证Email格式
<script type="text/javascript"> //格式校验 function validateInput(){ //获得文本框的DOM var myText = document.getElementById("myText"); var email = myText.value; //获得用户输入的Email //定义正则表达式 var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; if(emailReg.test(email)){ //判断是否符合格式要求 alert("校验通过，允许提交"); //通过 }else{ alert("校验失败，请检查重新输入"); //验证失败 } }</script>实例五：成为焦点时清除文本框内容
<script type="text/javascript"> //清楚内容 function clearContent(myText){ myText.value = ''; //把文本内容的值设为空字符 }</script><input type="text" value="" onfocus="clearContent(this)"/>实例六：用户输入完以后立刻进行格式校验
<script type="text/javascript"> function validateTel(){ //格式校验 //获得文本框的DOM var myTel = document.getElementById("myTel"); var val = myTel.value; //获取用户输入的值 if(!/\b[0-9]+\b/.test(val)){ //使用正则校验 alert('只能输入数字'); //提示错误信息 //修改样式，引起注意 myTel.style.border = '1px solid red'; }else if(val.length != 11){ //长度必须是11位 alert('手机号码是11位'); //提示错误信息 //修改样式，引起注意 myTel.style.border = '1px solid red'; }else{ //修改样式，表示通过了 myTel.style.border = '1px solid green'; return true; } }</script><input type="text" value="" id="myTel" onblur="validateTel()"/>实例七：联动的省市下拉菜单
onchange 事件会在域的内容改变时发生。
<script type="text/javascript"> var arr = new Array(); //数据数组 //定义数据，结构为：id、名字、父id arr[arr.length] = [1, '北京市', null]; arr[arr.length] = [2, '四川省', null]; arr[arr.length] = [3, '广东省', null]; arr[arr.length] = [4, '北京市', 1]; arr[arr.length] = [5, '成都市', 2]; arr[arr.length] = [6, '广州市', 3]; arr[arr.length] = [7, '深圳市', 3]; //动态设置下拉项目 function fillOptions(type){ if(type == 'province'){ //获取省份下拉菜单的DOM var province = document.getElementById("province"); province.innerHTML = ''; //内容先置空 //填充省的字符 var proStr = '<option value=""></option>'; //遍历数组 for(var i=0; i<arr.length; i++){ var item = arr[i]; //当前项 //如果没有父id，则是省份 if(item[2] == null) proStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } province.innerHTML = proStr;//填充新内容 }else if(type == 'city'){ //获取当前的省份的id var currProId = document.getElementById("province").value; if(currProId == '') return false; //获取城市下拉菜单的DOM var city = document.getElementById("city"); city.innerHTML = ''; //内容先置空 //填充市的字符 var cityStr = '<option value=""></option>'; //遍历数组 for(var i=0; i<arr.length; i++){ var item = arr[i]; //当前项 //判断是否为当前省下的城市 if(item[2] == currProId) cityStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } city.innerHTML = cityStr ;//填充新内容 } } </script><body style="text-align:center;" onload="fillOptions('province');"> <!-- 定义下拉菜单 --> 省：<select id="province" onchange="fillOptions('city')"></select><br/><br/> 市：<select id="city"></select><br/><br/> </body>实例八：三级联动的省市县下拉菜单
<script type="text/javascript"> var arr = new Array(); //数据数组 //定义数据，结构为：id、名字、父id arr[arr.length] = [1, '北京市', null]; arr[arr.length] = [2, '四川省', null]; arr[arr.length] = [3, '广东省', null]; arr[arr.length] = [4, '北京市', 1]; arr[arr.length] = [5, '成都市', 2]; arr[arr.length] = [6, '广州市', 3]; arr[arr.length] = [7, '深圳市', 3]; arr[arr.length] = [8, '武侯区', 5]; arr[arr.length] = [9, '青羊区', 5]; arr[arr.length] = [10, '白云区', 6]; arr[arr.length] = [11, '增城市', 6]; arr[arr.length] = [12, '从化市', 6]; //动态设置下拉项目 function fillOptions(type){ if(type == 'province'){ //获取省份下拉菜单的DOM var province = document.getElementById("province"); province.innerHTML = ''; //内容先置空 //填充省的字符 var proStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //遍历数组 var item = arr[i]; //当前项 //如果没有父id，则是省份 if(item[2] == null) proStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } province.innerHTML = proStr; //填充新内容 }else if(type == 'city'){ //获取当前的省份的id var currProId = document.getElementById("province").value; if(currProId == '') return false; //获取城市下拉菜单的DOM var city = document.getElementById("city"); city.innerHTML = ''; //内容先置空 //填充市的字符 var cityStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //遍历数组 var item = arr[i]; //当前项 //判断是否为当前省下的城市 if(item[2] == currProId) cityStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } city.innerHTML = cityStr ;//填充新内容 }else if(type == 'area'){ //获取当前城市的id var currCityId = document.getElementById("city").value; if(currCityId == '') return false; //获取区县下拉菜单的DOM var area = document.getElementById("area"); area.innerHTML = ''; //内容先置空 //填充区县的字符 var areaStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //遍历数组 var item = arr[i]; //当前项 //判断是否为当前城市下的区县 if(item[2] == currCityId) areaStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } area.innerHTML = areaStr; //填充新内容 } }</script><body style="text-align:center;" onload="fillOptions('province');"> <!-- 定义下拉菜单 --> 省：<select id="province" onchange="fillOptions('city')"></select><br/><br/> 市：<select id="city" onchange="fillOptions('area')"></select><br/><br/> 县/区：<select id="area"></select><br/><br/></body>实例九：输入文字时文本框边框闪烁
onfocus()和onblur()最好成对编写！
<script type="text/javascript"> //初始化函数 function init(){ //获取所有的文本DOM var texts = document.getElementsByTagName('input'); //遍历所有的文本框 for(var i=0;i<texts.length;i++){ var t = texts[i];//当前文本框 var timer; //监听聚焦事件 t.onfocus = function(){ var e = this;//保留当前DOM的引用 //开始闪烁的定时器 timer = setInterval(function(){ //获取当前的边框颜色变量 var c = e.style.borderColor; if(c == 'yellow'){//如果是黄色 e.style.borderColor = '';//恢复原色 }else{//否则，边框变成黄色 e.style.borderColor = 'yellow'; } },1000);//每1秒闪烁一次 }; t.onblur = function(){//监听离开事件 //恢复边框颜色 t.style.borderColor = ''; clearInterval(timer);//清除定时器 } } }</script><body style="text-align:center;" onload="init();"> 2 0
- javascript网页特效——文本输入框和下拉菜单特效
- javascript网页特效——导航菜单
- javascript网页特效——鼠标特效
- javascript网页特效——按钮特效
- javascript网页特效——链接特效
- 25个下拉网页菜单特效Javascript脚本
- 文本特效(输入框)demo
- javascript网页特效——setTimeout和setInterval
- javascript网页特效——showModalDialog和showModelessDialog
- javascript网页特效——窗口和框架
- javascript网页特效——日期和时间
- JavaScript特效——联动菜单
- js特效-下拉菜单
- javascript网页特效——window.open
- javascript网页特效——window.opener
- javascript网页特效——DOM操作
- javascript网页特效——table
- 网页特效 ? 菜单导航
- 至16年9月11日 学习总结
- HDU 5507 GT and strings 字符串相关暴力
- FileReader和FileWriter
- linux的虚拟文件系统
- c++中sort函数s
- javascript网页特效——文本输入框和下拉菜单特效
- 1.1计算机操作系统
- 在投影空间中俩条平行线相交的证明
- Leetcode #13 Roman to Integer
- 第2章us/os0-2中的任务
- 9月5日京东笔试题
- canvas和svg基础
- MSMQ使用
- 第三章uc/os-2的中断和时钟
