【web前端】显示时间

最新推荐文章于 2024-04-29 10:35:43 发布

lllllllllllllb

最新推荐文章于 2024-04-29 10:35:43 发布

阅读量1.6k

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/lllllllllllllb/article/details/125563777

版权

把刚开始学习时写的一些前端整理了出来。
效果图如下：
在这里插入图片描述
代码：
js文件：

function setTime(){
						var today=new Date();
						var year=today.getFullYear();
						var mon=today.getMonth()+1;
						var date=today.getDate();
						var day=today.getDay();
						
						var days=new Array("日","一","二","三","四","五","六");
						if(mon<10){
							mon="0"+mon;
						}
						if(date<10){
						   date="0"+date;
						}
						
						document.getElementById('txt1').innerHTML=year+"年"+mon+"月"+date+"日"+"(星期"+days[day]+"）";
						
						}
			function getTime(){
				var today=new Date();
				var hour=today.getHours();
				var min=today.getMinutes();
				var sec=today.getSeconds();
				if(hour<10){
					hour="0"+hour;
				}
				if(min<10){
					min="0"+min;
				}
				if(sec<10){
					sec="0"+sec;
				}
				document.getElementById('txt2').innerHTML=hour+":"+min+":"+sec;
			}
						var myt=setInterval("getTime();",1000);

css:

.div-time{
				width:300px;
				background-color: #7c7c7c;
				opacity: 0.85;
				text-align: center;
				margin-left: 40%;
				margin-top: 20%;
				border-radius: 10px;
				font-family: "楷体";
				font-size: 20px;
				box-shadow: 5px 5px 5px #c5c5c5;
			}

<body onload="setTime(),getTime();">
		<div class="div-time">
			<div id=txt1></div>
			<div id=txt2></div>
		</div>
	</body>

lllllllllllllb

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【web前端】显示时间

时间，使用js编写
复制链接

扫一扫

【web前端】显示时间

“相关推荐”对你有帮助么？