function $(id){return document.getElementById(id);
}
function $name(name){return document.getElementsByName(name);
}

树形菜单

在这里插入图片描述

onclick事件改变display属性来控制子树的显示==开关效果function treeShow(id){//console.log("事件添加成功");if(document.getElementById(id).style.display=='block'){document.getElementById(id).style.display="none";}else{document.getElementById(id).style.display="block";}//为什么点击一次之后打开不了？？？？？？？//a中一定要加内容    否则点击后实际是跳转到一个新页面  然后将刷新//<a href="javascript:clickShow('idname')"></a>
}

横向菜单栏

在这里插入图片描述

不传id

onmouseover事件添加show函数
onmouseout事件添加noshow函数
通过改变display属性来控制显示function menuShow(){var event = event||window.event;var dd = event.srcElement;//具体寻找id的方法是灵活的var id = findId(dd);//寻找idif(id!=null){document.getElementById(id).style.display="inline";}return id;
}function noshow(){var id = show();document.getElementById(id).style.display="none";
}	也可以直接在标签上添加事件，将标签的id传进来更方便

传id

function menuShow(id){$(id).style.display="block";
}function noshow(){$(id).style.display="none";
}

轮转的图片

setInterval是关键var nowIndex = 1;//显示的第一张图片
var maxIndex = 4;//需要显示的图片window.onload = show;
function picShow(){//根据index改变img的displayif(nowIndex==(maxIndex+1)){nowIndex=1;}var i = nowIndex-1;if(i==0){i=maxIndex-1;}//上一张图片关闭，同时显示下一张  每张图片的id命名为id1 id2...$("adv"+i).style.display="none";$("adv"+nowIndex).style.display="block";nowIndex++;//显示下一张图片
}setInterval("show()",1000);

全选全不选

window.onload = function(){var quan = $("quan");var dans = $name("dan");//页面一加载就给全选按钮加事件quan.onchange = function(){//保持全选改变单选和全选状态一样for(var i=0;i<dans.length;i++){dans[i].checked = this.checked;//this==quan}}//给单选添加事件for(var i=0;i<dans.length;i++){dans[i].onchange = option;}
}function option(){var quan = $("quan");var dans = $name("dan");//var event = event||window.event;//直接使用this//当前按钮取消，全选按钮也取消if(this.checked==false){quan.checked=false;return ;}//当前按钮选择，查看所有按钮是不是都选择，未全选则全选按钮不全选for(var i=0;i<dans.length;i++){if(dans[i].checked==false){quan.checked=false;return;}}//单选全选了quan.checked=true;
}

漂浮的层——小广告

//每次移动的距离
var dx = 10;
var dy = 10;
//图片现在的位置
var nowX;
var nowY;
//图片的大小
var picW;
var picH;window.onload = function(){nowX = $("imgId").style.left;nowY = $("imgId").style.top;
}function movePic(){picW = $("imgId").width;picH = $("imgId").height;if((nowX+dx>(screen.width-picW)) || (nowX+dx<0)){dx=-dx;//正负表示新窗口的移动方向}if((nowY+dy>(screen.height-picH)) || (nowY+dy<0)){dy=-dy;}nowX = eval(nowX+"+"+dx);nowY = eval(nowY+"+"+dy);$("imgId").style.left=nowX+"px";$("imgId").style.top=nowY+"px";
}
setInterval("movePic()",100);

随滚动条上下滚动的层

在这里插入图片描述

var picW;//图片的宽度
var picT;//图片到顶端距离
var picR;//图片到右端距离--此时图片显示在右端//页面加载就获取右边广告的信息
window.onload = function(){picW = $("imgId").width;//获取图片的宽度（图片铺盖整个层）//浏览器兼容if($("id").currentStyle){//ie浏览器picT = parseInt($("imgId").currentStyle.top);//图片离顶端的距离picR = parseInt($("imgId").currentStyle.right);//图片右顶端的距离}else{picT = parseInt(document.defaultView.getComputedStyle($("imgId"),null).top);//图片离顶端的距离picR = parseInt(document.defaultView.getComputedStyle($("imgId"),null).right);}
}window.onscroll = scrollGuang;//滚动时改变右侧广告的位置
function scrollGuang(){var scrollT;//滚动条滚动var scrollR;if(self.pageYOffset){scrollT = self.pageYOffset;scrollR = self.pageXOffset;} else if(document.documentElement && document.documentElement.scrollTop){scrollT = document.documentElement.scrollTop;scrollR = document.documentElement.scrollRight;} else if(document.body) { // all other ExplorersscrollT = document.body.scrollTop;scrollR = document.body.scrollRight;}$("imgId").style.top = (picT+scrollT) +"px";$//("imgId").style.left = parseInt(document.documentElement.scrollLeft)+parseInt(document.documentElement.clientWidth)-picR-picW+"px";
}

可关闭的层

function close(){$("id").style.display="none";
}

无缝跑马灯，鼠标移入就停下

登录验证（邮箱+密码）

function checkLogin(){var email = $("email").value;var pwd = $("pwd").value;var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*$/;if(!emailReg.test(email)){alert("输入Email地址有误，请确认后重新输入");return false;}var pwdReg=/^\w{8,16}$/;if(!pwdReg.test(pwd)){alert("密码为数字字母下划线组成，长度为8-16位");return false;}return true;
}

注册

//将键值形式的对象保存在数组
var regArray = [{'reg':/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ , 'str':'电子邮箱格式不对，请重新输入'},{'reg':/^[a-zA-Z0-9]{4,20}$/ , 'str':'昵称格式不对，请用大小写英文字母、数字，长度4-20个字符'},{'reg':/^[a-zA-Z0-9]{6,20}$/ , 'str':'密码格式不对，请用大小写英文字母、数字，长度6-20个字符'},];
/** 失去焦点 验证* id1验证框* id2显示提示信息* type参数表示需要验证什么*/
function inputblur(id1,id2,type){id1 = $(id1);id2 = $(id2);id2.innerHTML = "";//清空提示信息var reg = regArray[type].reg;//获取要验证的正则表达式if(!reg.test(id1.value)){id2.innerHTML = regArray[type].str;//设置提示信息id2.className = "id2_no";//验证错误，改变提示样式id1.className = "id1_no";//改变id1的样式return false;}id2.className = "id2_ok";//改变id2的样式id1.className = "id1_ok";//改变id1的样式return true;
}
/** 确认密码验证*/
function repwdBlur(){var pwd = $("pwd");var repwd = $("repwd");var repwdTishi = $("repwdTishi");repwdId.innerHTML = "";if(pwd.value != repwd.value){repwdTishi.innerHTML = "两次输入的密码不一致，请重新输入";repwdTishi.className = "repwdTishi_no";repwd.className = "repwd_no";return false;}repwdTishi.className = "repwdTishi_ok";repwd.className = "repwd_ok";return true;
}
/** 注册按钮 -- 全部检查一遍*/
function checkRegister(){var flagEmail = inputblur('email','email_prompt',0);var flagNickName = inputblur('nickName','nickName_prompt',1);var flagPwd = inputblur('pwd','pwd_prompt',2);var flagRepwd = repwdBlur();if(flagEmail==true && flagNickName==true && flagPwd==true && flagRepwd==true){return true;}else{return false;}
}

省市级联

/*所在地的省、城市、地区级联选择*/
var cityList = new Array();
cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
cityList['广州省'] = ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市', '苏州市', '无锡市'];
cityList['浙江省'] = ['杭州市', '宁波市', '温州市'];
cityList['四川省'] = ['四川省', '成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市', '厦门市', '泉州市', '漳州市'];
cityList['山东省'] = ['济南市', '青岛市', '烟台市'];
cityList['江西省'] = ['江西省', '南昌市'];
cityList['广西省'] = ['柳州市', '南宁市'];
cityList['安徽省'] = ['安徽省', '合肥市'];
cityList['河北省'] = ['邯郸市', '石家庄市'];
cityList['河南省'] = ['郑州市', '洛阳市'];
cityList['湖北省'] = ['武汉市', '宜昌市'];
cityList['湖南省'] = ['湖南省', '长沙市'];
cityList['陕西省'] = ['陕西省', '西安市'];
cityList['山西省'] = ['山西省', '太原市'];
cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
cityList['其他'] = ['其他'];function changeCity(){//省改变onChange="changeCity()"var province = $("province").value;var city = $("city");city.options.length = 0;//清除当前城市for(var i in cityList){//i是下标==省名if(i==province){for(var j in cityList[i]){//j就是城市名try{city.add(new Option(cityList[i][j],cityList[i][j]),null);//标准方式}catch(e){city.add(new Option(cityList[i][j],cityList[i][j]));//IE}}}}
}window.onload = allProvince;function allProvince(){var province = $("province");for(var i in cityList){try{province.add(new Option(i,i),null);//标准方式}catch(e){province.add(new Option(i,i));//IE}}
}