获取坐标
实例
<style type="text/css">
#main{width: 500px;height: 350px;border:solid 2px red;margin: 50px auto 0;}
#show{width: 500px;height: 40px; line-height: 40px; border:solid 2px blue;margin: 10px auto}
</style>
<div id="main"></div>
<div id="show">当前坐标：<span id="show_num">(0,0)</span></div>
<script type="text/javascript">
window.onload=function(){ //入口函数，用于页面加载完成时执行
var mainbox = document.getElementById('main');
var showbox = document.getElementById('show_num');
mainbox.onmousemove=function(event){
var e = event || window.event;
//获取鼠标的坐标
var biao_x = e.clientX;
var biao_y = e.clientY;
//获取main盒子的坐标
var main_x = this.offsetLeft;
var main_y = this.offsetTop;
//得到鼠标在div的坐标
var show_x = biao_x-main_x;
var show_y = biao_y-main_y;
//赋值给变量当前坐标
showbox.innerHTML='('+show_x+','+show_y+')';
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
复制搜索
实例
<style type="text/css">
#content{width: 450px;height: 300px;padding: 10px;margin: 0 auto;box-shadow: 10px 10px 50px #999;border-radius: 10px;line-height: 35px;}
#btn{position: fixed;border:1px solid #cdcdcd;background-color: #fff;border-radius: 5px;top: 0;left: 0;display: none;}
#btn button{border:none;background-color: #fff;color: green;outline: none;cursor: pointer;padding: 10px;font-size: 16px;border-radius: 5px;}
#btn button:hover{color: red;}
</style>
<div id="content" onmouseup="change(event)">最富有的时候，你的生活也是最贫穷的。吹毛求疵的人即便在天堂也能挑出瑕疵。一个安心的人在哪都可以过自得其乐的生活，抱着振奋乐观的思想，如同居住在皇宫一般。犯不着千辛万苦求新，无论衣服还是朋友。把旧的翻新，回到它们中去。万事万物没有变，是我们在变。</div>
<p id="btn"><button onclick="copyText()">复制</button>|<button onclick="textSeach()">搜索</button></p>
<script type="text/javascript">
function getSelect(){
return window.getSelection().toString();
//getSelection()方法用于返回一个getSelect()对象，获取用户选择的文本范围
}
function change(event){
var str = getSelect();
var e = event || window.event;
var a = e.clientX; //获取鼠标的横坐标
var b = e.clientY; //获取鼠标的纵坐标
var menu = document.getElementById('btn'); //获取按钮
if(str.length>0){
menu.style.left = a+'px'; //把获取的鼠标坐标赋值给按钮的横坐标
menu.style.top = b+'px'; //把获取的鼠标坐标赋值给按钮的横坐标
menu.style.display = "block"; //显示按钮
}else{
menu.style.display = "none"; //隐藏按钮
}
}
//注：bug获取鼠标的坐标时，鼠标选中不放，那么按钮就脱离文字很远，用户体验不好（未解决）
//获取鼠标坐标时直接在函数内获取，如果在if体内获取会导致else获取不到menu，执行失败
//复制
function copyText(){
document.getElementById('btn').style.display='none';
document.execCommand('Copy');
}
//搜索
function textSeach(){
if(getSelect()){
window.location.href="https://www.baidu.com/s?wd="+getSelect();
}
document.getElementById('btn').style.display='none';
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
滚动条下移一段距离 导航固定显示
实例
<style type="text/css">
*{margin: 0;padding: 0;}
input{width: 500px;height: 40px;}
.nav{width: 100%;height: 70px;line-height:70px;background-color: #999;text-align: center;}
#nav2{width: 100%;height: 70px;line-height:70px;background-color: blue;text-align: center;position: fixed;top: 0;display: none;}
.main{width: 100%;height: 2000px;background-color: pink;}
</style>
<div class="nav">
<input type="text" name="">
</div>
<div id="nav2">
<input type="text" name="">
</div>
<div class="main"></div>
<script type="text/javascript">
window.onload=function(){ //入口函数，页面加载完成时执行
document.onscroll=function(){ //滚动条滚动时触发函数
if(document.documentElement.scrollTop>300){ //获取文档的滚动距离
document.getElementById('nav2').style.display="block";
}else{
document.getElementById('nav2').style.display="none";
}
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
三级联动
实例
<form>
<select name="sel" id="sheng">
<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 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 arr = [
"江西省",[
"南昌市",["东湖区","西湖区","青山湖区"],
"景德镇",["珠山区","昌江区"]
],
"广东省",[
"广州市",["越秀区","白云区","黄埔区","南沙区"],
"深圳市",["福田区","南山区","龙岗区"],
"佛山市",["禅城区","高明区","三水区"]
],
"河北省",[
"石家庄市",["长安区","桥西区","新华区","裕华区"],
"唐山市",["路北区","路南区","丰润区","古冶区","开平区"],
"秦皇岛市",["海港区","山***区","北戴河区"]
]
]
//console.log(arr);
//console.log(arr[0]); //获取省
//console.log(arr[1][0]); //获取市
//console.log(arr[1][1][0]);//获取区
// var arr2 = [0,[[0.1,0.2],4,7,8],[8,9,10,11],[9,12,13,15]];
// console.log(arr2[1][0][0]);
//省
sheng.onchange=function(){
var that = this;//把当前的this对象复制一份到that变量中
for(var i=0;i<arr.length;i+=2){
if(arr[i] == this.value){
m = i;
//console.log(arr[i]);
//console.log(this);
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); //可向节点饿子节点末尾插入一个新的子节点
console.log(arr[x+1][j]);
}
}
//区
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++){ //j等于1，从1开始每次加1遍历出每个区
//将市列表显示出来
var quoption = document.createElement("option");//通过指定名称创建一个元素
quoption.setAttribute("value",arr[x+1][y][j]); //修改value值
quoption.innerHTML=arr[x+1][y][j]; //设置下拉框中的区
qu.appendChild(quoption); //可向节点饿子节点末尾插入一个新的子节点
console.log(arr[x+1][y][j]);
}
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例