几个小问题
问题描述：做网页的时候遇到两个小问题，希望老师可以帮助解决一下，万分感谢
问题描述1：鼠标移动到页面上以（100，100）为原点半径为10的范围时将本页面替换为另一页面，在此页面上：首先显示浏览器访问过的页面
问题描述2：当鼠标上某个键按下时在页面上显示键的编号名称，当按下键盘上某个键时在页面上显示键的名称及是否同时按下了CTRL键或ALT键或SHIFT键
15
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕小小
2022-05-09 15:13:27
同学你好，Java属于后端主要侧重于开发接口，同学若想进一步完整的学习前端知识，可学习下前端体系课程：https://class.imooc.com/sale/fe2021
同学参考如下思路试下：
1、获取鼠标位置，再计算一下是否在指定范围内；若在指定的范围则再进行进一步处理。参考实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.circle {
position: absolute;
top: 90px;
left: 90px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #999;
}
</style>
<script>
let circleE, textE, centerX, centerY, radius;
window.onload = () => {
circleE = document.getElementById('circle');
textE = document.getElementById('content');
radius = circleE.offsetWidth / 2; // 半径
centerX = circleE.offsetLeft + radius; // 圆心x坐标
centerY = circleE.offsetTop + radius; // 圆心y坐标
console.log(centerX+":"+centerY)
document.body.addEventListener('click', isPointInCircle)
}
function isPointInCircle() {
let e = window.event;
let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
let x = e.pageX || e.clientX + scrollX;
let y = e.pageY || e.clientY + scrollY;
let diffX = centerX - x;
let diffY = centerY - y;
let inCircle = radius * radius >= diffX * diffX + diffY * diffY;
textE.innerHTML = inCircle ? '鼠标在圆内' : '鼠标不在圆内';
}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="circle" class="circle">
<p id="content"></p>
</div>
</div>
</body>
</html>2、可通过keyCode获取下按下的按键再显示按键编号。shift编号为16，ctrl编号为17，alt编号为18。
<script type="text/javascript">
document.onkeydown = keydown;
function keydown() {
var keycode = event.keyCode;
alert(keycode);
}
</script>祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星