百度前端技术学院：第二十五天到第二十七天倒数开始滴答滴滴答滴

本文链接：https://blog.csdn.net/Xiaoyi_Xie/article/details/82666310

假设要在某种特殊的机器人上写代码，但是这个机器人本身只实现了以下两个方法（函数）：

Go，表示向当前方向前进一步
TurnLeft，表示向左转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>数字相关操作</title>
</head>
<body>

<script>
function Go() {
    console.log("Go");
}

function GoSteps(n) {
  var re= /^-?[0-9]+.?[0-9]*$/;
  if(n===undefined){
      Go();
  }
  if(!re.test(n)){  //typeof n != "number"
      if(n==true){
          Go();
      }
  }else{
      if(parseInt(n)>=1){
          while(parseInt(n)){
              Go();
              n--;
          }
      }
  }
}

GoSteps(10); // Go 10次
GoSteps(1); // Go 1次
GoSteps(); // Go 1次，认为缺少参数时，默认参数为1
GoSteps(0);  // 0次
GoSteps(-1);  // 0次
GoSteps(1.4);  // Go 1次
GoSteps(1.6);  // Go 1次
GoSteps(-1);  // 0次
GoSteps(true);  // Go 1次
GoSteps(false);  // 0次
GoSteps(NaN);  // 0次
GoSteps(null);  // 0次 */

</script>
</body>
</html>

我们现在来做一个最简单的时钟，通过小练习来学习 Date，复习定时，然后再练习一下函数的封装具体需求如下：

在页面中显示当前日期及时间，按秒更新
格式为 YYYY 年 MM 月 DD 日星期 D HH:mm:ss
注意位数的补齐，比如：
– 假设时间为2008年10月10日星期一的12点12分12秒，显示2008年10月10日星期一 12:12:12
– 假设时间为2008年1月1日星期一的3点2分2秒，显示2008年01月01日星期一 03:02:02
编码过程中，我们希望你注意对函数的封装，尽量让一个函数就做一个事情，而不要把所有的功能、代码揉在一起：

封装一个函数，来根据某个日期返回这一天是星期几
封装一个函数，把月、日、小时等出现个位数的情况前面补充0，补充为两位，比如1变为01
封装一个函数，把最后的日期时间，按照要求的格式进行包装
可能不止上面这些，尽可能地进行功能的解耦和拆解

编码
完成上面需求后，现在需求做一些小的变更
输出格式变为：2008-10-10 Monday 07:10:30 PM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>日期</title>
</head>
<body>

<script>

function getWeekday1(weekday){

    switch (weekday){
        case 0:
        weekday="星期日";
        break;
        case 1:
        weekday="星期一";
        break;
        case 2:
        weekday="星期二";
        break;
        case 3:
        weekday="星期三";
        break;
        case 4:
        weekday="星期四";
        break;
        case 5:
        weekday="星期五";
        break;
        case 6:
        weekday="星期六";
        break;

    }
    return weekday;
}

function getWeekday2(weekday){

switch (weekday){
    case 0:
    weekday="Sunday";
    break;
    case 1:
    weekday="Monday";
    break;
    case 2:
    weekday="Tuesday";
    break;
    case 3:
    weekday="Wednesday";
    break;
    case 4:
    weekday="Thursday";
    break;
    case 5:
    weekday="Friday";
    break;
    case 6:
    weekday="Saturday";
    break;

}
return weekday;
}

function addZero(a){
    var newa=a;
    if(a<10){
        newa="0"+a.toString();
    }
    return newa;
}



function toFormat1(){
     nowDate=new Date();
     month=nowDate.getMonth()+1;//getMonth()返回0到11;
     day=nowDate.getDate();//显示日期;
     hour=nowDate.getHours();
     minute=nowDate.getMinutes();
     second=nowDate.getSeconds();
     weekday=nowDate.getDay();//显示星期;
     document.body.innerText=nowDate.getFullYear()+"年"+addZero(month)+"月"+addZero(day)+"日"+getWeekday1(weekday)+" "+addZero(hour)+":"+addZero(minute)+":"+addZero(second);
}

function changehours(b){
    var newhour=b;
    if(newhour>12){
        newhour=newhour-12;
    }
    return addZero(newhour);
}

function printDate(){
    if(hour<12)
    document.body.innerText=nowDate.getFullYear()+"-"+addZero(month)+"-"+addZero(day)+getWeekday2(weekday)+" "+changehours(hour)+":"+addZero(minute)+":"+addZero(second)+"am";
    else{
    document.body.innerText=nowDate.getFullYear()+"-"+addZero(month)+"-"+addZero(day)+getWeekday2(weekday)+" "+changehours(hour)+":"+addZero(minute)+":"+addZero(second)+"pm";    
    }
}


function toFormat2(){
     nowDate=new Date();
     month=nowDate.getMonth()+1;
     day=nowDate.getDate();//显示日期;
     hour=nowDate.getHours();
     minute=nowDate.getMinutes();
     second=nowDate.getSeconds();
     weekday=nowDate.getDay();//显示星期;
     printDate();
}

//window.setInterval(toFormat1,1000);
window.setInterval(toFormat2,1000);
</script>
</body>
</html>

现在我们要做一个稍微复杂的东西，如下HTML，有一堆Select用于选择日期和时间，在选择后，实时在 id 为 result-wrapper 的 p 标签中显示所选时间和当前时间的差值。

使用上方的HTML结构（可以根据需要自行微调）为基础编写JavaScript代码
当变更任何一个select选择时，更新 result-wrapper 的内容
当所选时间早于现在时间时，文案为现在距离 “所选时间” 已经过去 xxxx
当所选时间晚于现在时间时，文案为现在距离 “所选时间” 还有 xxxx
注意当前时间经过所选时间时候的文案变化
注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年
同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">    
            <title>选择日期</title>

    </head>
    <body>
            <select id="year-select">
                    <option value="">请选择 年</option>
                </select>

                <select id="month-select">
                    <option value="">请选择 月</option>
                </select>

                <select id="day-select">
                    <option value="">请选择 日</option>
                </select>

                <select id="hour-select">
                <option value="">请选择 小时</option>
                </select>

                <select id="minite-select">
                <option value="">请选择 分钟</option>
                </select>

                <select id="second-select">
                <option value="">请选择 秒</option>
                </select>

                <p id="result-wrapper"></p>

            <script>
            var year=document.getElementById("year-select");
            var month=document.getElementById("month-select");
            var day=document.getElementById("day-select");
            var hour=document.getElementById("hour-select");
            var minute=document.getElementById("minite-select");
            var second=document.getElementById("second-select");
            var result=document.getElementById("result-wrapper");

        var changeDD = 1;//->一个全局变量
        //初始化为现在时间
        function YYYYMMDDstart() {
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        //先给年下拉框赋内容
        var y = new Date().getFullYear();
        for (var i = (y - 47); i < (y + 21); i++) {//以今年为准，前30年，后30年
           year.options.add(new Option(" " + i + " 年", i));
        }
        //赋月份的下拉框
        for (var i = 1; i < 13; i++){
        month.options.add(new Option(" " + i + " 月", i));
        }
        //小时下拉框
        for(var i=1;i<=24;i++){
            hour.options.add(new Option(i));
        }
        //分钟下拉框
        for(var i=1;i<=60;i++){
            minute.options.add(new Option(i));
        }
        //秒下拉框
        for(var i=1;i<=60;i++){
            second.options.add(new Option(i));
        }

/*         year.value = y;
        month.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() == 1 && IsPinYear(year.value)) 
           n++;
           writeDay(n); //赋日期下拉框
        //->赋值给日，为当天日期
        day.value = new Date().getDate(); */

        }



        function writeDay(n) //据条件写日期的下拉框
    {
        var e = day;
        optionsClear(e);
        for (var i = 1; i < (n + 1); i++)
        {
            e.options.add(new Option(" " + i + " 日", i));
            if(i == changeDD){
                e.options[i].selected = true;  //->保持选中状态
            }
        }
        console.log(i);
        console.log(changeDD);
    }

    function IsPinYear(year) //判断是否闰平年
    {
        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
    }

//改变日下拉框
    day.onchange=function DDD(){
        changeDD = day.value;
    }

    function optionsClear(e) {
        e.options.length = 1;
    }


//年发生变化时日期发生变化(主要是判断闰平年)
    year.onchange=function(){
         var MMvalue = month.options[month.selectedIndex].value;
         if (MMvalue == "") {
           var e = day;
            optionsClear(e);
            return;
        }
        var n = MonHead[MMvalue - 1];
        if (MMvalue == 2 && IsPinYear(year.value)) 
        n++;
        writeDay(n)
             }
    //月发生变化时日期联动         
    month.onchange=function(){
        var YYYYvalue = year.options[year.selectedIndex].value;
        console.log(YYYYvalue);
        if (YYYYvalue == "") {
            var e = day;
            optionsClear(e);
            return;
        }
        console.log(month.value);
        var n = MonHead[month.value - 1];
        console.log(n);
        if (month.value == 2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
    }


     if (document.attachEvent)
        window.attachEvent("onload", YYYYMMDDstart);
    else
        window.addEventListener('load', YYYYMMDDstart, false);

     function checkTime(x) {
            if (x < 10) {
                x = "0" + x;
            }
            return x;
        }


    function getTimeSelect(){
        var str=year.value+"-"+month.value+"-"+day.value;
        var timeSelect=new Date(str);
        return year.value+"年"+checkTime(month.value)+"月"+checkTime(day.value)+"日"+getWeekday(timeSelect.getDay())+" "+checkTime(hour.value)+":"+checkTime(minute.value)+":"+checkTime(second.value);
    }


    function getWeekday(a){
    var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    weekday=week[a];
    return weekday;
    }   

    function distance(){
        var now=new Date();
        var timeSelectStr = year.value + "/" + month.value + "/" + day.value + " " + hour.value + ":" + minute.value +
                ":" + second.value;
        var SelectTime=new Date(timeSelectStr);
        var secondDistance=now.getTime()-SelectTime.getTime();
        var str;
            if (secondDistance < 0) {
                secondDistance = -secondDistance;
                str = " 还有";
            } else {
                str = " 已经过去";
            }
            var daym = secondDistance / 86400000;
            var hourm = (secondDistance % 86400000) / 3600000;
            var minutem = ((secondDistance % 86400000) % 3600000) / 60000;
            var secondm = (((secondDistance % 86400000) % 3600000) % 60000) / 1000;
            return str + parseInt(daym) + "天" + parseInt(hourm) + "小时" + parseInt(minutem) + "分" + parseInt(secondm) +
                "秒";

    }

        function showDate(){
            result.innerHTML="现在距离"+ getTimeSelect() + distance();
        }

        setInterval(showDate,1000);

            </script>
    </body>
</html>