JavaScript实战实例剖析——（激励倒计时日历）如今JavaScript在前端开发中的地位越来越高，掌握JavaS

如今JavaScript在前端开发中的地位越来越高，掌握JavaScript的深度往往能决定你职业道路深远，这次通过制作带着倒计时功能的激励日历的小实例，进一步细致的掌握JavaScript的语法与用法。

结构剖析：

<!DOCTYPE html>
<html>
<meta charset="utf-8" author="DylanZZZ">
<head>
    <title>倒计时日历</title>
    <link rel="stylesheet" type="text/css" href="css/timer.css">
</head>
<body>
    <div class="calendar">
        <p id="fulldate"></p>
        <span id="nowdate"></span>
        <strong id="hllo"></strong>
        <span><font color="#C5FFFD">----- 今日剩余时光 -----</font></span>
        <div id="time"></div>
    </div>
    <script src="js/timer.js"></script>
</body>
</ht

CSS部分：

.calendar {
  
    width: 300px; height: 360px; margin: 100px auto;
    background-color: #3CC9FC; text-align: center;
    color: #C1DBF5; 
    border-radius:  40px ; 
    animation: calendar 4s linear infinite; /*这里的动画属性参见CSS3（水纹波动）的文章*/
    
}
/*扩散渐变动画*/
@keyframes calendar { 
0% { box-shadow: 0 0 0 0 rgba(180, 190, 230, 1), 0 0 0 0 rgba(160, 189, 230, 1);
 } 
50% { box-shadow: 0 0 0 20px rgba(180, 190, 230, .5), 0 0 0 10px rgba(180, 189, 240, 1);
 }
100% { box-shadow: 0 0 0 40px rgba(170, 180, 240, 0), 0 0 0 20px rgba(180, 190, 240, 0); }
 } 
.calendar p {
    color: #ffffff;   font: 400 18px/80px "微软雅黑";
}
#nowdate {
    display: block;  height: 100px;
    width: 100px;  background-color: #DFB779;
    text-align: center;  margin: 0 auto;
    font: 700 60px/100px "微软雅黑";  color: #ffffff;
}
.calendar strong {
    margin: 20px auto;  padding: 5px;
    display: block; width: 250px;
    height: 40px; color: #ffffff;
    font: 500 20px/26px "微软雅黑";
    border-top: dashed 1px #ffffff;   /*在顶部添加虚线*/
}
#time {
    color: #ffffff;
    font: 500 20px/40px "微软雅黑";
}

JavaScript部分：

显示当前时间：

window.onload= function(){
	var fulldate = document.getElementById('fulldate');
	var nowdate =document.getElementById('nowdate');
	var hllo = document.getElementById('hllo');
	var time =document.getElementById('time');
	var fullTime = new Date();
	var year = fullTime.getFullYear();
	var month = fullTime.getMonth();
	var date = fullTime.getDate();
	var dayarry = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
	var hour = fullTime.getHours();
	fulldate.innerHTML = year +"年"+(month+1) +"月" +date +"日"+ dayarry[fullTime.getDay()];
	nowdate.innerHTML = date;

主要属性：

window属性：onload

onload属性是一个事件处理程序, 用于Window、XMLHttpRequest、<img>元素等的加载事件，在资源加载时会触发。

window属性：document.getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

new Date()

返回当前的时间。

getFullYear / getMonth / getDate() 方法

getFullYear() 方法可返回一个表示年份/月份/日期的数字。

getDay() 方法

可返回一周（0~6）的某一天的数字。结合上面定义的dayarry数组，输出今天为周几。

innerHTML 属性

改变 HTML 元素的内容

随机励志语句部分

var hlloarry=[
		  "人在旅途，难免会遇到荆棘和坎坷，风雨过后，有美丽的彩虹。",
			 "要想改变命运，首先改变自己",
			 "勤奋是你生命的密码，能译出你一部壮丽的史诗",
			 "左右一个人成功的，不是能力，而是选择",
			 "没有退路的时候，正是潜力发挥最大的时候",
			 "没有天生的信心，只有不断培养的信心",
			
	];
	 hllo.innerHTML=hlloarry[parseInt(hour/2)];

主要属性：

parseInt() 函数

parseInt() 函数可解析一个字符串，并返回一个整数。

倒计时部分

var endTime = new Date(year,month,date,23,59,59);
	 setInterval(fun,1000);
	 function fun(){
		 var nowTime = new Date();
		 var s = parseInt((endTime-nowTime)/1000);/*总共的秒数*/
		 var ss = parseInt(s%60);
		 var m = parseInt((s/60)%60);
		 var h = parseInt((s/60/60)%24);
		 s<10? ss="0"+s:s;
		 m<10? m="0"+m:m;
		 h<10? h="0"+h:h;
		 time.innerHTML=h+"小时"+m+"分"+ss+"秒";
	 }

主要属性：

setInterval(code,millisec）方法

code：调用函数或计算表达式；millisec：调用 code 之间的时间间隔，以毫秒计， 1000为1秒

倒计时计算方法：

通过endtime 减去 nowtime 得出今天还剩多少秒，再转换为时分秒的格式输出出来。