![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
一、实时访问鼠标在div中的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时获取鼠标在div中的坐标</title>
<style type="text/css">
#main{
width: 500px;
height: 300px;
border: 1px solid red;
margin: 10px auto;
}
p{
width: 500px;
height: 30px;
line-height: 30px;
border: 1px solid pink;
margin: 10px auto;
padding: 2px;
}
</style>
</head>
<body>
<div id="main"></div>
<p>实时坐标为<b id="show">(0,0)</b></p>
<script type="text/javascript">
window.onload=function() {
var centent=document.getElementById("main");
var box=document.getElementById('show');
centent.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;
box.innerHTML="("+x+","+y+")";
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、实现选择文字后弹出复制搜索按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现选择文字后弹出复制搜索按钮</title>
<style type="text/css">
#main{
width: 350px;
height: 200px;
border: 1px solid #ccc;
margin: 0px auto;
overflow: auto;
}
#box{
width: 85.5px;
height: 23px;
/*margin: 0px auto;在这里添加上这一条，复制和搜索按钮就会跑到文本的外面去*/
line-height: 25px;
display: none;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="main" onmouseup="change(event)">
前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
</div>
<p id="box"><button onclick="copy()">复制</button><button onclick="serch()">搜索</button></p>
<script type="text/javascript">
//获取选中文字
function selecttext() {
return window.getSelection().toString();//getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围。注意getSelection()函数中的S要大写，要不提示getselection is not function
}
//设置这个复制与搜索框的位置
function change(event){
var text=selecttext();
//document.write(text.length);
var e=event || window.event;
//document.write(e);
if(text.length>0){
var m_x=e.clientX; //鼠标指针横坐标
var m_y=e.clientY;//鼠标指针纵坐标
var menu=document.getElementById("box");
menu.style.left=m_x+'px';//设置复制搜索按钮相对于鼠标x轴的坐标
menu.style.top=m_y+'px';//设置复制搜索按钮相对于鼠标y轴的坐标
menu.style.display='block';
}else{
menu.style.display='none';
}
}
//复制文本
function copy(){
document.execCommand("Copy");
document.getElementById('box').style.display="none"
}
//搜索文本
function serch(){
if(selecttext()){
window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+selecttext()
}
document.getElementById('box').style.display="none"
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、滚动条向下移动一段距离，导航条出现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动条向下移动一段距离，导航条出现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#main{
width: 100%;
height: 980px;
background: pink;
margin: 0 auto;
}
#tab_head{
width: 100%;
height: 30px;
background: #ccc;
}
#tab_head1{
width: 100%;
height: 30px;
background: red;
display: none;
position: fixed;/*/固定定位一定要有，不然不会自动显示出来*/
top: 0;
}
#tab_head input{
width: 600px;
height: 20px;
line-height: 20px;
border: 0px;
border-radius: 50px;
background:rgba(40,41,35,0.1);
margin: 0 400px;
}
#tab_head1 input{
width: 600px;
height: 20px;
line-height: 20px;
border: 0px;
border-radius: 50px;
background:rgba(40,41,35,0.1);
margin: 0 400px;
}
p{
background: red;
margin:5px 0px auto;
}
</style>
</head>
<body>
<div id="tab_head"><input type="text" name=""></div>
<div id="tab_head1"><input type="text" name=""></div>
<div id="main"></div>
<p><a href="">回到顶部</a></p>
<script type="text/javascript">
// window.onload=function () {
// document.onscroll=function(){
// if(document.documentElement.scrollTop>300){
// document.getElementById('tab_head1').style.display="block";
// // }else if(document.documentElement.scrollbottom==0){
// // window.location.href="top";
// }else{
// //document.write("kk");
// document.getElementById('tab_head1').style.display="none";
// }
// }
// }
window.onload=function(){
document.onscroll=function(){//onscroll 事件在元素滚动条在滚动时触发
if(document.documentElement.scrollTop>300){//scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
document.getElementById('tab_head1').style.display="block";
}else{
document.getElementById('tab_head1').style.display="none";
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、省市区三级联动
<!DOCTYPE html>
<html>
<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 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])//市下面的区
console.log(arr[1][0])
console.log(arr[2])//广东省
//找省arr[0] 0 2 4
//找市arr[1][0] 0 2 0 2 4
//找区arr[1][1][0] 1 3 5
//onchange 事件会在域的内容改变时发
sheng.onchange=function(){//当省内部的内容发生改变时
that=this;//that=this就是将当前的this对象复制一份到that变量中, that是一个临时的变量，用于保存当前对象的this状态
//console.log(this.value)
for(var i=0;i<arr.length;i+=2){//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) {
//找市arr[1][0]
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) {//等价于j < arr[x + 1].length,好处是不用每次循环都去取len的值
//将市列表显示出来
var shioption=document.createElement("option");//createElement() 方法通过指定名称创建一个元素
shioption.setAttribute("value",arr[x+1][j]);//修改value
shioption.innerText=arr[x+1][j];
shi.appendChild(shioption);//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
}
}
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.innerText=arr[x+1][y][j];
qu.appendChild(quoption);
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例