如今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>
</html>

 

 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 得出今天还剩多少秒，再转换为时分秒的格式输出出来。

版权声明：本文为LinWenQuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/LinWenQuan/p/11984322.html