实例
<!-- <!DOCTYPE html> <?php 实时显示鼠标在div内部的位置 ?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取实时坐标</title>
<style>
*{margin:0; padding:0;}
#main{width:400px; height:330px; border:1px solid red; margin:30px auto;}
#div01{width:390px; height:40px; border:1px solid red; margin:30px auto; padding-left:10px;}
b{line-height:40px;}
</style>
</head>
<body>
<div id='main'></div>
<div id='div01'>坐标为：<b id='show'>(0,0)</b></div>
<script>
window.onload=function(){
var div_obj=document.getElementById('main'); //获取大div
var show_obj=document.getElementById('show'); //获取显示的坐标样式
div_obj.onmousemove=function(event){ //当移上大div时显示实时坐标
var e=event || window.event; //储存多种兼容模式
var m_x=e.clientX; //获取浏览器坐标X
var m_y=e.clientY; //获取浏览器坐标Y
var d_x=this.offsetLeft; //获取DIV左边位置
var d_y=this.offsetTop; //获取DIV上边位置
var x=m_x-d_x; //获取DIV内部坐标X
var y=m_y-d_y; //获取DIV内部坐标Y
show_obj.innerHTML='('+x+','+y+')'; //改变并连接html数据
}
}
</script>
</body>
</html> -->
<!-- <!DOCTYPE html> <?php 选中内容提示复制/搜索 ?>
<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)'>
前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有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(); //返回一个用户选择文本范围的selection对象
}
function change(event){ //根据选中范围显示组合按钮
var str=getSelect(); //将文本范围存储
var e=event || window.event; //兼容浏览器
if(str.length>0){ //判断文本范围是否有内容
var x=e.clientX; //获取浏览器X坐标
var y=e.clientY; //获取浏览器Y坐标
var menu=document.getElementById('nav_menu'); //获取组合按钮
menu.style.left=x+'px'; //将组合按钮位置改为浏览器X坐标
menu.style.top=y+'px'; //将组合按钮位置改为浏览器Y坐标
menu.style.display='block'; //让组合按钮显示
}else{
ment.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> <?php 滚动下方显示导航栏 ?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动下方显示导航栏</title>
<style>
*{margin:0; padding:0;}
#a{width:1200px; height:70px; background:red; margin:0 auto; text-align:center; line-height:70px;}
#b{width:1200px; height:70px; background:red; margin:0 auto; text-align:center; line-height:70px; position:fixed; top:0; left:5%; display:none;}
#main,#box{width:500px; height:40px; border-radius:30px;}
.c{width:100%; height:2500px; background:#ccc;}
</style>
</head>
<body>
<div id='a'>
<input type="text" id='main'>热门搜索
</div>
<div id='b'>
<input type="text" id='box'>热门搜索
</div>
<div class='c'></div>
<script>
window.onload=function(){ //全局加载
document.onscroll=function(){ //当页面移动时触发
if(document.documentElement.scrollTop>500){ //如果页面移动距离上方大于500则显示，否则隐藏
document.getElementById('b').style.display='block';
}else{
document.getElementById('b').style.display='none';
}
}
}
</script>
</body>
</html> -->
<!-- <!DOCTYPE html> <?php 三级联动 ?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<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>
window.onload=function(){ //全局加载
function getId(id){ //每次获取对应ID
return document.getElementById(id)
}
var sheng=getId('sheng') //传参获取省
var shi=getId('shi') //传参获取市
var qu=getId('qu') //传参获取区
var m; //用于存储省
var n; //用于存储市
var p; //用于存储区
var shat; //用于临时存储
var arr=[ //定义数组
"江西省",["南昌市",["东湖区","西湖区","青山湖区"],"景德镇",["珠江区","西湖区","昌江区"]],
"广东省",[
"广州市",["番禺区","天河区","黄埔区"],
"深圳市",["宝安区","龙岗区","福田区"],
"惠州市",["龙门区","惠城区","惠阳区"]
],
"安徽省",[
"合肥市",["政务区","庐阳区","包河区"],
"芜湖市",["经开区","庐阳区","包河区"],
"黄山市",["高新区","庐阳区","包河区"]
]
]
// console.log(arr);
// console.log(arr[0]); 可以取到省0 2 4
// console.log(arr[1][0]); 可以取到市0 2 4
// console.log(arr[1][1][2]); 可以取到区1 3 5
sheng.onchange=function(){ //当省改变时触发
that=this; //临时保存当前触发对象
for(var i=0; i<arr.length; i+=2){ //循环省
if(arr[i]==this.value){ //将循环到的下标和当前触发的对象属性值相比对
m=i; //如果一致则将此下标存储于省变量m
printShi(m); //并且将此下标传值给市
printqu(m,1) //并且将此下标传值给区，1代表每次触发省时对应省下标1的区
}
}
shi.onchange=function(){ //当市改变时触发
for(var i=0; i<arr.length; i+=2){ //循环市
if(arr[i]==that.value){ //将循环到的下标和当前触发的对象属性值相比对 这个that调用在省函数内，没有作用域吗？
n=i; //如果一致则将此下标存储于市变量n
for(var j=0,len=arr[n+1].length; j<len; j+=2){ //循环区？
if(arr[n+1][j]==this.value){ //将循环到的下标和当前触发的下标相比对
p=j //如果一致则将此下标存储于区变量p
printqu(n,p+1) //并且将此下标和 ？ 传值给区
}
}
}
}
}
}
function printShi(x){ //处理市
shi.innerHTML='<option value='+arr[x+1][0]+'>'+arr[x+1][0]+'</option>' //改变市对象属性值和HTML
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]) //修改市的属性值
shioption.innerHTML=arr[x+1][j] //修改市的html
shi.appendChild(shioption); //向子节点末尾插入新的子节点
}
}
function printqu(x,y){ //处理区
qu.innerHTML='<option value='+arr[x+1][y][0]+'>'+arr[x+1][y][0]+'</option>' //改变区对象属性值和HTML
for(var j=2,len=arr[x+1].length; j<len; j+=2){ //循环市
var quoption=document.createElement('option') //通过指定一个名称创建一个元素
quoption.setAttribute('value',arr[x+1][y][j]) //修改区的属性值
quoption.innerHTML=arr[x+1][y][j] //修改区的html
qu.appendChild(quoption); //向子节点末尾插入新的子节点
}
}
}
</script>
</body>
</html> -->
<!-- <!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>
</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)
// console.log(arr[0])//可以取到省 0 2 4
// console.log(arr[1][0])//可以取到市 0 2 4
// console.log(arr[1][1][2])//可以取到区 1 3 5
//onchange 事件会在域的内容改变时发
sheng.onchange=function(){
that=this;//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=1,len=arr[x+1][y].length;j<len;j++){
var quoption=document.createElement("option");
quoption.setAttribute("value",arr[x+1][y][j]);
quoption.innerHTML=arr[x+1][y][j];
qu.appendChild(quoption);
}
}
}
</script>
</body>
</html> -->运行实例 »
点击 "运行实例" 按钮查看在线实例