1案例一获取指针坐标
实例
<!DOCTYPE html>
<html>
<head>
<title>javascript学习-获取指针坐标</title>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<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 green;
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; //纵坐标
var d_x=this.offsetLeft; //相对语文当中x轴的位置
var d_y=this.offsetTop;
//鼠标指针相对于区块的相对位置
var x=m_x-d_x;
var y=m_y-d_y;
showObj.innerHTML="("+x+","+y+")";
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2网页中文字复制，搜索效果
实例
<!DOCTYPE html>
<html>
<head>
<title>仿百度文库中的文字搜索效果</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<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)">
1956年9月15日至27日，中国***第八次全国代表大会在北京举行。大会提出的党和国家主要任务是集中力量发展***力的思想，对于社会主义事业的发展和党的建设具有长远的重要的意义。图为毛泽东在大会上致开幕词。1982年9月1日至11日，中国***第十二次全国代表大会在北京举行。邓小平致开幕词。他在开幕词中明确提出了“建设有中国特色的社会主义”的重大命题。图为邓小平在大会上致开幕词
</div>
<p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
<script>
function getSelect(){
return getSelection().toString(); //返回一个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 cocument.getElengmentById('nav_menu')
menu.style.left=x+"px";
menu.style.top=y+"px";
menu.style.display=block;
}else{
menu.style.display=none;
}
}
function copyText(){
cocument.getElengmentById('nav_menu').style.display="none";
}
function copySearch(){
if(getSelect()){
window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect();
}
cocument.getElengmentById('nav_menu').style.display="none";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3固定导航条
之前在做优酷页面的时候，最上边的导航条一直解决不了，现在可以用scollTop的值来控制它了；
实例
<!DOCTYPE html>
<html>
<head>
<title>固定导航条</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
#main{
width: 100%;
height: 70px;
background: #ccc;
line-height: 70px;
text-align: center;
}
#box{
width: 100%;
height: 70px;
background: #ccc;
line-height: 50px;
text-align: center;
position: fixed;
top: 0;
display: none;
}
input{
width: 700px;
height: 40px;
border: none;
border-radius: 40px;
}
.main{
height: 1500px;
margin: 0 auto;
background: skyblue;
}
</style>
</head>
<body>
<div id="main"> <input type="" name=""></input> </div>
<div id="box"> <input type="" name=""></input> </div>
<div class="main"></div>
<script type="text/javascript">
window.onload=function(){
document.onscroll=function(){//onsroll滚动触发
if(document.documentElement.scrollTop>300){ //匹配元素滚动的垂直位置
document.getElementById('box').style.display="block";
}else{
document.getElementById('box').style.display="none";
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4三级联动
心血的方法很实用，之前别处的难点刚好可以用到这个地方的知识；
//createElement() 方法通过指定名称创建一个元素
var shioption=document.createElement("option")
//修改value
shioption.setAttribute("value",arr[x+1][j])
shioption.innerHTML=arr[x+1][j];
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
shi.appendChild(shioption);
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省/市/区 三级联动</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
</style>
</head>
<body>
<form>
<select name="sel" id="sheng">
<option value="">请选择省会</option>
<option value="江西省">江西省</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>
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);
sheng.onchange=function(){
that=this; //临时储存
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");
shiOption.setAttribute("value",arr[x+1][j]);//修改value值
shiOption.innerHTML=arr[x+1][j];
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=1,len=arr[x+1][y].length;j<len;j++){
var quOption=document.createElement("option");
quOption.setAttribute("value",arr[x+1][y][j]);//修改value值
quOption.innerHTML=arr[x+1][y][j];
qu.appendChild(quOption);//子节点末尾插入节点
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例