<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太阳系</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* background-image: url(img/timg.jpg ); */
height: 2000px;
}
/* 太阳 */
#sunId {
left: 700px;
top: 700px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
}
#sunId img {
width: 100px;
height: 100px;
border-radius: 50%;
}
/* 水星 */
#mercuryId {
position: absolute;
left: 745px;
top: 660px;
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
}
#mercuryB {
position: absolute;
left: 665px;
top: 665px;
width: 169px;
height: 169px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 金星 */
#venusId {
position: absolute;
left: 740px;
top: 600px;
width: 20px;
height: 20px;
border-radius: 50%;
}
#venusId img {
width: 20px;
height: 20px;
border-radius: 50%;
}
#venusB {
position: absolute;
left: 610px;
top: 610px;
width: 280px;
height: 280px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 地球 */
#earthId {
position: absolute;
left: 740px;
top: 520px;
width: 20px;
height: 20px;
border-radius: 50%;
}
#earthId img {
width: 20px;
height: 20px;
border-radius: 50%;
}
#earthB {
position: absolute;
left: 530px;
top: 530px;
width: 440px;
height: 440px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 火星 */
#marsId {
position: absolute;
left: 742px;
top: 432px;
width: 16px;
height: 16px;
border-radius: 50%;
}
#marsId img {
width: 16px;
height: 16px;
border-radius: 50%;
}
#marsB {
position: absolute;
left: 440px;
top: 440px;
width: 620px;
height: 620px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 木星 */
#jupiterId {
position: absolute;
left: 730px;
top: 360px;
width: 40px;
height: 40px;
border-radius: 50%;
}
#jupiterId img {
width: 40px;
height: 40px;
border-radius: 50%;
}
#jupiterB {
position: absolute;
left: 380px;
top: 380px;
width: 740px;
height: 740px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 土星 */
#staurnId {
position: absolute;
left: 720px;
top: 300px;
width: 60px;
height: 60px;
border-radius: 50%;
}
#staurnId img {
width: 60px;
height: 60px;
border-radius: 50%;
}
#staurnB {
position: absolute;
left: 330px;
top: 330px;
width: 840px;
height: 840px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 天王星 */
#uranusId {
position: absolute;
left: 730px;
top: 240px;
width: 40px;
height: 40px;
border-radius: 50%;
}
#uranusId img {
width: 40px;
height: 40px;
border-radius: 50%;
}
#uranusB {
position: absolute;
left: 260px;
top: 260px;
width: 980px;
height: 980px;
border-radius: 50%;
border: 1px solid #cccccc;
}
/* 海王星 */
#neptuneId {
position: absolute;
left: 730px;
top: 180px;
width: 40px;
height: 40px;
border-radius: 50%;
}
#neptuneId img {
width: 40px;
height: 40px;
border-radius: 50%;
}
#neptuneB {
position: absolute;
left: 200px;
top: 200px;
width: 1100px;
height: 1100px;
border-radius: 50%;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<input type="button" value="测试" id="btn">
<div id="sunId">
<img src="imgs/0.jpg" alt="">
</div>
<div id="mercuryB">
</div>
<div id="mercuryId">
</div>
<div id="venusB"></div>
<div id="venusId">
<img src="imgs/1.jpg" alt="">
</div>
<div id="earthB"></div>
<div id="earthId">
<img src="imgs/2.jpg" alt="">
</div>
<div id="marsB"></div>
<div id="marsId">
<img src="imgs/3.jpg" alt="">
</div>
<div id="jupiterB"></div>
<div id="jupiterId">
<img src="imgs/4.jpg" alt="">
</div>
<div id="staurnB"></div>
<div id="staurnId">
<img src="imgs/1.gif" alt="">
</div>
<div id="uranusB"></div>
<div id="uranusId">
<img src="imgs/5.jpg" alt="">
</div>
<div id="neptuneB"></div>
<div id="neptuneId">
<img src="imgs/6.jpg" alt="">
</div>
</body>
</html>
<script>
// 水星
function mercury() {
// 圆心点：750，750
//半径:195
let degree = 0;
let startLeft = 750;
let startTop = 665;
let r = 85;
let myTimer = setInterval(() => {
// 一、数据修改
//1.计算数据
degree++;
let hu = Math.PI / 180 * degree;
let left1 = startLeft + r * Math.sin(hu);
let top1 = startTop + (r - r * Math.cos(hu));
//2.边界判断
if (degree % 360 == 0) {
degree = 0;
}
// 二、修改外观
$$("#mercuryId").style.left = (left1 - 5) + "px";
$$("#mercuryId").style.top = (top1 - 5) + "px";
}, 5);
}
// 金星
function venus() {
// 圆心点：750，750
//半径:195
let degree = 0;
let startLeft = 750;
let startTop = 610;
let r = 140;
let myTimer = setInterval(() => {
// 一、数据修改
//1.计算数据
degree++;
let hu = Math.PI / 180 * degree;
let left1 = startLeft + r * Math.sin(hu);
let top1 = startTop + (r - r * Math.cos(hu));
//2.边界判断
if (degree % 360 == 0) {
degree = 0;
}
// 二、修改外观
$$("#venusId").style.left = (left1 - 10) + "px";
$$("#venusId").style.top = (top1 - 10) + "px";
}, 10);
}
//地球
function earth() {
// 圆心点：750，750
//
用javascript模拟太阳系行星的圆周运动.zip
需积分: 12 154 浏览量
2019-07-11
16:48:06
上传
评论
收藏 539KB ZIP 举报
行星.zip （9个子文件） 
新建文件夹 (2) 
demo14太阳系.html 13KB imgs 
5.jpg 7KB
1.gif 117KB 3.jpg 4KB 4.jpg 5KB 2.jpg 44KB 1.jpg 274KB 6.jpg 9KB 0.jpg 98KB资源评论
