在网页上做一个时钟效果,动态时钟效果,每个一秒钟获取一次时间渲染到网页

在网页上做一个时钟效果,动态时钟效果,每个一秒钟获取一次时间渲染到网页

在这里插入图片描述

一、css部分

div{
    
    
				width: 400px;
				height: 50px;
				text-align: center;
				margin: 0 auto;
				padding-top: 30px;
				background-color: olive;
				color: aliceblue;
				font-size: 17px;
				border-radius: 100px;
			}

二、body部分

<body>
		
		<div id="cont" >
		</div>
		<script>
			//周期定时器,使得时间可以循环
			var timer=setInterval(()=>{
    
    
				//获取当前时间
				var now=new Date()
				//根据本地时间把Date对象转为字符串
				console.log(now.toLocaleString())
				//通过get获取各时间段
				var year=now.getFullYear()
				var month=now.getMonth()+1
				var date=now.getDate()
				var hours=now.getHours()
				var minutes=now.getMinutes()
				var seconds=now.getSeconds()
				//拼接
				var str=`当前时间是:${
      
      year}${
      
      month<10? '0'+month:month}${
      
      date<10?'0'+date:date}${
      
      hours}时:${
      
      minutes}分:${
      
      seconds}`
				//渲染到网页
				cont.innerHTML=str	
			},1000)
		</script>
	</body>

猜你喜欢

转载自blog.csdn.net/m0_65792710/article/details/126819256
今日推荐