<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
position: relative;
margin: 0;
}
.redDiv{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.blueDiv{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top:0px;
left: 0px;
border-radius: 50%;
animation: run 0.5s linear forwards;
}
@keyframes run{
from{}
to{left: 300px;}
}
</style>
</head>
<body>
<div class="redDiv"></div>
</body>
<script type="text/javascript">
var redDiv=document.querySelector(".redDiv");
var timer=null;
document.onmousemove = function (ev) {
//获取事件对象
// console.log(window.event);
//兼容火狐写法
// console.log(ev);
//兼容所有
var event = window.event || ev;
//获取到事件之后，来获取事件对象里面代表鼠标位置的两个属性。
// console.log(event.clientX,event.clientY);
//当页面被卷上去一部分的时候，想要DIV跟随鼠标去移动，就必须加上页面卷上去的高度，因为clientY只是获取到鼠标到
// 屏幕上边的距离,而不是到页面顶部的距离
// 获取页面卷上去的兼容写法
var sTop=document.body.scrollTop || document.documentElement.scrollTop;
redDiv.style.left=event.clientX+document.body.scrollLeft+"px";
redDiv.style.top=event.clientY+document.body.scrollTop+"px";
}
document.ondblclick=function () {
clearTimeout(timer);
console.log("我被双击了");
}
document.onclick=function () {
clearTimeout(timer);
timer=setTimeout(function () {
console.log("单机");
},200)
}
//鼠标右击
document.oncontextmenu = function () {
console.log("鼠标右击");
//阻止默认事件
return false;
}
//键盘事件
document.onkeydown = function (ev) {
var event = window.event || ev;
console.log(event.keyCode);
if(event.keyCode == 81){
var blueDiv=document.createElement("div");
blueDiv.className="blueDiv";
document.body.appendChild(blueDiv);
}
}
//键盘抬起来的时候才会触发
document.onkeyup = function () {
console.log("被抬起");
}
//目前我们只可以给document去添加键盘事件，因为当前页面只有document能接收到键盘事件
//特殊案件 alt command
//判断是否按了 ctrl+c
//判断是否按了 command+c
var commandKey=false;
document.onkeydown = function (ev) {
var event = window.event || ev;
if(event.keyCode == 91){
commandKey=true;
}
if(event.keyCode == 67 && commandKey){
console.log("按了command+C");
console.log(event);
}
}
document.onkeyup=function () {
commandKey=false;
}
</script>
</html>
网友评论