当前位置：网站首页>Starting from scratch (I)

Starting from scratch (I)

2022-06-11 06:38:00 【Dare you look at the avatar for three seconds?】

Website structure

html css And js The combination of The necessary preparations
We need to use the jquery Open source core library , So go to relevant websites to download , Then build js file , take jq Apply to new file
establish css file
establish js file The core control file for the game
At first I wanted to make the background move , There may be two main points involved here ：
1 Through the clock control
2 Setting will change the variable to see the value of the background picture you are telling
The basic structure ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> Aircraft battle </title>
		<link rel="stylesheet" type="text/css" href="css/commen.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="stage">
			<div class="bg1"></div>
		</div>
	</body>
</html>

Background movement ：

$(function(){
    
	// When writing code here, you can control all html Code 
	//dom
	var stage=document.getElementById("stage"); // Get stage nodes 
	var bg1=stage.getElementsByClassName("bg1")[0];// Get a background picture 
	// console.log(bg1)
	var topval=0;
	
	// bg1.style.cssText="top: -30px;"
	var t1=setInterval(function(){
    
		// console.log("ddd")
		console.log(bg1.style.cssText)
		// bg1.scrollTop=bg1.scrollTop+10;
		bg1.style.cssText="top: "+topval+"px";
		topval+=1
		
	},70);
	
});
原网站

版权声明
本文为[Dare you look at the avatar for three seconds?]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203020525472157.html

边栏推荐

猜你喜欢

随机推荐