获取你的事件按钮之后,就可以根据键位来改变小色块的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html,
body {
height: 100%;
width: 100%;
}
.re {
height: 200px;
width: 200px;
background-color: red;
color: #4169E1;
font-size: 50px;
position: relative;
}
</style>
</head>
<body>
<div class="re">
点赞
</div>
<script type="text/javascript">
var re = document.getElementsByClassName('re')[0];
// re.style.backgroundColor= 'black'
//什么是监听器
re.addEventListener('click', function() {
alert('我喜欢你做我女朋友吧')
// re.innerHTML +='+1'
})
//鼠标放上面有阴影
var addShadow = function() {
re.style.boxShadow = '10px 10px 10px black'
}
var removeShadow = function() {
re.style.boxShadow = 'none'
}
re.addEventListener('mouseover', addShadow)
re.addEventListener('mouseleave', removeShadow)
//鼠标事件
//鼠标摁下
// re.addEventListener('mousedown',function(){
// })
// //鼠标拿起
// re.addEventListener('mouseup',function(){
// })
// //鼠标移动上去
// re.addEventListener('mouseover',function(){
// })
// //鼠标拿走
// re.addEventListener('mouseleave',function(){
// })
// //鼠标移动
// re.addEventListener('mousemove',function(){
// })
//键盘事件
var position = {
up:0,
left:0,
}
var up = function(){
position.up+= 20
re.style.top = - position.up +'px'
}
var bottom = function(){
position.up-= 20
re.style.top = - position.up +'px'
}
var left = function(){
position.left+= 20
re.style.left = -position.left + 'px'
}
var right = function(){
re.style.left = -position.left + 'px'
position.left-= 20
}
document.addEventListener('keypress', function(event) {
//keyboardEvent= event
console.log(event.key)
switch (event.key) {
case 'w':
up()
break
case 's':
bottom()
break
case 'a':
left()
break
case 'd':
right()
break
default :
break
}
})
// document.addEventListener('keydown',function(){
// console.log('key')
// })
// document.addEventListener('keyup',function(){
// console.log('woaini')
// })
//页面时间
//表单时间
</script>
</body>
</html>