实例--三级联动
//修改了数组结构
//案例总结：
1、选取数组元素的方法取决于数据结构；
2、可以使用document.createElement()创建新元素，并通过object.appendChild(childobj)方法来挂载到父级元素中
3、在方法和循环外定义变量 m和n, 可以作为计数器使用，临时存储方法或循环中匹配到的数值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<select name="location" id="province">
<option value="">请选择省份</option>
</select>
<select name="location" id="city">
<option value="">请选择城市</option>
</select>
<select name="location" id="district">
<option value="">请选择区县</option>
</select>
</form>
</body>
<script>
var arr=[
["江西省",
["南昌市",["东湖区","西湖区","青山湖区"]],
["景德镇",["珠江区","西湖区","昌江区"]]
],
["广东省",
["广州市",["番禺区","天河区","黄埔区"]],
["深圳市",["宝安区","龙岗区","福田区"]],
["惠州市",["龙门区","惠城区","惠阳区"]]
],
["安徽省",
["合肥市",["政务区","庐阳区","包河区"]],
["芜湖市",["经开区","庐阳区","包河区"]],
["黄山市",["高新区","庐阳区","包河区"]]
]
];
function getId(id){
return(document.getElementById(id));
}
var province = getId('province');
var city = getId('city');
var district = getId('district');
var m,n;
window.onload=function(){
// province.innerHTML="<option value="+arr[0][0]+">"+arr[0][0]+"</option>";
for(i=0;i<arr.length;i++)
{var prooption=document.createElement("option");
prooption.setAttribute("value",arr[i][0]);
prooption .innerHTML=arr[i][0];
province.appendChild(prooption);
}
}
province.onchange=function(){
for(var i=0;i<arr.length;i++){
if(arr[i][0]==this.value){
m=i;
printCity(m);
printDistrict(m,1);
}
}
}
city.onchange = function(){
for(var i=1;i<arr[m].length;i++){
if(arr[m][i][0]==this.value){
n=i;
printDistrict(m,n)
}
}
}
function printCity(x){
city.innerHTML="<option value="+arr[x][1][0]+">"+arr[x][1][0]+"</option>";
for(j=2;j<arr[x].length;j++){
var cityoption=document.createElement("option");
cityoption.setAttribute("value",arr[x][j][0]);
cityoption.innerHTML=arr[x][j][0];
city.appendChild(cityoption);
}
}
function printDistrict(x,y){
district.innerHTML="<option value="+arr[x][y][1][0]+">"+arr[x][y][1][0]+"</option>";
for(j=1;j<arr[x][y][1].length;j++){
var disoption=document.createElement("option");
disoption.setAttribute("value",arr[x][y][1][j]);
disoption.innerHTML=arr[x][y][1][j];
district.appendChild(disoption);
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例--复制或搜索
总结：尽量使用button作为click对象；使用span做click时，导致复制和搜索失败
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#copyorSearchBar{height:30px;position: fixed;display: none;background: white;}
button:hover{background: blue;cursor:pointer;color:white;}
p{width: 600px;margin:100px auto;font-size: 16px;}
button{width: 50px;height: 100%;display: inline-block;}
</style>
</head>
<body>
<p id="text" >1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.4.offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值5.layerX/layerY：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)幕的坐标</p>
<div id="copyorSearchBar">
<button id="copy" >复制</button>
<button id="search">搜索</button>
</div>
</body>
<script>
function getSelect(){
return window.getSelection().toString();
}
document.getElementById('text').onmouseup = function(event){
var selectedTxt = getSelect();
var e=event || window.event;
if(selectedTxt.length>0){
document.getElementById('copyorSearchBar').style.left = e.clientX+'px';
document.getElementById('copyorSearchBar').style.top = e.clientY+'px';
document.getElementById('copyorSearchBar').style.display = 'block';
}
}
document.getElementById('copy').onclick= function copyTxt(){
alert(document.execCommand("Copy","true","none"));
document.getElementById('copyorSearchBar').style.display = 'none';
}
document.getElementById('search').onclick=function(){
if(getSelect()){
window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect();
}
document.getElementById('copyorSearchBar').style.display = 'none';
}
document.getElementById('text').onmousedown= function(){
document.getElementById('copyorSearchBar').style.display = 'none';}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例--显示鼠标在盒子中的位置
总结：要弄清楚clientX, screenX, pageX分别是什么
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#box{width: 400px;height: 300px;margin:100px 0 10px 100px;background: red;}
#display{margin-left: 100px;}
span{ display:inline-block; width: 100px;}
</style>
</head>
<body>
<div id="box">
</div>
<div id="display">
<span>x轴坐标</span>
<span id="x"></span>
<span>y轴坐标</span>
<span id="y"></span>
</div>
</body>
<script>
// 鼠标在div "box"上的位置，通过onmousemove事件触发
document.getElementById('box').onmousemove=
function(event){
var e = event || window.event;
document.getElementById('x').innerHTML=e.pageX-100;
document.getElementById('y').innerHTML=e.pageY-100;}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例