月相变化30秒进度条

dgiij

已于 2024-07-24 10:19:05 修改

阅读量995

点赞数 24

文章标签： html5 css3 javascript

于 2024-07-24 10:01:25 首次发布

本文链接：https://blog.csdn.net/dgiij/article/details/140654868

版权

学习HTML5和CSS3，做了一个月相变化图的30秒进度条。每一个进度图对应阴历初一到三十的月相，变化间隔为1秒，用到jquery，另外需要制作一张满月的240X240的照片，圆月边缘顶着边。
在这里插入图片描述

不说废话，直接上代码：

<style>
.moonr{
	background-color: transparent;
	margin:0;
	padding:0;
	width: 120px;
	height: 240px;
	border-radius: 0  100% 100% 0/ 50%;
	position:relative;
	top:-240px;
	}
.moonl{
	background-color: transparent;
	margin:0;
	padding:0;
	width: 120px;
	height: 240px;
	border-radius:  100%  0 0 100%/ 50%;
	position:relative;
	top:-240px;
	}
.backgr{
	background-color: transparent;
	margin:0;
	padding:0;
	width: 120px;
	height: 240px;
	border-radius: 0  100% 100% 0/ 50%;
	}
.backgl{
	background-color: transparent;
	margin:0;
	padding:0;
	width: 120px;
	height: 240px;
	border-radius: 100%  0 0 100% / 50%;
	}

.frame{
	background-color: transparent;
	display: inline-block;
	width: 120px;
	height: 240px;
	}
.sphare{
	display: flex;
	margin:0;
	padding:0;
	width: 240px;
	height: 240px;
	background-image: url("./moon240.jpg");
	}

</style>

<div class="sphare">
	<div class="frame">
		<div id="moonlb" class="backgl"></div>
		<div id="moonl" class="moonl"></div>
	</div>
	<div class="frame">
		<div id="moonrb" class="backgr"></div>
		<div id="moonr" class="moonr"></div>
	</div>
</div>

<script>

var count=(new Date).getSeconds()%30;
redraw(); 
var clockid=setInterval(redraw,1000);

function redraw(){
	if (count<8) {
		$("#moonl").css("left",0);
		$("#moonrb").css("background","transparent");
		$("#moonr").css("background","black");
		$("#moonl").css("background","black");
		$("#moonr").css("width",(120-16*count)+"px");
		$("#moonl").css("width","120px");
		}
	else if (count<15) {
		$("#moonrb").css("background","transparent");
		$("#moonr").css("background","transparent");
		$("#moonlb").css("background","transparent");
		$("#moonl").css("background","transparent");
		$("#moonr").css("width","120px");
		$("#moonl").removeAttr("border-radius");
		$("#moonl").css("background-image",`radial-gradient(ellipse ${count*32-240}px 100% at right, transparent 50%, black 50%)`);
		}
	else if (count<23) {
		$("#moonrb").css("background","transparent");
		$("#moonr").css("background","transparent");
		$("#moonlb").css("background","transparent");
		$("#moonl").css("background","transparent");
		$("#moonl").css("width","120px");
		$("#moonr").removeAttr("border-radius");
		$("#moonr").css("background-image",`radial-gradient(ellipse ${240-(count-15)*32}px 100% at left, transparent 50%, black 50%)`);
		}
	else  {
		$("#moonr").css("background","black");
		$("#moonlb").css("background","transparent");
		$("#moonl").css("background","black");
		$("#moonr").css("width","120px");
		$("#moonl").removeAttr("background-image");
		$("#moonl").css("border-radius","100%  0 0 100%/ 50%");
		$("#moonl").css("width",(16*count-360)+"px");
		$("#moonl").css("left",(480-16*count)+"px");
		}

	count=(count+1) % 30;
	}

</script>