小A是大四的学生,还有半年就要毕业了,就要跟她暗恋了三年的女神分开了。马上就是女神的生日,他想送给女神一个礼物,能让女神开心并记住他的特别礼物。他想到了电子相册,一个漂亮的网页版电子相册,因为他可以从班级网上找到女神的靓照。上一次制作的网页,女神收到礼物后跟小A说她很开心,小A也非常高兴,觉得还应该在网页上增加一些小细节,来让女神感受到自己的心意。
1.加一个播放时的数字倒计时,倒计时完了还有下一张,时间永远都用不完。
2.倒计时做成百分比进度条的样式,可以是彩色的,女神一定会喜欢的。
1.加一个播放时的数字倒计时,倒计时完了还有下一张,时间永远都用不完。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字倒计时</title>
<style type="text/css">
.wrap {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.wrap img {
width: 100%;
}
.head {
text-align: center;
color: skyblue;
font-size: 36px;
}
</style>
</head>
<body>
<div class="head">10</div>
<div class="wrap">
<img src="./bbb_img/img_1.jpg" alt="">
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//找到商品列表以及时间显示span
var starttime = 10;
function Nr(min, max) { // min最小值,max最大值
return Math.round(Math.random() * (max - min)) + min;
}
// 定时器函数
var timer = setInterval(function () {
starttime--;
$(".head").html(starttime);
if (starttime == 0) {
starttime = 10;
$(".wrap img").attr("src", "./bbb_img/img_" + Nr(1, 5) + ".jpg")
// clearInterval(timer)
}
}, 1000); // 设定执行或延时时间
</script>
</html>
2. 倒计时做成百分比进度条的样式,可以是彩色的,女神一定会喜欢的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百分比进度条</title>
<style>
.progressbar {
width: 50%;
margin-top: 5px;
position: relative;
background-image: linear-gradient(-90deg, #182746, yellow);
border-radius: 6px !important;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
margin-top: 5px;
color: white;
}
.wrap {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.wrap img {
width: 100%;
}
</style>
</head>
<body>
<div id="ProgressBarID">
<div class="progressbar">
</div>
</div>
<div class="wrap">
<img src="./bbb_img/img_1.jpg" alt="">
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var starttime = 10;
function Nr(min, max) { // min最小值,max最大值
return Math.round(Math.random() * (max - min)) + min;
}
var progressId = "ProgressBarID";
function setProgressBar(progress) {
if (progress) {
$("#" + progressId + " > div").css("width", String(progress) + "%");
$("#" + progressId + " > div").html(String(progress) + "%");
}
}
var i_ProgressBar = 0;
function doProgressBarLoading() {
if (i_ProgressBar > 100) {
// alert("加载完毕?!!");
// return;
i_ProgressBar = 0;
$(".wrap img").attr("src", "./bbb_img/img_" + Nr(1, 5) + ".jpg")
}
if (i_ProgressBar <= 100) {
setTimeout("doProgressBarLoading()", 100);
setProgressBar(i_ProgressBar);
i_ProgressBar++;
}
}
function setProgressBarCss() {
$("#" + progressId + "").css({ "width": "300px", "height": "25px" });
$("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });
}
$(document).ready(function () {
setProgressBarCss();
doProgressBarLoading();
});
</script>
都市上空的星星恒星就是类似太阳一类大的天体,其本身内部会发生反应,并将能量以光的
- ,像哈雷彗星之类,我们看到的光是它在经过太阳系时,其材料被溶化掉的彗尾造成的现象,所看到的彗星往往拖着长尾巴。夜晚能看到的星星大部分的是恒星,有几颗是我们太阳系的行星,例如:金星、水星、火星。恒星的发光原理与我们的太阳相类似,大部分是氢聚变成氦核的过程释放能量,还有一部分是氦聚变释放能量。只是因为他们离我们很远才看起来是颗温柔的小星星,其实他们比太阳都大得多。而行星是因为反射太阳的光才看起来亮的,只不过是沾了离我们近的光,看起来好像比恒星们都亮。
在天空中看起来和月亮一样大的太阳,它的直径是139.2万公里,体积约是地球的130万倍 [2] 。说巧,太阳的直径是月亮的400来倍,但它到地球的距离也比月亮远了大约400来倍,所以看上去大小就差不多了。
作为一颗卫星,月亮在太阳系已发现的66颗卫星中算是大个头的了。比月亮还大的卫星只有四五颗,其中直径最大的木卫三,直径为5200多公里。其它的大都只有几十到几百公里。
地球作为一颗行星,其大小在八大行星中排行第五,算是个中等个子。最大的木星体积是地球的1300倍,最亮的金星和地球大小差不多,红色的火星体积则只及地球的八分之一多。
行星和卫星,比起太阳系的家长――太阳来说,确实是一些小不点,就像芝麻和西瓜。太阳在太阳系里真可谓唯我独尊。然而,光耀无比的太阳同满天看起来只有针尖大小的恒星比起来,就要黯然失色――它只是亿万颗恒星中很普通的一颗,只能算是中等大小。位于天蝎座的心宿二,直径是太阳的600倍,猎户座的参宿四,半径是太阳的900倍。仙王座有一颗星更大,半径是太阳的1600倍,达11亿公里,如果把它放到太阳的位置上,连木星也要处于它体内。不过它们大都是处于演化较晚阶段的红巨星,密度都极小。
当然也有一些恒星的体积要远比太阳小。处于恒星演化末期的白矮星,体积比地球还小,直径从几百公里到几千公里。最小的恒星――中子星,直径居然只有10公里。可别小瞧了这两类小恒星,它们虽然小,但质量却很大,一般都和太阳相当。因而它们
都市上空的