JS学习第十一天总结_js学习报告1000字-CSDN博客

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88957822

1.日期对象

内置对象，JS中有很多内置对象 Math Array Date Vue
var date=new Date();// 调用的是系统时间，如果运行程序的电脑时间改了，获取到的时间也会跟着变
getTime，获得到的毫秒数
- 1秒等于1000毫秒
- 从1970年至今的毫秒数
- 2038年问题
getFullYear，获取年份当前年份
getMonth，获取月份 0-11月
getDate，获取几号 1-31号
getDay，获取星期几 0-6
getHours，获取时
getMinutes，获取分
getSeconds，获取秒

2.新增属性

text-shadow 文字阴影
box-shadow 盒子阴影

简单日历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:500px;
				height:500px;
				margin:100px auto;
				border:2px solid peru;
				border-radius: 20px;
				box-shadow: 5px 5px 5px #999;
				overflow: hidden;
			}
			p{
				height:100px;
				width:500px;
				text-align: center;
				font-size:50px;
				color:purple;
				line-height: 100px;
				text-shadow: 5px 5px 5px #999999;
			}
			#time{
				width:500px;
				height:50px;
				background-color: skyblue;
				text-align: center;
				line-height: 50px;
				font-size:20px;
				text-shadow: 5px 5px 5px #999;
			}
			#week{
				width:500px;
				height:100px;
				background-color: honeydew;
				text-align: center;
				line-height: 100px;
				font-size:40px;
				text-shadow: 5px 5px 5px #999;
			}
			#day{
				width:500px;
				height:250px;
				background-color: gainsboro;
				text-align: center;
				line-height:250px;
				font-size:60px;
				text-shadow: 5px 5px 5px #999;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>金牌日历</p>
			<div id="time">
				<span></span>
			</div>
			<div id="week">
				<span></span>
			</div>
			<div id="day">
				<span></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var date=new Date();
		var y=date.getFullYear();
		var m=date.getMonth()+1;
		var d=date.getDate();
		var w=date.getDay();
		var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		var spans=document.getElementsByTagName("span");
		spans[0].innerHTML=y+"年"+m+"月"+d+"日";
		spans[1].innerHTML=arr[w];
		spans[2].innerHTML=d+"号";
	</script>
</html>

3.定时器

window.setInterval(执行函数，间隔时间);//间隔时间必须是毫秒；window可省略。
注意：第一个参数必须是一个函数，可传入函数名，但是不能加括号。

数字时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;
				width:200px;
				height:80px;
				margin:100px auto;
				border: 2px solid skyblue;
				background-color:papayawhip;
				border-radius: 10px;
				text-align: center;
				font-size:30px;
				line-height: 80px;
				letter-spacing: 5px;
				color:red;
			}
		</style>
	</head>
	<body>
		<span id="time"></span>
		<script type="text/javascript">
			var time=document.getElementById("time");
			function timeShow(){				
				var date=new Date();
				var h=date.getHours();
				var m=date.getMinutes();
				var s=date.getSeconds();
				h<10?h="0"+h:h;
				m<10?m="0"+m:m;
				s<10?s="0"+s:s;				
				time.innerHTML=h+":"+m+":"+s;
			}
			setInterval(timeShow,1000);
		</script>
	</body>
</html>

4.倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;
				width:500px;
				height:50px;
				margin:20px auto;
				border: 2px solid skyblue;
				background-color:papayawhip;
				border-radius: 10px;
				text-align: center;
				font-size:24px;
				line-height:50px;
				letter-spacing: 5px;
				color:red;
				float:left;
			}
		</style>
	</head>
	<body>
		<span>距离十月一号阅兵还有：</span>
		<span id="time"></span>
		<script type="text/javascript">
			var time=document.getElementById("time");
			function djs(){				
				var date1=new Date("2019/10/1 8:00:00");
				var date2=new Date();
				var hs=date1.getTime()-date2.getTime();
				var df=hs/(1000*60*60*24);
				var d=parseInt(df);
				var hf=(df-d)*24;
				var h=parseInt(hf);
				var mf=(hf-h)*60;
				var m=parseInt(mf);
				var sf=(mf-m)*60;
				var s=parseInt(sf);
				time.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
			}
			setInterval(djs,1000);			
		</script>
	</body>
</html>

5.真实时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				height:332px;
				width:388px;
				background: url(img/z.png);
				margin: 100px auto;
				position: relative;
			}
			span{
				height:332px;
				width:388px;
				display: block;
				position: absolute;
				top:0;
				left:0;
			}
			span:nth-child(1){				
				background: url(img/h.png) no-repeat center;
			}
			span:nth-child(2){				
				background: url(img/m.png) no-repeat center;
			}
			span:nth-child(3){				
				background: url(img/s.png) no-repeat center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span id="h"></span>
			<span id="m"></span>
			<span id="s"></span>
		</div>	
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			var h=$id("h");
			var m=$id("m");
			var s=$id("s");
			clock();
			setInterval(clock,1000);			
			function clock(){
				var date=new Date();
				var ms=date.getMilliseconds();
				var ss=date.getSeconds()+ms/1000;
				var mm=date.getMinutes()+ss/60;
				var hh=date.getHours()+mm/60;
				s.style.transform="rotate("+(ss*6)+"deg)";
				m.style.transform="rotate("+(mm*6)+"deg)";
				h.style.transform="rotate("+(hh*30)+"deg)";
			}
		</script>
	</body>
</html>