<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>打砖块游戏</title>
	<link rel="stylesheet" href="">
	<style>
		*{margin: 0px;padding: 0px;}
		.ball{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			position: fixed;
			left: 0px;
			top: 0px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="ball" id="ball"></div>
</body>
<script type="text/javascript">
	/*通过document对象的getElementById获取到div*/
	var ball= document.getElementById("ball");
	/*获取浏览器的宽高*/
	var windowWidth = document.documentElement.clientWidth; 
	var windowHeight = document.documentElement.clientHeight;
	console.log("浏览器的宽"+windowWidth)
	console.log("浏览器的高"+windowHeight)

	/*修改div的css样式*/
	/*ball.style.left = "60px";*/

	/*定义一个球当前的位置*/
	var ballX = 0;
	var ballY = 0;
	/*循环周期函数*/
	setInterval(function(args) {
		ball.style.left = ballX + "px";
		ballX += 1;
	}, 10);


	document.onmousemove = positionBody;
	//当需求为获得的坐标值相对于body时，用
	function positionBody(event){
	    event = event||window.event;
	    //获得相对于body定位的横标值；
	    var x=event.clientX
	    //获得相对于body定位的纵标值；
	    var y=event.clientY
	    console.log("鼠标坐标x"+x);
	    console.log("鼠标坐标y"+y)
	}
</script>
</html>

 

最后修改于 2021-03-24 21:08:11
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇