会跳动的日历

最新推荐文章于 2024-04-28 17:38:55 发布

曩昔方

最新推荐文章于 2024-04-28 17:38:55 发布

阅读量336

点赞数 1

分类专栏： css Js 文章标签： html css 日历

本文链接：https://blog.csdn.net/qq_34551390/article/details/78255666

版权

Js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

一、简介

编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：

年月日，周几，时分秒都会随着系统时间的走动而改变

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0; 
			font-size: 0px;
			font-family: '微软雅黑';
		}
		.contain-wrapper{
			margin: 0 auto;
			padding-top: 70px;
			width: 470px;
			height: 230px;
			background: #000000;
			border-radius: 30px;
		}
		.timer-wrapper p{
			font-size: 44px;
			color: #ffffff;
		}
		.year{
			width: 470px;
			text-align: center;
		}
		.timer-footer{
			width: 460px;
			text-align: center;
		}
		.timer-footer p:nth-child(1){
			display: inline-block;
		}
		.timer-footer p:nth-child(2){
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="contain-wrapper">
		<div class="timer-wrapper">
			<p class="year"></p>
			<div class="timer-footer">
				<p></p>
				<p></p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
		
		/*
		*这是一个获取当前日期的函数
		 */
		function showLocaleDate(objb){
			var str = objb.getFullYear()+"年"+(objb.getMonth()+1)+"月"+objb.getDate()+"日";
			return str;
		}
		var year=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[0];

		
		/*
		*这是一个获取星期几的函数
		 */
		function showLocaleWeek(objC){
			var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");  
			var week = objC.getDay();  
			var weekString = "星期"+ weekArray[week];
			return weekString;
		}
		var wk=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[1];
		/*
		*这是一个获取当前时间的函数
		 */

		function showLocaleTime(objD){
			var hh = objD.getHours();
			if(hh<10) hh = '0' + hh;
			var mm = objD.getMinutes();
			if(mm<10) mm = '0' + mm;
			var ss = objD.getSeconds();
			if(ss<10) ss = '0' + ss;
			var reflash=hh + ":" + mm + ":" + ss;
			return reflash;
		}
		var now=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[2];

		function showTime(){
			var today=new Date();
			year.innerHTML=showLocaleDate(today);
			wk.innerHTML=showLocaleWeek(today);
		        now.innerHTML=showLocaleTime(today);
		    	window.setTimeout("showTime()",1000);
		}
		showTime();
</script>
</html>

曩昔方

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
会跳动的日历

一、简介编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：年月日，周几，时分秒都会随着系统时间的走动而改变二、代码 Document *{ margin:0; padding: 0; font-size: 0px; font-family: '微软雅黑'; } .contain-wrapper{
复制链接

扫一扫

专栏目录