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.53",
							colors: ["white", "grey"]
						}
					]
				},
				{
					name: "mars",
					diameter: "6.779",
					rotationTime: "686.980",
					ua: "1.666",
					colors: ["darkred", "red"]
				},
				{
					name: "jupiter",
					diameter: "139.82",
					rotationTime: "4332.6",
					ua: "5.2",
					colors: ["#876f51", "#9c661f"],
					satellites: [
						{
							name: "europe",
							diameter: "3.1216",
							rotationTime: "3.551",
							colors: ["brown", "pink"]
						},
						{
							name: "ganymede",
							diameter: "5.2644",
							rotationTime: "7.15",
							colors: ["blue", "cyan"]
						},
						{
							name: "callisto",
							diameter: "4.8206",
							rotationTime: "16.689",
							colors: ["orange", "grey"]
						}
					]
				},
				{
					name: "Saturne",
					diameter: "116.46",
					rotationTime: "10759.2",
					ua: "9.5",
					colors: ["#b09f74", "#b8902a"],
					satellites: [
						{
							name: "Thétys",
							diameter: "1.066",
							rotationTime: "1.89",
							colors: ["white", "grey"]
						},
						{
							name: "Dioné",
							diameter: "1.1234",
							rotationTime: "2.74",
							colors: ["white", "white"]
						},
						{
							name: "Rhéa",
							diameter: "1.5286",
							rotationTime: "4.52",
							colors: ["white", "grey"]
						},
						{
							name: "Titan",
							diameter: "5.1495",
							rotationTime: "15.95",
							colors: ["gold", "white"]
						},
						{
							name: "Japet",
							diameter: "1.4712",
							rotationTime: "79.33",
							colors: ["springGreen", "cyan"]
						}
					]
				},
				{
					name: "uranus",
					diameter: "50.724",
					rotationTime: "30688.4",
					ua: "19.2",
					colors: ["#a3bebf", "#387a7d"],
					satellites: [
						{
							name: "titania",
							diameter: "0.7884",
							rotationTime: "8.7",
							colors: ["#387a7d", "#a3bebf"]
						}
					]
				},
				{
					name: "neptune",
					diameter: "49.244",
					rotationTime: "60181.3",
					ua: "30.1",
					colors: ["#7f8dc7", "#01146b"],
					satellites: [
						{
							name: "triton",
							diameter: "2.7068",
							rotationTime: "5.877",
							colors: ["forestgreen", "#7f8dc7"]
						},
						{
							name: "néréide",
							diameter: "0.340",
							rotationTime: "360.14",
							colors: ["#01146b", "#7f8dc7"]
						}
					]
				}
			]
		};
	},

	// ##################################################
	// COMPUTED #########################################
	// ##################################################
	computed: {
		selectedPlanet() {
			return this.planets[this.selectedPlanetId];
		},.........完整代码请登录后点击上方下载按钮下载查看