js_练习:倒计时

最新推荐文章于 2024-05-12 10:59:33 发布

跟着宝哥学java

最新推荐文章于 2024-05-12 10:59:33 发布

阅读量70

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/mtb278750/article/details/130593654

版权

1 倒计时

<html>
    <head>
	     <title>js练习倒计时</title>
		 <meta charset="utf-8"/>
		 <style type="text/css">
		     table{
			    width:900px;
				/*border:1px solid blue;*/
				margin:10px auto;
				border-collapse:collapse;/*合并相邻单元格之间的边框*/
			 }
			 td{
			    font-size:24px;
				padding:10px;
				border:1px solid blue;
			 }
			 
			 div{
			    border:1px solid blue;
				width:1000px;
				margin:100px auto;
				apdding:10px;
				font-size:30px;
				color:red;
			 }
			 span{
			    /*
				 display:
				    block : 块标签
					none : 　隐藏
					inline : 　行标签
				*/
				display:block;
				border:1px solid blue;
			 }
			 #span_time{
			    background-color:#aa99aa;
			 }
			 #span_djs{
			    background-color:#66aacc;
			 }
		 </style>
	</head>
	<body>  
	     <!--
		  写页面的步骤：
		     1 html创建标签
			 2 css 样式和布局
			 3 标签注册事件
			 4 js方法
		 -->
		 <script type="text/javascript">
		       //文档加载成功  span就需要设置文本内容
			   var ospanTime,ospanDjs,oDateNian;
			   window.onload=function(){
			        //给全局变量赋值
					ospanTime=document.getElementById("span_time");
					ospanDjs=document.getElementById("span_djs");
					oDateNian=new Date(2023,1-1,21);
			        //设置span_time文本内容为当前时间：每隔1秒钟就设置其文本内容
					setCurrentTime();
					setDjs();
					window.setInterval(function(){setCurrentTime();setDjs();},1000);
					
					//window.setInterval(setDjs,1000);
			   }
			   function setCurrentTime(){
					var date=new Date();
					ospanTime.innerHTML=date.toLocaleString().bold();
			   }
			   
			   function setDjs(){
					var date=new Date();
					var timeCha=oDateNian.getTime()-date.getTime();
					var day=parseInt(timeCha/1000/3600/24);
					var hour=parseInt(timeCha/1000%(3600*24)/3600);
					var minute=parseInt(timeCha/1000%3600/60);
					var second=parseInt(timeCha/1000%60);
					ospanDjs.innerHTML="距离过年2023/01/21还有"+day+"天"+hour+"时"+minute+"分"+second+"秒".bold().fontcolor("#ff00ff");
			   }
		 </script>
		 <div>
		     <span id="span_time"></span>
			 <span id="span_djs"></span>
		 </div>
	</body>
</html>