事件、卧龙首页案例及省份城市二级关联

一、事件

1.鼠标事件

1.1表单onsubmit事件

作用：当表单的内容不符合要求的时候，阻止表单提交，在实际应用中，会给用户提示

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>span{display: none;color: red;font-size: 12px;}</style></head><body><form id="form">用户名：<input id="user" type="text" placeholder="请输入用户名" /><span id="userInfo">*用户名格式不正确</span><br />密码：<input id="pwd" type="password" placeholder="请输入密码" /><span id="pwdInfo">*请包含数字和字母</span><br /><input type="submit" value="提交" /></form><script type="text/javascript">//获取标签对象var form = document.getElementById("form");var userInput = document.getElementById("user");var pwdInput = document.getElementById("pwd");var userSpan = document.getElementById("userInfo");var pwdSpan = document.getElementById("pwdInfo");//给表单添加阻止事件//注意：obsubmit的事件的函数返回为false，则表示表单阻止被提交form.onsubmit = function(){if(userInput.value.length < 3 || userInput.value.length > 10){//显示错误提示userSpan.style.display = "inline-block";return false;}else{if(pwdInput.value.length != 6 || (typeof pwdInput.value == Number)){pwdSpan.style.display = "inline-block";return false;}else{alert("提交成功");}}}</script></body>
</html>

2.键盘事件

keydown:按下键盘的任意键

keyup：抬起键盘的任意键

keypress:按下键盘的非功能键【功能键：ctrl/shift/alt/capslock/numlock键】

注意：

1.上面三个事件会被连续调用

2.键盘事件一般绑定给document

代码演示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">document.onkeydown = function(eve){var e = eve || window.event;//console.log(e);console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode);}document.onkeyup = function(eve){var e = eve || window.event;//console.log(e);console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode);}document.onkeypress = function(eve){var e = eve || window.event;//console.log(e);console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode);}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#box{width: 100px;height: 100px;background-color: red;position: absolute;}</style></head><body><div id="box"></div><script type="text/javascript" src="js/randomcolor.js"></script><script type="text/javascript">//需求1：在页面桑有一个div，当按下shift + c键的时候给div随机修改颜色//需求2：按下上下左右键的时候控制div的移动//获取对象var jsDiv = document.getElementById("box");//1/*document.onkeydown = function(eve){var e = eve || window.event;if(e.shiftKey == true && e.keyCode == 67){jsDiv.style.backgroundColor = randomColor();}}*///2.//参数：事件名称，事件触发之后需要执行的函数document.addEventListener("keydown",func,false);//document.onkeydown = functionfunction func(eve){var e = eve || window.event;switch(e.keyCode){//左键//offsetLeft/offsetRight/,相对于父标签的距离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;}default:{}}}</script></body>
</html>

3.事件的传递

事件流：描述的是从页面接收一个事件开始，当几个元素重叠在的一起的时候，当点击其中的一个元素，其他元素触发事件的顺序

两种模式：

事件冒泡：从里向外逐个触发

事件捕获：从外向里逐个触发

注意：现代的浏览器默认情况下使用的都是冒泡

代码演示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#div1{width: 200px;height: 200px; background-color: red;}#div2{width: 100px;height: 100px; background-color: cyan;}#div3{width: 50px;height: 50px; background-color: blue;}</style></head><body><div id="div1"><div id="div2"><div id="div3"></div></div></div><script type="text/javascript">var jsDiv1 = document.getElementById("div1");var jsDiv2 = document.getElementById("div2");var jsDiv3 = document.getElementById("div3");//给三个div的对象分别添加监听事件/** false:从里向外，div3 --->div2--->div1   冒泡* true:从外向里，div1 --->div2--->div3   捕获*/jsDiv1.addEventListener("click",func,true);jsDiv2.addEventListener("click",func,true);jsDiv3.addEventListener("click",func,true);function func(){//              document.write(this);
//              document.write("<br />");console.log(this);}</script></body>
</html>

4.事件的监听

事件监听器

addEventListener():需要给某个对象监听指定的事件，当事件触发的时候，需要执行指定的操作【函数】

举例：

对象.addEventListener(“事件名称”，函数名，false)

div.addEventListener(“click”，func，false)

div.addEventListener(“click”，function(){

//函数体

}，false)

注意：可以给同一个标签对象同时监听多个事件

对象.addEventListener(“事件名称1”，函数名1，false)

对象.addEventListener(“事件名称2”，函数名2，false)

删除绑定的函数

对象.removeEventListener(“事件名称”,函数名)

二、综合案例

1.卧龙首页+图片轮播

卧龙css

*{padding: 0px;margin: 0px;
}/*头部*/
/*1.整体设置*/
#head{width: 100%;height: 50px;/*background-color: cyan;*/
}/*2.设置logo图*/
#head > img{margin: 15px 10px;
}/*3.设置搜索框和搜索按钮*/
#search{float: right;margin: 12px 10px;/*background-color: red;*/
}#search input{height: 26px;float: left;
}
#search button{border: 0px;float: left;
}/*导航*/
/*1.整体设置*/
#nav{width: 100%;height: 50px;background-color: black;
}/*2.整体设置小的div*/
#nav div{float: left;color: white;height: 100%;
}
/*3.设置文字*/
.info{width: 19.8%;/*内容居中*/text-align: center;line-height: 50px;font-size: 14px;
}
/*4.设置线条*/
.line{width: 1px;background-color: white;
}/*第四部分*/
#forth{width: 100%;height: 150px;margin: 10px;
}/*将第四部分内容横向显示*/
#forth > div{float: left;margin-left: 10px;height: 100%;
}/*设置文字大小*/
#forth li,#forth p{font-size: 12px;color: gray;/*margin: ;*/
}/*单独设置*/
#forth ul{list-style: none;
}#news{width: 40%;
}#detail,#invite{width: 25%;
}/*设置卧龙市场*/
#market{width: 100%;
}#market ul{margin-top:10px ;
}#market li{/*将竖向排列的li转换为横向排列*/display: inline-block;margin-left: 10px;width:22%;
}#market p{font-size: 12px;color: gray;
}

轮播图css

/*轮播图*/
/*1.整体设置*/
#image{width: 100%;height: 400px;margin: 10px auto;position: relative;
}/*2.设置图片*/
#image > img{width: 100%;height: 100%;
}
/*3.设置ul*/
#list{list-style: none;position: absolute;bottom: 10px;left: 40%;
}/*4.设置li*/
#list li{float: left;width: 20px;height: 20px;background-color: lightgray;border-radius: 50%;margin-left: 10px;text-align: center;line-height: 20px;
}
/*5.设置左右按钮*/
.btn{width: 50px;height: 80px;background-color: rgba(0,0,0,0.2);color: white;text-align: center;line-height: 80px;position: absolute;top:160px;display: none;
}#left{left:0px;
}#right{right: 0px;
}

轮播图js

//获取所有的标签对象
var jsBox = document.getElementById("image");
var jsPic = document.getElementById("pic");
var jsLeft = document.getElementById("left");
var jsRight = document.getElementById("right");
var jsLisArr = jsBox.getElementsByTagName("li");//将第一个小圆点设置为红色
jsLisArr[0].style.backgroundColor = "red";//定义一个变量，用于记录当前图片的页数
var currentPage = 1;//启动一个间歇性定时器，去更换img标签上的资源
var timer = setInterval(startLoop,2000);function startLoop(){//每隔两秒，递增，切换不同的图片currentPage++;changePage();
}function changePage(){//但是，需要做临界判断if(currentPage == 9){currentPage = 1;}if(currentPage == 0){currentPage = 8;}//重新设置图片jsPic.src = "img/" + currentPage  + ".jpg";//先清除之前的设置for(var i = 0;i < jsLisArr.length;i++){jsLisArr[i].style.backgroundColor = "lightgray";}//设置小圆点的选中状态jsLisArr[currentPage - 1].style.backgroundColor = "red";
}//鼠标进入div【监听事件】
jsBox.addEventListener("mouseover",overFunc,false);
function overFunc(){//停止定时器clearInterval(timer);//显示左右按钮jsLeft.style.display = "block";  //inline-blockjsRight.style.display = "block";
}//鼠标移出div【监听事件】
jsBox.addEventListener("mouseout",outFunc,false);
function outFunc(){//重启定时器timer = setInterval(startLoop,2000);//隐藏左右按钮jsLeft.style.display = "none"; jsRight.style.display = "none";
}//鼠标进入左右按钮
//注意：进入左按钮，颜色加深，右按钮不受影响
jsLeft.addEventListener("mouseover",deepFunc,false);
jsRight.addEventListener("mouseover",deepFunc,false);function deepFunc(){this.style.backgroundColor = "rgba(0,0,0,0.6)";
}//鼠标离开左右按钮
jsLeft.addEventListener("mouseout",nodeepFunc,false);
jsRight.addEventListener("mouseout",nodeepFunc,false);function nodeepFunc(){this.style.backgroundColor = "rgba(0,0,0,0.2)";
}//鼠标点击左右按钮
jsLeft.addEventListener("click",function(){currentPage--;changePage();},false);jsRight.addEventListener("click",function(){currentPage++;changePage();},false);//当鼠标进入小圆点
for(var i = 0;i < jsLisArr.length;i++){//给每个li标签做标记,用于记录第几张图片jsLisArr[i].index = i + 1;//给每个li添加悬浮事件jsLisArr[i].addEventListener("mouseover",function(){currentPage = parseInt(this.index);changePage();},false);
}

卧龙首页html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--连接css--><link rel="stylesheet" type="text/css" href="css/wlstyle.css" /><link rel="stylesheet" type="text/css" href="css/imagestyle.css" /></head><body><!--整体--><div id="box"><!--头部--><div id="head"><!--logo图--><img src="img/WLImages/logo_01.jpg" /><div id="search"><form action="#" method="get"><input type="text" placeholder="请输入内容" /><button><img src="img/WLImages/button.jpg" /></button></form></div></div><!--导航--><div id="nav"><div class="info"><a>集团介绍</a></div><div class="line"></div><div class="info"><a>集团介绍</a></div><div class="line"></div><div class="info"><a>集团介绍</a></div><div class="line"></div><div class="info"><a>集团介绍</a></div><div class="line"></div><div class="info"><a>集团介绍</a></div></div><!--轮播图--><div id="image"><!--初始图片--><img src="img/1.jpg" id="pic"/><!--显示数字--><ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><!--左右按钮--><div id="left" class="btn">&lt;</div><div id="right" class="btn">&gt;</div></div><!--新闻资讯，人才招聘。。--><div id="forth"><!--新闻资讯--><div id="news"><h3>新闻资讯</h3><ul><li>可以给同一个标签对象同时监听多个事件&nbsp;&nbsp;&nbsp;2018-10-10</li><li>可以给同一个标签对象同时监听多个事件&nbsp;&nbsp;&nbsp;2018-10-10</li><li>可以给同一个标签对象同时监听多个事件&nbsp;&nbsp;&nbsp;2018-10-10</li><li>可以给同一个标签对象同时监听多个事件&nbsp;&nbsp;&nbsp;2018-10-10</li><li>可以给同一个标签对象同时监听多个事件&nbsp;&nbsp;&nbsp;2018-10-10</li></ul></div><!--卧龙介绍--><div id="detail"><h3>卧龙介绍</h3><p>可以给同一个标签对象同时监听多个事件</p><p>可以给同一个标签对象同时监听多个事件</p></div><!--人才招聘--><div id="invite"><h3>人才招聘</h3><p>可以给同一个标签对象同时监听多个事件</p><img src="img/WLImages/flower.jpg" /></div></div><!--卧龙市场--><div id="market"><h3>卧龙市场</h3><ul><li><img src="img/WLImages/img02.jpg" /><p>可以给同一个标签对象同时监听多个事件</p></li><li><img src="img/WLImages/img02.jpg" /><p>可以给同一个标签对象同时监听多个事件</p></li><li><img src="img/WLImages/img02.jpg" /><p>可以给同一个标签对象同时监听多个事件</p></li><li><img src="img/WLImages/img02.jpg" /><p>可以给同一个标签对象同时监听多个事件</p></li></ul></div><!--底部--><div id="footer"><a>联系我们</a><a>联系我们</a><a>联系我们</a></div></div><script type="text/javascript" src="js/loop.js"></script></body>
</html>

2.省份城市二级关联

代码演示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body onload="init();"><select id="province" onchange="getCity();"><option value= 0 >北京</option> <option value= 1 >上海</option> <option value= 2 >天津</option> <option value= 3 >重庆</option> <option value= 4 >河北</option> <option value= 5 >山西</option> <option value= 6 >内蒙古</option> <option value= 7 >辽宁</option> <option value= 8 >吉林</option> <option value= 9 >黑龙江</option> <option value= 10 >江苏</option> <option value= 11 >浙江</option> <option value= 12 >安徽</option> <option value= 13 >福建</option> <option value= 14 >江西</option> <option value= 15 >山东</option> <option value= 16 >河南</option> <option value= 17 >湖北</option> <option value= 18 >湖南</option> <option value= 19 >广东</option> <option value= 20 >广西</option> <option value= 21 >海南</option> <option value= 22 >四川</option> <option value= 23 >贵州</option> <option value= 24 >云南</option> <option value= 25 >西藏</option> <option value= 26 >陕西</option> <option value= 27 >甘肃</option> <option value= 28 >宁夏</option> <option value= 29 >青海</option> <option value= 30 >新疆</option> <option value= 31 >香港</option> <option value= 32 >澳门</option> <option value= 33 >台湾</option></select><!--注意：select有一个事件：onchange，表示当option发生改变的时候会自动触发--><select id="city"></select><script type="text/javascript">var arr = new Array();arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"; arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"; arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"; arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"; arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"; arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"; arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"; arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"; arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"; arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"; arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"; arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"; arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"; arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"; arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"; arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"; arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"; arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"; arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界" arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"; arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"; arr[21 ]="海口,三亚"; arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"; arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"; arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"; arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"; arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"; arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南" arr[28 ]="银川,石嘴山,吴忠,固原"; arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西"; arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"; arr[31 ]="香港";arr[32 ]="澳门"; arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖";//初始化function init(){//获取city的对象var citySelect = document.getElementById("city");//获取北京下面所有的区域var areaArr = arr[0].split(",");//遍历数组for(var i = 0;i < areaArr.length;i++){/** 方式一* var text = createTextNode(areaArr[i]);* var op =  createElement("option");* op.appendChild(text);* citySelect.appendChild(op);*///方式二//new Option(str1,str2),一般用于动态生成选项//<option value= "str2" >str1</option>citySelect[i] = new  Option(areaArr[i],areaArr[i]);//思想：将select标签当做一个数组处理，其中的option对象就相当于是其中的元素}}//当切换省份的时候，需要切换对应的城市function getCity(){//获取省份和城市的select的对象var pro = document.getElementById("province");var city = document.getElementById("city");//思路：将被选中的select和数组的下标产生联系//获取当前选中的省份的标记var index = pro.selectedIndex;//通过选中的省份去数组中获取对应的城市var cityArr = arr[index].split(",");//重置：将city的select置为空，重新赋值city.length = 0;for(var i = 0;i < cityArr.length;i++){city[i] = new Option(cityArr[i],cityArr[i]);}}</script></body>
</html>

事件、卧龙首页案例及省份城市二级关联相关推荐

事件+综合案例（卧龙首页+省份城市二级关联）
一. 事件 1.鼠标事件 1.1表单onsubmit事件作用:当表单的内容不符合要求的时候,阻止表单提交,在实际应用中,会给用户提示代码演示: <!DOCTYPE html> < ...
Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
js三级联动案例(省份,城市,县区,街道)
<script type="text/javascript">/*分析:* 1.创建页面元素(下拉列表框 select)* 2.创建二维数组存储数据(地区)* 3.获取 ...
省份城市区县三级联动html代码,基于Jquery实现省份、城市、区县三级联动
-//W3C//DTD HTML 4.01 Transitional//EN" ";> $(document).ready(function(){ //省份城市数组 var ...
省份城市联动多选
实现省份城市联动,多选(checkbox) <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
原生JavaScript实现城市二级三级联动
原生JavaScript实现城市二级三级联动一,HTML代码 <select id="province" onchange="chooseProvince(th ...
20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...
全球13个DNS根+主要省份城市的DNS服务器地址
全球13个DNS根(root DNS)服务器信息 A.root-servers.net 198.41.0.4 美国 B.root-servers.net 192.228.79.201 美国(另支持IP ...
地区省份城市sql信息
//国家 INSERT INTO base_parameter (parent_code,dtype,code,cname,parameterStatus,remark) VALUES ('0','c ...

事件、卧龙首页案例及省份城市二级关联

一、事件

1.鼠标事件

1.1表单onsubmit事件

2.键盘事件

3.事件的传递

4.事件的监听

二、综合案例

1.卧龙首页+图片轮播

2.省份城市二级关联

事件、卧龙首页案例及省份城市二级关联相关推荐

最新文章

热门文章