vue动态模拟展示太阳系行星运动轨迹及距离大小代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：vue动态模拟展示太阳系行星运动轨迹及距离大小代码，可切换不同的视图、还可模拟行星运行轨迹动画、设置修改参数等。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

     <style>
     
body {
  overflow: hidden;
  background: black; }

.planet_container,
.planet,
.satellite_container,
.satellite,
.sun {
  transition: all ease 2s; }

.sun {
  position: absolute;
  border-radius: 50%; }

.planet_container {
  position: absolute;
  border-radius: 50%;
  transform-origin: center; }
  .planet_container .planet {
    border-radius: 50%;
    position: absolute;
    cursor: pointer; }
    .planet_container .planet .satellite_container {
      position: absolute;
      border: solid;
      border-width: 1px 0 0 1px;
      border-radius: 50%; }
      .planet_container .planet .satellite_container .satellite {
        position: absolute;
        border-radius: 50%; }

.planet_container-SPEED,
.planet_container-DISTANCE {
  transition: all ease 2s, box-shadow ease 0.6s; }
  .planet_container-SPEED:hover,
.planet_container-DISTANCE:hover {
    box-shadow: 0 0 25px white !important; }
    .planet_container-SPEED:hover .planet,
.planet_container-DISTANCE:hover .planet {
      box-shadow: 0 0 25px white !important; }

.planet-WIDTH {
  transition: all ease 2s, box-shadow ease 0.6s; }
  .planet-WIDTH:hover {
    box-shadow: 0 0 25px white !important; }

.action-container {
  z-index: 999;
  position: absolute;
  color: white; }
  .action-container div {
    margin-top: 10px; }
  .action-container button {
    padding: 10px 15px;
    margin-left: 10px; }
  .action-container input {
    margin-left: 13px; }
    .action-container input[type="number"] {
      width: 50px; }

.information-container {
  z-index: 999;
  position: absolute;
  color: white;
  right: 15px;
  bottom: 15px;
  border: solid 1px grey;
  border-radius: 15px;
  padding: 0 20px 10px 20px;
  font-size: 14px; }
  .information-container .name {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.4rem; }

@keyframes gravitation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

      </style>
</head>
<body>
    <div id="app">
      
	<div id="app">
		<!-- MAIN CONTENT  -->
		<div class="sun" :style="sunStyle()"></div>
		<div
			class="planet_container"
			:class="`planet_container-${mode}`"
			v-for="(p, i) in planetsFiltered"
			:style="planetContainerStyle(i)"
			@click="onClickPlanetContainer(i)"
		>
			<div
				class="planet"
				:class="`planet-${mode}`"
				:style="planetStyle(i)"
				@click="onClickPlanet(i)"
			>
				<div
					class="satellite_container"
					v-for="(s, j) in p.satellites"
					:style="satelliteContainerStyle(i, j)"
				>
					<div class="satellite" :style="satelliteStyle(i, j)"></div>
				</div>
			</div>
		</div>

		<!-- INFORMATION  -->
		<div class="information-container">
			<p class="name">{{ selectedPlanet.name }}</p>
			<p>
				Diameter : {{ parseNumeriqueSpace(selectedPlanet.diameter * 1000) }} km
			</p>
			<p>
				Revolution : {{ parseNumeriqueSpace(selectedPlanet.rotationTime) }} days
			</p>
			<p>Sun Distance : {{ parseNumeriqueSpace(selectedPlanet.ua * 150) }} Mkm</p>
		</div>

		<!-- ACTION  -->
		<div class="action-container">
			<div>
				<span v-for="m in modes">
					<button :disabled="m === mode" @click="switchMode(m)">{{ m }}</button>
				</span>
			</div>
			<div v-if="mode !== 'WIDTH' || speedReal">
				<input type="range" step="1" min="1" max="1000" v-model="speedRatio" />
				<input type="number" step="1" min="1" max="1000" v-model="speedRatio" />
				<span>days / second</span>
			</div>
			<div>
				<button v-if="mode === 'WIDTH'" @click="speedReal = !speedReal">
					{{ speedReal ? "Speed Real" : "Speed Fake" }}
				</button>
			</div>
			<div v-if="mode === 'DISTANCE'">
				<button :disabled="planetsFilteredLength <= 4" @click="zoomIn">
					Zoom IN
				</button>
				<button
					:disabled="planetsFilteredLength >= planets.length"
					@click="zoomOut"
				>
					Zoom OUT
				</button>
			</div>
		</div>
	</div>

    </div>
    <script>
    var Main =  
  {
	// ##################################################
	// DATA #############################################
	// ##################################################
	data() {
		return {
			mode: null,
			modes: ["WIDTH", "SPEED", "DISTANCE"],
			speedRatio: 50,
			speedReal: false,
			sun: {
				diameter: "1392",
				colors: ["gold", "orange"]
			},
			selectedPlanetId: 3,
			planetsFilteredLength: 0,
			planets: [
				{
					name: "mercure",
					diameter: "4.7428794",
					rotationTime: "87.969",
					ua: "0.47",
					colors: ["gold", "darkBlue"]
				},
				{
					name: "venus",
					diameter: "12.104",
					rotationTime: "224.701",
					ua: "0.7",
					colors: ["forestgreen", "springGreen"]
				},
				{
					name: "earth",
					diameter: "12.742",
					rotationTime: "365.256",
					ua: "1",
					colors: ["white", "blue"],
					backgroundUrl:
						"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6d358ffa-5177-4b84-963f-9a1957b5a8d0/d8vp0fw-994cd783-be4b-46d3-86a8-2a30d4791003.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzZkMzU4ZmZhLTUxNzctNGI4NC05NjNmLTlhMTk1N2I1YThkMFwvZDh2cDBmdy05OTRjZDc4My1iZTRiLTQ2ZDMtODZhOC0yYTMwZDQ3OTEwMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.0DhwRtmDbKrm-cI67M7nD6zVeH6xKg1nbgFZlUSDs5s",
					satellites: [
						{
							name: "moon",
							diameter: "3.4742",
							rotationTime: "29..........完整代码请登录后点击上方下载按钮下载查看