一、实时获取鼠标在div中的【坐标】
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时获取鼠标在div中的【坐标】</title>
<style type="text/css">
#main{
width: 500px;
height: 400px;
margin: 100px auto 20px;
border: 2px solid red;
}
p{
width: 500px;
height: 50px;
margin: 0 auto;
border: 2px solid blue;
line-height: 50px;
}
</style>
</head>
<body>
<div id="main"></div>
<p>坐标为：<b id="show">(0,0)</b></p>
<script type="text/javascript">
window.onload=function(){
var divobj=document.getElementById('main');
var showobj=document.getElementById('show');
divobj.onmousemove=function(event){
var e=event || window.event;
//获取鼠标坐标
var m_x=e.clientX; //获取鼠标的横坐标
var m_y=e.clientY; //获取鼠标的纵坐标
//获取DIV坐标
var d_x=this.offsetLeft;//offsetLeft:Html元素相对于文档的x轴位置
var d_y=this.offsetTop; //offsetTop:Html元素相对于文档的Y轴位置
//鼠标指针相对于区块的相对位置
var x=m_x-d_x;
var y=m_y-d_y;
showobj.innerHTML="("+x+","+y+")"
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：以上代码演示了实时获取鼠标坐标位置
二、仿百度文库的文字搜索效果
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿百度文库中的文字搜索效果</title>
<style type="text/css">
#content {
width:500px;
height:200px;
margin:50px auto;
border:1px solid #ccc;
padding:10px;
border-radius: 5px;
overflow: auto;
}
#nav_menu {
width:100px;
height:30px;
background: #fff;
line-height: 30px;
padding:5px;
border-radius: 5px;
border:1px solid #ccc;
display: none;
position: fixed;
top:0;
left:0;
}
#nav_menu button {
background: transparent;
border:0;
color:green;
cursor: pointer;
}
#nav_menu button:hover {
color: red;
}
</style>
</head>
<body>
<div id="content" onmouseup="change(event)">
前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
</div>
<p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
<script>
function getSelect() {
return window.getSelection().toString();//getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围
}
function change(event){
var str=getSelect()
var e=event || window.event;
if(str.length>0){
var x=e.clientX; //鼠标指针横坐标
var y=e.clientY;//鼠标指针纵坐标
var menu=document.getElementById('nav_menu');
menu.style.left=x+'px';
menu.style.top=y+'px';
menu.style.display="block";
}else{
menu.style.display="none";
}
}
//复制
function copyText(){
document.execCommand("Copy");
document.getElementById('nav_menu').style.display="none"
}
//搜索
function getSearch(){
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('nav_menu').style.display="none"
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：以上代码演示了，选中复制粘搜索的应用。
三、滚动条下移一定距离显示固定导航
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动条下移一定距离显示固定导航</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 70px;
background: red;
line-height: 70px;
text-align: center;
}
#box{
width: 100%;
height: 70px;
background: blue;
line-height: 70px;
text-align: center;
position: fixed;top: 0;
display: none;
}
input{
width: 700px;
height: 40px;
border:0;
border-radius: 30px;
}
.main{
height: 1600px;
margin: 0 auto;
background: #ccc;
}
</style>
</head>
<body>
<div id="main">
<input type="" name="">
</div>
<div id="box">
<input type="" name="">
</div>
<div class="main"></div>
<script type="text/javascript">
window.onload=function(){
document.onscroll=function(){
if (document.documentElement.scrollTop>300) {
document.getElementById('box').style.display="block"
}else{
document.getElementById('box').style.display="none"
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：以上代码演示了，当滚动滚动条一定距离后显示一个固定导航。
四、三级联动
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<style type="text/css">
</style>
</head>
<body>
<form>
<select name="sel" id="sheng">
<option>请选择省会</option>
<option value="江苏省">江苏省</option>
<option value="广东省">广东省</option>
<option value="河南省">河南省</option>
</select>
<select name="sel" id="shi">
<option value="">请选择市</option>
</select>
<select name="sel" id="qu">
<option value="">请选择区</option>
</select>
</form>
<script type="text/javascript">
window.onload=function(){
function getId(id){
return document.getElementById(id)
}
var sheng=getId('sheng');
var shi=getId('shi');
var qu=getId('qu');
var m;
var n;
var p;
var that;
var arr=[
"江苏省",["南京市",["南京一区","南京二区","南京三区"],"苏州市",["苏州一区","苏州二区","苏州三区"]],
"广东省",["东菀市",["东莞一区","东莞二区","东莞三区"],"广东市",["广东一区","广东二区","广东三区"]],
"河南省",["郑州市",["金水区","开发区","高新区"],"安阳市",["文峰区","北关区","高新区"]]
]
console.log(arr) //拿到数组
console.log(arr[0]) //拿到省
console.log(arr[1][0])//拿到市
console.log(arr[1][1][0])//拿到区
sheng.onchange=function(){
that=this;//就是将当前的this对象复制一份到that变量中，临时储存。
for (var i = 0; i<arr.length; i+=2) {
if(arr[i]==this.value){
m=i;
printShi(m)
printQu(m,1)
}
}
shi.onchange=function(){
for(var i=0;i<arr.length;i+=2){
if(arr[i]==that.value){
n=i;
for(var j=0,len=arr[n+1].length;j<len;j+=2){
if(arr[n+1][j]==this.value)
p=j
printQu(n,p+1)
}
}
}
}
}
function printShi(x){
shi.innerHTML="<option value="+arr[x+1][0]+">"+arr[x+1][0]+"</option>";
for(var j=2,len=arr[x+1].length;j<len;j+=2){
//将市列表显示出来
var shioption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
shioption.setAttribute("value",arr[x+1][j])//修改value
shioption.innerHTML=arr[x+1][j];
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
shi.appendChild(shioption);
}
}
function printQu(x,y){
qu.innerHTML="<option value="+arr[x+1][y][0]+">"+arr[x+1][y][0]+"</option>";
for(var j=2,len=arr[x+1][y].length;j<len;j++){
//将市列表显示出来
var quoption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
quoption.setAttribute("value",arr[x+1][y][j])//修改value
quoption.innerHTML=arr[x+1][y][j];
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
qu.appendChild(quoption);
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：跟着老师敲出来，数组关系，调用都还是不熟悉，后续回来补习。
五、语法小扩展
window.onload
window.onload 是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。
当 js 代码需要获取页面中的元素时，如果 script 标签在元素的前面，需要加 window.onload；如果 script 放在了元素后面，就不需要加 window.onload。
语法示例：window.onload=function()
window.getSelection
getSelection() 方法可以返回一个 Selection 对象，用于表示用户选择的文本范围或插入符的当前位置。
语法示例：selection = window .getSelection（）;
toString()
toString() 方法可把一个逻辑值转换为字符串，并返回结果。
示例：booleanObject.toString()
onscroll
onscroll 事件在元素滚动条在滚动时触发。
scrollTop()
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。