![[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
<!DOCTYPE html>
<html>
<head>
<title>防百度文字搜索</title>
<style type="text/css">
#box{
width: 200px;height: 200px;
margin: 100px auto;
background: #ccc;
padding: 10px;
text-indent: 2em; /*段落缩进*/
}
#nav_menu{
width: 100px;height: 30px;
background: $fff;
padding: 5px;
border-radius: 5px;
border:1px solid $ccc;
display: none;
position: fixed;top: 0;left: 0; /*固定定位*/
}
button{
border:none;
color:red;
}
#nav_menu button:hover{
color: green;
}
</style>
</head>
<body>
<div id="box" onmouseup="change()">
深山的尽头，一朵蔷薇花轻轻地落下，一如绽放时那般小心翼翼。零落着的如梦的春晖，齐齐消散在远方，轻点墨汁，写一段属于它的岁月。芳华陨落确为平凡的故事，盛放的韶华乃时间无法留住，于是一切应当归为平静。
</div>
<p id="nav_menu"><button onclick='copyText()'>复制</button>|<button onclick="getSearch()">搜索</button></p>
<script type="text/javascript">
//创建一个方法,内容为你所
function getSelect(){
//这个操作是返回用户返回的一个文本,然后转换为字符串;
return window.getSelection().toString() //gerSelection()方法可以返回selection对象,用于表示用户选择的文本范围
}
function change(event){
//多种浏览器兼容;
var e=event || window.event;
var str=getSelect(); //用户获取文本的范围;
//判断是否有获取文本的长度;
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';
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>总结:有点不明白left,top:
menu.style.left=x+'px';
menu.style.top=y+'px';
样式还可以改变成这个样;服!!!
